ボット設置 | Notion

<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の表示・展開方法を設定できます。

次のステップ
配信設定 </aside>

以下のような形で、Chatbotの表示・展開を柔軟に設定できます：

<aside>

CommChatの固定バナーを表示し、クリック時にシナリオを展開
自社で用意したフローティングボタンを表示し、クリック時にCommChatを展開
Shopifyの「カートに入れる」ボタンを起点にChatbotを展開
WordPress製LPなどに表示し、任意のボタンをクリック時にシナリオを展開 </aside>
表示ページの指定
- Shopifyのページ上に表示させる場合
  - 対象のURLを指定するだけで表示設定が完了します。
  - 複数URLを登録した場合、OR条件で判定されます。
- 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ページでもタグ埋め込みで実装すると、早くなる場合がございます。
  
  画面収録 2024-04-11 12.11.16.mov
  
  </aside>
バナーの表示設定

CommChatｍの固定バナーを画面右下に表示するか否か設定できます。
チャットボットを最初から展開する

ページ遷移した際に、Chatbotを最初から展開するか否かを選択頂けます。
クリックしてbotを表示させる

この設定により、LPなどに設置した指定のボタンをクリックしたタイミングでChatbotが展開できるようになります。

【設定方法】
- CTAボタンのクラス名を指定
  - 複数指定する場合は、カンマ, で区切って入力してください。
- クラス名は<a>タグのものを指定するようにしてください。
  - scriptでページ遷移を制御している場合は、script要素を削除し<a>タグへクラス名を設置してください。
- クラス名の確認方法はこちら
<aside> 💡

※「ShopPay」などの動的チェックアウトボタンをCommChat起動ボタンにすることはできません。

詳細はこちらをご確認ください。

</aside>