■目的 自社管理のWEBページでLINEの友だち登録前にSMS認証を行い、名前や電話番号などのユーザー情報を取得する方法。 ユーザー情報のほか、設定したアンケートの回答なども取得できます。 取得した情報はECAI管理画面の申し込みリストで確認ができます。 また取得した申し込みリストよりSMS配信を行う場合はこちら> ■セット所要時間 30分~1時間 (※取得するセット内容のボリュームによって変わります) ■セットの流れ ECAIで公開されているAPIを使用します。下記ガイドの仕様に沿って設定を進めて下さい。 サンプルページ> サンプルダウンロード> ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows:Ctrl + U mac:option + command + U 【APIトークンの発行】 (1)コンテンツ > 外部連携 > ECAI API トークンを発行する
↓ (2)管理名と有効期限を設定する 管理名はわかりやすい任意のものを設定してください。また有効期限は後からの変更ができません。
【発行済みAPIトークンの確認、変更】 (1)発行済みリスト
↓ (2)アクセストークン 発行されたAPIトークンのステータスを「オフ」または削除した場合、設置済みのフォームがその時点より機能しなくなります。 またトークンは外部に流出しないように管理してください。こちらのトークンは後で使用します。
【申込設定の発行】 (1)コンテンツ > 申込設定 > 追加する
↓ (2)各種の項目設定 ①管理名を入れる ※ECAI内で管理するための名称になりますので「2024年1月SMS送信者」など管理しやすい名前にすることを推奨します ②受付期間を設定。必要ない場合は「設定しない」にチェック ③SMSの認証済みのみを受ける場合はチェック ④SMS発信元番号は「共通(0120-002-495)」を選択する ※共通(0120-002-495)はECAI側で取得している番号となります。 ※仮にお客様が0120-002-495に電話発信をした場合は自動音声が流れます(自動音声は固定となり変更不可となります) ※0120-002-495の自動音声を確認する際は0120-002-495に発信しご確認ください ⑤保存する ⑥保存後、申し込みコードが自動で発行されますのでコピーをして下さい。後ほどフォームの作成で使用します。
【入力フォームの設定】 下記サンプルページを元に説明しますので、まだの場合はダウンロードしてください。 サンプルページ> サンプルダウンロード> ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows:Ctrl + U mac:option + command + U ■入力フォームの作成 サンプルページは名前、メールアドレス、携帯電話番号を取得するのですが、携帯電話番号を入力するとSMSコードが発行できるようになります。 (1)formタグ内にinputを非表示で設定 id:request_code name:request_code value:申込コード ※【申込設定の発行】(2)-⑥でコピーしたもの
(2)入力項目の設定
①名前:name属性にはnameを設定
②メールアドレス:name属性にはemailを設定
③携帯電話番号:name属性にはtelを設定
④携帯電話番号入力時のonkeyupイベントの設定
⑤質問1ではタイトルのname属性にはcol_1_title、回答のname属性にはcol_1を設定
※ECAIにデータを送信する際に⑤は必須となります
<送信可能な入力項目のname属性一覧> request_code:申込コード※必須 advert_code:広告コード name:名前 nick_name:ニックネーム manager_name:担当者名 reserve_date:予約日時(日付型) tel:携帯電話番号 email:メールアドレス col_1_title:質問タイトル※必須 col_1:回答※必須 col_2_title:質問タイトル col_2:回答 col_3_title:質問タイトル col_3:回答 col_4_title:質問タイトル col_4:回答 col_5_title:質問タイトル col_5:回答 col_6_title:質問タイトル col_6:回答 … 最大100セット ■SMSコード発行 (1)ボタンの設置 ①ボタン全体のタグにclass="codeRequestButton"を指定 ②ボタンにSmsCodeRequest()のクリックイベントを設定
(2)SMSコード発行のクリックイベント ③APIトークンの設置 ④クリックイベント設置 ※【発行済みAPIトークンの確認、変更】(2)アクセストークンで発行されたもの ⑤URLにhttp://[お客様ドメイン]/api/v1/rfm/code-deliveryを指定 ⑥パラメーターのsend_number、request_codeは必須です ⑦Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑧モーダル呼び出し
■SMSコード入力用のモーダル設置 ①モーダル本体 ②全体にid="modal-content"を指定 ③認証コードの入力欄にid="code"指定 ④認証コードの入力欄のname属性にname="code"を指定 ⑤閉じるボタンにid="modal-close"を指定
⑥モーダルイベントの設置
■SMSコード確認 ①認証コードの入力チェック ②URLにhttp://[お客様ドメイン]/api/v1/rfm/code-checkを指定 ③パラメーターのsend_number、request_code、codeは必須です ④Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑤レスポンスがOKだった場合は送信ボタンを表示させる
■入力フォームの送信 (1)ボタンの設置 ①送信ボタン全体 ②ボタンにid="requestbtn"を指定 ③ボタンにRequestForm()のクリックイベントを設定
(2)送信処理 ①送信処理全体 ②URLにhttp://[お客様ドメイン]/api/v1/rfm/inboxを指定 ③Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ④レスポンスがOKだった場合はcomplete.htmlにリダイレクト
【送信テスト】 作成した入力フォームを任意のサーバーへアップロードし下記の流れで送信テストを行ってください。 送信内容がECAIの申込リストに反映されれば完了となります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。