anybotで作るクーポン×スタンプカードの設定手順まとめ

目次

• はじめに
• クーポン設定
• スタンプカード設定
  • スタンプカード基本設定
  • スタンプカード画面作成
  • 報酬設定
• 付随画面作成
  • クーポン一覧画面作成
  • クーポン一覧詳細作成
• おわりに

はじめに

この記事ではLINE上で動作する「クーポンを獲得できるスタンプカード」を作成していきます。

まず最初にbot一覧画面から、今回扱うbotの基本設定を開き、"スタンプカード" と "クーポン" にチェックを入れてください。

クーポン設定

1. ナビゲーションバー [クーポン] をクリック
2. [クーポン発行] ボタンをクリック
   1. クーポンの設定を入力し、[保存] をクリック
   2. 抽選の景品として扱いたい個数だけクーポンを発行

スタンプカード設定

スタンプカード基本設定

1. ナビゲーションバー [スタンプカード] をクリック
2. 過去にスタンプカードを作成している場合は3を、初めての場合は4を実行
3. 画面左下 [テンプレート作成] をクリック
4. スタンプカードの設定を入力し、画面右下 [保存] をクリック
   ※繰越可能をONにすると1枚目の台紙にスタンプを貯め切った際、2枚目の台紙にスタンプが繰り越されます

スタンプカード画面作成

1. ナビゲーションバー [APP設定] をクリック
2. 画面左下 [フォルダ操作] もしくは [画面/新規フォルダ作成] をホバーし、[画面作成] をクリック
3. 画面タイプは "フォーム" を選択、画面名に "スタンプカード" と入力して [保存] をクリック
4. ミニアプリエディタ内の + をホバーし、カード => スタンプカード の順で選択し、クリック
5. 任意のタイトルを入力、その後 Select template をクリックし、先ほど作成した台紙を選択
6. ナビゲーションバー [スタンプカード] をクリック

報酬設定

1. サブヘッダー [コード] をクリック
2. 画面右上 [コード作成] をクリックし、任意のタイトルとスタンプ数を入力し [保存] をクリック
   　※ミニアプリ画面 は先ほど作った画面 「スタンプカード」 を選択
3. 必要なスタンプコード分だけ12を繰り返す
   　初回無料付与の1ポイント、アンケート回答の1ポイント、
   　購入金額に応じた2, 4, 6ポイントなど使い方は自由
4. サブヘッダー [報酬] をクリック
5. 画面右上 [コード作成] をクリックし、任意の報酬を設定し [保存] をクリック

付随画面作成

以下の作業はAPP設定にて行います。

クーポン一覧画面作成

1. 画面左下 [フォルダ操作] をホバーし、[フォルダ内に画面作成] をクリック
2. 画面タイプは "選択用データ一覧" を選択、画面名に "クーポン一覧" と入力して [保存] をクリック　
3. データ連携先に "マイクーポン一覧" を選択
4. その横の "パラメータ指定" に 「showMulti=1」と入力して [保存] をクリック

※このパラメータを記述することで、クーポン重複時に枚数分表示されるようになります

5. 検索ボックスとカテゴリ欄をクリックし、🗑️アイコンをクリックして削除

クーポン詳細画面作成

1. 画面左下 [フォルダ操作] をホバーし、[フォルダ内に画面作成] をクリック
2. 画面タイプは "コンテンツ詳細" を選択、画面名に "クーポン詳細" と入力して [保存] をクリック
3. データ連携先に "マイクーポン一覧" を選択
4. 「price」の文字列をクリックし、" " に変更(空文字)
5. 不要なテキスト要素をクリックし、🗑️アイコンをクリックして削除
6. [ADD TO CART] ボタンをクリックし
7. ポップアップ内、[遷移先画面] をクリックして "クーポン一覧" を選択
8. ADD TO CART をクリックし、"利用する" にテキストを変更
9. [その他の機能や動作を実行] の選択欄をクリックし "クーポン使用" を選択
10. "クーポン一覧" の編集画面に戻り、リスト素材をクリック
11. 遷移先画面に "クーポン詳細" を設定

公開作業

1. ナビゲーションバー内 [公開する] ボタン(画面右上)をクリック
2. ポップアップ内 [OK] をクリック
3. 確認したいミニアプリの編集画面で [URL & QR] をクリック
4. LINE接続が済んでいる方はQRをスマホで読み込み※1
5. 「ゲーム」と「クーポン一覧」画面をミニアプリの遷移先に指定※2