お客様の画面の全体像とURLの作り方
ここからのページでは、お客様(LINEの友だち)側に表示される画面を紹介します。会員証・プラン購入・予約などはすべて「LIFFアプリ(LINEの中で開く会員ページ)」として表示されます。このページでは、どの画面がどのURLで開くのか、そのURLをどこで入手してお客様に案内するのかをまとめます。
管理画面との関係
お客様の画面は、管理画面の LIFFアプリ一覧 で登録した「デフォルトのLIFFアプリ」を通して表示されます。プランやクーポンなど画面に出る内容は、それぞれの管理画面での設定がそのまま反映されます。
入口URLの基本形
お客様に案内するURLは、次の形が基本です。
https://liff.line.me/<LIFF ID>このURLを開くと、LINEアプリの中で会員ページが立ち上がり、最初に プラン一覧(ホーム) が表示されます。さらに、URLの後ろに画面ごとのパスを付けると、その画面を直接開けます。
https://liff.line.me/<LIFF ID>/member-ship ← 会員証を直接開く例ご自身のLIFF IDを確認するには
プラン編集画面の「LIFFプランURL」など、管理画面のURLコピー機能で取得したURLに https://liff.line.me/<LIFF ID>/... の形でLIFF IDが含まれています。その https://liff.line.me/<LIFF ID> までの部分を流用し、後ろのパスを付け替えるのが確実です。
画面とURLの一覧
| 画面 | パス | お客様への案内方法 |
|---|---|---|
| プラン一覧(ホーム) | /plans (省略可) | https://liff.line.me/<LIFF ID> をリッチメニュー等に設定 |
| プラン詳細 | /plans/<プランID> | プラン編集画面の「LIFFプランURL」をコピー |
| プラン契約(購入) | /subscribe/<価格ID> | プラン一覧・詳細の「購入する」ボタンから遷移(URLの個別案内は不要) |
| 会員証 | /member-ship | パスを付けたURLをリッチメニュー等に設定 |
| 契約内容の確認・解約 | /subscription/<契約ID> | プラン一覧の「プランを確認する」から遷移(契約ごとのURLのため個別案内は不要) |
| 予約一覧 | /reservations | パスを付けたURLをリッチメニュー等に設定 |
| 予約の作成 | /subscription/<契約ID>/reservations | 契約中プランの「予約する」ボタンから遷移 |
| クーポン | /coupons/<クーポンID> | クーポン編集画面の「クーポン取得用URL」をコピーして配布 |
| 会員情報の登録・変更 | /user/new / /user/edit | 会員証の「登録情報の変更」から遷移。直接案内も可 |
| お支払い方法の確認・変更 | /settings/payment-info | 画面下部の共通メニュー「お支払い情報」から遷移 |
| アンケート回答 | /survey-forms/<フォームID> | フォーム一覧の「回答URL」をコピーして配信などに利用 |
| 店舗チェックイン | /shops/<店舗ID>/check-in | 店舗一覧の「QRコードを表示」で取得したQRコードを店頭に設置 |
このほか、設定があるクライアントのみ利用できる画面として、モバイルオーダー(/subscription/<契約ID>/mobile-order、契約中プランの注文ボタンから遷移)、ポイント履歴(/points、会員証のポイント表示から遷移)などがあります。
画面下部の共通メニュー
お客様の画面の下部には、3つの共通メニュー(タブ)が表示されます。
| タブ | 移動先 |
|---|---|
| ホーム | プラン一覧 |
| 会員情報 | 会員証 |
| お支払い情報 | お支払い方法の確認・変更 |
お客様はどの画面からでも、このタブで主要な画面に移動できます。
リッチメニューへの設定方法
リッチメニュー一覧 でメニューを作成するとき、タップ領域のアクションに上記のURL(例: https://liff.line.me/<LIFF ID>/member-ship)を貼り付けると、お客様がメニューをタップしたときにその画面が直接開きます。「会員証」「ご予約」「プラン購入」のようにタップ領域ごとに別の画面を割り当てるのが定番の構成です。
LINE以外のブラウザで開いた場合
これらのURLはLINEアプリの中で開くことを前提にしています。パソコンなどLINE以外のブラウザで開いた場合は、画面は表示されず、スマートフォンでLINEを開くための案内(QRコードやLINEアプリ起動ボタン)が表示されます。お客様への案内は、LINEのトーク・リッチメニュー・LINE内で開くページの中に置くようにしてください。
実際の見た目を確認するには
ご自身のスマートフォンで自店舗のLINE公式アカウントを友だち追加し、リッチメニューや案内URLから開くと、お客様と同じ画面を確認できます。