■目的 自社管理のWEBページでLINEの友だち登録前にSMS認証を行い、名前や電話番号などのユーザー情報を取得する方法。 ユーザー情報のほか、設定したアンケートの回答なども取得できます。 取得した情報はECAI管理画面の申し込みリストで確認ができます。 また取得した申し込みリストよりSMS配信を行う場合はこちら> ■セット所要時間 30分~1時間 (※取得するセット内容のボリュームによって変わります) ■セットの流れ ECAIで公開されているAPIを使用します。下記ガイドの仕様に沿って設定を進めて下さい。 サンプルページ> サンプルダウンロード> ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows:Ctrl + U mac:option + command + U 【APIトークンの発行】 (1)コンテンツ > 外部連携 > ECAI API トークンを発行する
![](https://help.ecai.jp/wp-content/uploads/2024/04/2024-04-08_18h29_59-1024x649.png)
↓ (2)管理名と有効期限を設定する 管理名はわかりやすい任意のものを設定してください。また有効期限は後からの変更ができません。
![](https://help.ecai.jp/wp-content/uploads/2024/04/2024-04-08_18h49_16-1024x550.png)
【発行済みAPIトークンの確認、変更】 (1)発行済みリスト
![](https://help.ecai.jp/wp-content/uploads/2024/04/2024-04-08_18h55_30-1024x576.png)
↓ (2)アクセストークン 発行されたAPIトークンのステータスを「オフ」または削除した場合、設置済みのフォームがその時点より機能しなくなります。 またトークンは外部に流出しないように管理してください。こちらのトークンは後で使用します。
![](https://help.ecai.jp/wp-content/uploads/2024/04/2024-04-08_18h58_03-1024x521.png)
【申込設定の発行】 (1)コンテンツ > 申込設定 > 追加する
![](https://help.ecai.jp/wp-content/uploads/2024/04/2024-04-11_16h17_28-1024x563.png)
↓ (2)各種の項目設定 ①管理名を入れる ※ECAI内で管理するための名称になりますので「2024年1月SMS送信者」など管理しやすい名前にすることを推奨します ②受付期間を設定。必要ない場合は「設定しない」にチェック ③SMSの認証済みのみを受ける場合はチェック ④SMS発信元番号は「共通(0120-002-495)」を選択する ※共通(0120-002-495)はECAI側で取得している番号となります。 ※仮にお客様が0120-002-495に電話発信をした場合は自動音声が流れます(自動音声は固定となり変更不可となります) ※0120-002-495の自動音声を確認する際は0120-002-495に発信しご確認ください ⑤保存する ⑥保存後、申し込みコードが自動で発行されますのでコピーをして下さい。後ほどフォームの作成で使用します。
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-04-11_16h28_31.png)
【入力フォームの設定】 下記サンプルページを元に説明しますので、まだの場合はダウンロードしてください。 サンプルページ> サンプルダウンロード> ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows:Ctrl + U mac:option + command + U ■入力フォームの作成 サンプルページは名前、メールアドレス、携帯電話番号を取得するのですが、携帯電話番号を入力するとSMSコードが発行できるようになります。 (1)formタグ内にinputを非表示で設定 id:request_code name:request_code value:申込コード ※【申込設定の発行】(2)-⑥でコピーしたもの
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-11_22h28_53-1024x233.png)
(2)入力項目の設定 ①名前:name属性にはnameを設定 ②メールアドレス:name属性にはemailを設定 ③携帯電話番号:name属性にはtelを設定 ④携帯電話番号入力時のonkeyupイベントの設定
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-11_23h41_28-1024x351.png)
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-11_23h58_11.png)
<送信可能な入力項目の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()のクリックイベントを設定
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-17_13h36_17-1024x358.png)
(2)SMSコード発行のクリックイベント ③APIトークンの設置 ④クリックイベント設置 ※【発行済みAPIトークンの確認、変更】(2)アクセストークンで発行されたもの ⑤URLにhttp://[お客様ドメイン]/api/v1/rfm/code-deliveryを指定 ⑥パラメーターのsend_number、request_codeは必須です ⑦Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑧モーダル呼び出し
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-17_13h41_38_3.png)
■SMSコード入力用のモーダル設置 ①モーダル本体 ②全体にid="modal-content"を指定 ③認証コードの入力欄にid="code"指定 ④認証コードの入力欄のname属性にname="code"を指定 ⑤閉じるボタンにid="modal-close"を指定
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-17_17h18_56_2-1024x401.png)
⑥モーダルイベントの設置
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-17_18h49_58.png)
■SMSコード確認 ①認証コードの入力チェック ②URLにhttp://[お客様ドメイン]/api/v1/rfm/code-checkを指定 ③パラメーターのsend_number、request_code、codeは必須です ④Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ⑤レスポンスがOKだった場合は送信ボタンを表示させる
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-18_16h57_43.png)
■入力フォームの送信 (1)ボタンの設置 ①送信ボタン全体 ②ボタンにid="requestbtn"を指定 ③ボタンにRequestForm()のクリックイベントを設定
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-18_21h22_28-1024x388.png)
(2)送信処理 ①送信処理全体 ②URLにhttp://[お客様ドメイン]/api/v1/rfm/inboxを指定 ③Bearer認証にはECAI管理画面にて発行したAPIトークンを指定してください ④レスポンスがOKだった場合はcomplete.htmlにリダイレクト
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-18_21h57_02.png)
【送信テスト】 作成した入力フォームを任意のサーバーへアップロードし下記の流れで送信テストを行ってください。 送信内容がECAIの申込リストに反映されれば完了となります。
![](https://help.ecai.jp/wp-content/uploads/2024/06/2024-06-18_22h34_17-1024x389.png)
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。