<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/59a875f6-0203-4ff2-9514-f168252c53c0/d5711d94-de91-4a30-bbd6-bde08b3cd189/Frame_2027.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/59a875f6-0203-4ff2-9514-f168252c53c0/d5711d94-de91-4a30-bbd6-bde08b3cd189/Frame_2027.png" width="40px" /> Chatbotの表示・展開方法を設定できます。
以下のような形で、Chatbotの表示・展開を柔軟に設定できます:
<aside>
CommChatの固定バナーを表示し、クリック時にシナリオを展開
自社で用意したフローティングボタンを表示し、クリック時にCommChatを展開
Shopifyの「カートに入れる」ボタンを起点にChatbotを展開
WordPress製LPなどに表示し、任意のボタンをクリック時にシナリオを展開 </aside>
表示ページの指定
Shopifyのページ上に表示させる場合
Shopify外のページに表示させる場合
ワードプレスで作成したLPなど、Shopify外で作成されたページに表示したい場合は、発行されたタグを該当ページの <body>
内または </body>
の直後に貼り付けてください。
発行されたのJavaScriptタグを、ウェブサイトの<body>タグ内 もしくは</body>の後に以下のコードを貼り付けてください。
<aside> 💡 複数のシナリオ(起動ボタン)を同一LP内に埋め込む場合
複数のシナリオを同一LP内に埋め込む場合はdata-chatbot
以下のユニークタグのみを区切って、並べて記載して、設置ください。
例)以下の2つのシナリオを設置する場合
記載方法は以下となり、このタグを設置してください。
<script type="text/javascript"
src="[<https://widget.comm-chat.com>](<https://widget.comm-chat.com/>)"
id="comm-chat"
data-chatbot=
"89aaabe8-9cd8-465d-932f-4b5e6343b932,
765dad38-55ad-48b4-a349-b738c3ce5849">
</script>
</aside>
<aside> 💡 CommChatの表示速度を上げたい場合は、Shopifyページでもタグ埋め込みで実装すると、早くなる場合がございます。
</aside>
バナーの表示設定
CommChatmの固定バナーを画面右下に表示するか否か設定できます。
チャットボットを最初から展開する
ページ遷移した際に、Chatbotを最初から展開するか否かを選択頂けます。
クリックしてbotを表示させる
この設定により、LPなどに設置した指定のボタンをクリックしたタイミングでChatbotが展開できるようになります。
【設定方法】
CTAボタンのクラス名
を指定
,
で区切って入力してください。クラス名
は<a>タグのものを指定するようにしてください。
scriptでページ遷移を制御している場合は、script要素を削除し<a>タグへクラス名を設置してください。
クラス名
の確認方法はこちら
<aside> 💡
※「ShopPay」などの動的チェックアウトボタン
をCommChat起動ボタンにすることはできません。
詳細はこちらをご確認ください。
</aside>