スタートガイド

STEP5 LPにチャットを設置する

ビルドしたプロファイルをLPに設置する方法をご案内します。
なお、ビルドしたプロファイルはLPに複数設置することも可能です。

ビルド画面

【プロファイル管理】を押下し、ビルドしたいプロファイルのビルドを押下します。
4404993396889_1.png

プロファイルの編集画面を表示している場合は、ビルドのタブを押下します。
4404993396889_2.png

チャットコードの確認

現在使用中のチャットコード を押下し、チャットの起動に必要なコードを確認します。
smart dialogは、LPテンプレートにコードを実装することで起動する仕様です。

<script src="https://cdn.smart-dialog.jp/profiles/hogehoge/current/boostrap.js"></script>

※ hogehoge部分にはプロファイルのIDが入ります

LPテンプレートへの設置

コピーボタンをクリックしてscriptをコピーします。
4404993414681_1.png

コピーしたscriptをecforceのLPテンプレートのheadに設定することでsmart dialogの設定は完了です。
LPテンプレートは【HOME > マーケティング管理 > LP 管理 > LP テンプレート管理】から遷移可能です。4404993414681_2.png

LPテンプレート内の任意のボタンや文字を押下したらチャットを起動させる場合は、LPテンプレート管理のボディーに以下のようなコードの実装が必要となります。

例1:smart dialog という文字を押下したらチャットを起動させたい

<a href="#chatform">smart dialog</a>

例2:画像を押下したらチャットを起動させたい

<a href="#chatform"><img src="{{ file_root_path }}/hogehoge</></a>

注意点

#chatform はプロファイルの編集画面の チャット設定項目 に設定されている ターゲットID となります。
ターゲットID を変更している場合は、上記コードを適宜置き換えて実装してください。

LPで動作確認する

LPで設置したチャットが問題なく動作するか、テスト受注が作成できるかを確認してください。

PCで確認すると画面右側にチャットが表示されます。
チャットで入力した内容がLP購入フォームの必須項目を全て埋めることができているかを確認してください。
※ 必ずsmartphoneでも動作確認をしてください

また、テスト受注は適宜削除してください。

この記事の目次

このセクションの記事

スタートガイド