iframe & Bubble Widget
最新の更新:2023-12-08

iframe & Bubble Widget

image-20231211190722298

You can embed the bot into your own website or application through <iframe> or a widget.

  • Domain Whitelist: Defines the range of domain names where the "iframe/widget" code can be embedded. If closed, there are no restrictions.
  • Credits Consumption Limit: Defines the daily limit on bot points consumption within the "iframe/widget". If closed, there are no restrictions.
  • Website User Rate Limit: Defines the message sending frequency for each individual user when using the "iframe/widget". If exceeded, you can customize a reply to prompt the user.

image-20231211161855167

  • Custom Widget UI: You can customize the display style of the widget, including the name, description, avatar, icon, and theme color.

Advanced Settings for Bubble Widget

For the bubble widget, you can customize the widget style using the API.

// Display the chat dialog // Parameter 1: style - optional. Controls the width, height, display position, and other styles of the chat dialog. // Parameter 2: parent - optional. Specifies the container where the chat dialog should be placed. window.ChatBot.show("width: 300px; height: 480px; display: fixed; bottom: 30px; right: 80px; border: none; outline: none;", document.body); // Set the user ID window.ChatBot.setAccountId("somebody");
          // Display the chat dialog
// Parameter 1: style - optional. Controls the width, height, display position, and other styles of the chat dialog.
// Parameter 2: parent - optional. Specifies the container where the chat dialog should be placed.
window.ChatBot.show("width: 300px; height: 480px; display: fixed; bottom: 30px; right: 80px; border: none; outline: none;", document.body);

// Set the user ID
window.ChatBot.setAccountId("somebody");

        
このコードブロックは、フローティングウィンドウに表示されます

Here is the translation to English:

Embed the Bubble Widget into Shopify

image-20240523180748897

Copy the embed code of the bubble widget.

1

Go to the Shopify Store admin panel, find the template you are using, and enter "Edit Code".

2

Find the theme.liquid file, and paste the embed code inside the <head> tag, then save.

image-20240523180959768

The bubble widget will then appear in the bottom right corner of your Store's website for visitors to consult.