iframe

Embed the Bot into your business website using an iframe. When users visit the target webpage, the Bot chat window will load, providing services such as online customer support, pre-sales consultation, and lead collection.

How to Integrate into a Website

1. Go to Bot-Integration-iframe and copy the "Integration Code."
2. Paste the code into the desired location in your website's HTML page.
3. Publish the 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.

Custom UI

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

• Widget Nickname: Allows custom naming.
• Widget Description: Allows custom description information.
• Theme Settings: Allows customization of the widget's theme color, bubble icon, and Bot appearance.
• Bubble Customization: Supports setting the bubble's display position and size according to business needs.
• Dialog Box Customization: Supports setting the chat window's width and height according to business needs (for compatibility with smaller screens, large values are not recommended).
• Custom Logo: Growth plan users can customize the logo or choose not to display it. Business plan users can customize the domain address.

Security and Rate Limiting

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

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

  • Up to 3 settings
  • Supports setting the total points consumption limit for the widget bubble on a "daily/weekly/monthly" basis

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

  • Up to 3 settings
  • Supports setting the points consumption limit for each user on a "daily/weekly/monthly" basis

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

  • Up to 3 settings
  • Supports setting the message sending limit for each user based on "number of messages/time period"
  • When the limit is exceeded, the Bot will no longer respond, and a preset message will be automatically sent.

Event Callback

How to Pass Widget Bubble User Behavior Events 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 desired 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 whether the data is normal in the GA4 or Webhook address. Once the data is successfully stored, you can analyze user data.

Advanced Usage

Set User Information Interface

1. Set User ID

• Option 1: The address rule for embedding iframe in a webpage is: iframe_url+?user_id=your_user_id

  Note: Supports Bot developers in setting user ID

• Option 2: Dynamically set the user ID through javascript code

          Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

        

Event Callback Data Format

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

          {
  "client_id": "",  //Preferably obtained using the GA4 gtag method to get the client id. If not available, it is generated by GPTBots.
  "user_id": "",  //Developer-set UserId, 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)
    }
}