メインコンテンツにスキップ

リッチメニューデザインカスタマイズについて

このドキュメントでは、リッチメニューのデザインやアクションをカスタマイズする時の仕様について解説しています。なお、リッチメニューのデザインカスタマイズは有料の機能となっておりますのでご希望の際はサポートスタッフにお声がけください。

サポート担当 avatar
対応者:サポート担当
2週間以上前に更新

[参考] リッチメニューとは

LINE公式アカウントの機能の一つである「リッチメニュー」は、トーク画面の下部(キーボードエリア)に表示されるタイル状のメニューです。分割された画像ごとに表示内容を設定することで、Webページへの遷移や予約などのコンバージョン、クーポン画面などに誘導することができます。

以下公式情報を参照

画像下の赤点線で囲まれている領域がリッチメニュー

リッチメニューデザイン仕様

用語解説

  • 通常リッチメニュー

    • Nest診療にてデフォルトで提供されている、高さ1,100 px、幅2,500 px、行数1、列数5のリッチメニュー

  • セル

    • リッチメニューを構成する最小単位。いわゆるボタン。

    • セルごとに異なるアクションを設定可能

  • メニューバー

    • リッチメニュー下部に設置されたボタン

    • タップすることでリッチメニューの表示/非表示を切り替え可能

リッチメニューカスタマイズ例

  • 実際に運用されているクリニック様のカスタマイズされたリッチメニューです。ぜひご参考にしていただけますと幸いです。

デザイン仕様

リッチメニューデザインカスタマイズにおいては、基本的に自由にリッチメニューのデザインおよびセルタップ時のアクションをカスタマイズすることが可能です。

ただし、任意の領域に通常リッチメニューの"HOMEボタン"に対応するセルを追加する必要があります。

カスタマイズについて

推奨の値

高さ

自由に設定可能。

1,100 px

2,500pxで固定。

行数

自由に設定可能。

1-2行

列数

自由に設定可能。

3-5行

デザイン・アクションの制限について

基本的に、デザインおよびアクションは自由に設定が可能ですが、通常リッチメニューの"HOMEボタン"に対応するアクションはリッチメニューの任意の領域に設定する必要があります。

※HOMEボタンについては下記画像を参照ください。

貴院でデザインを作成する場合

リッチメニューデザインをBotlogy社ではなく貴院で行う場合、下記のをご共有ください。

  • リッチメニュー画像

    • png or jpg

  • カスタマイズセル情報

    • start x

      • カスタマイズセルの開始点のx座標

    • top y

      • カスタマイズセルの最上部のy座標

    • height

      • カスタマイズセルの高さ

    • width

      • カスタマイズセルの幅

    • アクション内容(下記のいずれか)

      • text

        • カスタマイズセルをタップした際にトークルームに送信されるテキスト

      • url

        • カスタマイズセルをタップした際に遷移するURL

注意点

  • 必ずHOMEボタンに対応するセルを1つ追加する必要があります。

  • メニューバーはリッチメニューのサイズに含まれません。

こちらの回答で解決しましたか?