Bubble Widget

Embed the Bot as a bubble widget on your business website. Users can click the bubble widget to open a chat window, providing services such as online customer support, pre-sales consultation, and lead generation.

How to Integrate into a Website

1. Go to Bot-Integration-Widget Bubble and copy the "Integration Code".
2. Paste the code into the head tag of your website's HTML page.
3. Publish your website to complete the AI Bot embedding and start the conversation.
4. If you need to customize the UI and logo, control user message frequency, or display proactive messages to enhance interaction rates, you can proceed with advanced settings.

Customizing the UI

This feature supports custom configuration of the widget bubble's size, position, color, icon, logo, and name.

• Widget Nickname: Allows customization of the name.
• Widget Description: Allows customization of the description.
• Theme Settings: Allows customization of the widget's theme color, bubble icon, and Bot's appearance.
• Bubble Customization: Supports customization of the bubble's display position and size according to business needs.
• Chat Window Customization: Supports customization of the chat window's width and height according to business needs (to ensure compatibility with small screens, it is not recommended to set values too large).
• Bot LOGO:
  • Platform LOGO: Displays the GPTBots Logo.
  • Organization LOGO: Displays the custom Logo uploaded by the enterprise here. All Bots under the organization use the same organization Logo.
  • Custom LOGO: Displays the uploaded custom Logo. Each Bot can use a different Logo. This feature is an advanced privilege and requires contacting sales for activation.
  • No LOGO: The chat window component does not display any Logo information.

Proactive Messages

Proactive messages can be displayed as cards or prompt messages to attract users' attention and guide them into a conversation or lead capture before they click the widget bubble. There are two styles of proactive messages: "Prompt Messages" and "Card Messages".

How to Create Prompt Messages

• Message Content: Supports setting up to 3 pieces of content, which will be dynamically displayed from bottom to top on the page once activated.
• Display Rules: Supports setting up to 3 prompt trigger conditions, displaying proactive messages when user environment conditions are met.
  • Trigger Conditions: Allows judging based on the user's browser/browser language/time zone/country region/operating system/UTM, etc.
  • Expressions: Provides calculation expressions such as =/≠/range/contains/does not contain/has value/no value for different types of values like number/string.
  • AND & OR: Allows setting that all conditions must be met or any condition can trigger the proactive message.
  • Events: Supports triggering proactive messages immediately or after a delay of N seconds.
• Message Display Frequency Control: To prevent frequent proactive messages from disturbing users, supports frequency control management by setting the maximum number of displays per "website/page" per "day/week/month".

How to Create Card Messages

After configuring the card message content, other configuration options are the same as above.

• Image Upload: Supports custom image uploads. It is recommended to control the image size to avoid long loading times.
• Title/Content: Users can input custom text.

How to Enable Proactive Messages

1. In the proactive message list, select the target message and click the enable button.
2. Visit the website page to view the proactive message.
3. Click the proactive message to open the chat window.

Security and Frequency Control

• Domain Whitelist: Defines the domain range where the "widget bubble integration code" can be embedded. If disabled, it is considered unrestricted.

• Credit Consumption Limit: Defines the credit consumption limit for the "widget bubble". If disabled, it is considered unrestricted.

  • Up to 3 rules can be set.
  • Supports setting the total credit consumption limit for the widget bubble by "daily/weekly/monthly".

• User Consumption Limit: Defines the credit consumption limit for each user. If disabled, it is considered unrestricted.

  • Up to 3 rules can be set.
  • Supports setting the credit consumption limit for each user by "daily/weekly/monthly".

• User Rate Limit: Defines the message sending frequency limit for each user. If disabled, it is considered unrestricted.

  • Up to 3 rules can be set.
  • Supports setting the maximum number of messages sent by each user per time period.
  • When the limit is exceeded, the Bot will no longer respond and will automatically reply with preset message content.

Event Callback

How to Transmit User Behavior Events of the Widget Bubble to GA4 or Third-Party Systems

1. Create a GA4 callback event, obtain the Measurement Protocol API Secret and Measurement ID from the GA4 target project, and fill them in.

2. Create a Webhook callback event, select the required callback event according to the page prompts, and fill in the URL and authentication information.

3. Enable the callback in the event callback list, and check if the data is normal in the GA4 or Webhook address. Once the data is successfully stored, you can analyze the user data.

Advanced Usage

Setting User Information Interface

1. Set User ID

          window.ChatBot.setUserId("your_user_id")
// Note: Supports Bot developers to set the user identity ID. 

        

2. Set User Email

          window.ChatBot.setEmail("somebody@mail.com")
// Note: Supports Bot developers to set the user email. When the user calls for manual service, they can skip the step of filling in the email. If not set, the user must fill in the email address to call for manual service.

        

Event Callback Data Format

The events and event attributes of the widget bubble transmitted through Webhook or GA4 use the following data format. Please parse and store them accordingly.

          {
  "client_id": "",  //Preferably obtained using GA4's gtag method. If not available, generated by GPTBots.
  "user_id": "",  //UserId set by the developer, null if not set.
  "event_name": "Show widget bubble",     //Event name
  "event_params": {  
      "key1": "abc",  //Event attribute name: attribute value (string)
      "key2": 123     //Event attribute name: attribute value (number)
    }
}

        

Embedding the Widget Bubble into Shopify

1. Copy the widget bubble's embed code.

2. Go to the Shopify Store admin panel, find the template in use, and enter "Edit Code".

3. Find the "theme.liquid" file, paste the embed code within the <head> tag, and save it.

4. The widget bubble will appear at the bottom right corner of your Store website for visitors to use for consultation.