​
Overview

The long-awaited chat widget native to the platform. We wanted to go simple with a lot of functionality and a clean interface. The widget is able to book, call tools, and converse using all of your assistant’s configuration (find & replace, tools, etc.). This is also the first instance of a decoupled framework from us meaning this widget and the code behind it is completely separate from our main server so it will run even if we go down for whatever reason. This widget also – as long as your OAuth is up-to-date and valid – will save all messages as a guest contact and show in your GoHighLevel conversation logs.

​
Installation Guide

​
Steps

  1. Copy the code and put it in a sheet or element where you can edit it
  2. Fill in your assistant ID and your GoHighLevel location ID for your assistant and OAuth to populate
  3. Replace the highlighted areas with your number and leadconnector inbound webhook URL
  4. Configure the inputs and settings as you please
  5. Copy the code and paste it in a JavaScript/HTML element on the page OR in the page header
  6. You’re ready to go!

​
Widget Code

​
Basic Chat Widget Script

Make sure to fill in your Assistant ID for the field that says "data-assistant-id" and fill in your location ID for the field that says "data-account-id". Check all highlighted areas in code. This will allow for OAuth access and your assistant to populate correctly. 
<script
  src="https://botdisplay.com/chat-widget.js"
  data-color="#44008a"   
  data-assistant-id="172…00"
  data-account-id="j…O"
  data-position="bottom-right"
  data-theme="light"
  data-show-prompt="true"
  data-prompt-message="Ask me about voice AI 🚀"
  data-startup-message="How can I help you today?"
  data-assistant-name="AI Assistant | buildassistants.app"
  data-button-icon="chat"
  data-greeting-message="👋 Hey there! My name is {assistant_name} and I'm here to help you with your automation needs."
  data-prompts='[{"text": "What is buildassistants.app?"}, {"text": "How do I get started?"}, {"text": "What does it cost?"}, {"text": "How does it work?"}]'
></script>

​
Advanced Call Interface Widget

For a more comprehensive implementation with call functionality: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Call Interface</title>
    <style>
        /* Full CSS styling code here - see original documentation for complete styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
        }
        
        .call-container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        /* Additional styles... */
    </style>
</head>
<body>
    <div class="call-container">
        <div class="phone-header">
            <div class="ai-avatar" id="aiAvatar">🤖</div>
            <h2 class="header-title">Talk to Our AI Agent</h2>
            <p class="header-subtitle">Available 24/7 • Average response time: < 2 seconds</p>
        </div>
        
        <!-- Widget HTML structure here -->
        
        <script>
            // Widget JavaScript functionality here
            function requestCallback() {
                // Callback implementation
            }
            
            function switchMode(mode) {
                // Mode switching implementation
            }
        </script>
    </div>
</body>
</html>

​
Configuration Options

​
Required Parameters

​
data-assistant-id

  • Description: Your assistant’s ID
  • Required: Yes
  • Example: "172…00"

​
data-account-id

  • Description: Your GoHighLevel Location ID where the assistant is from
  • Required: Yes
  • Example: "j…O"

​
Appearance Settings

​
data-color

  • Description: The hex code of your choice that is responsible for the color of the widget
  • Default: "#44008a"
  • Example: "#667eea"

​
data-position

  • Description: The position on the screen
  • Choices: (all lowercase)
    • bottom-right
    • bottom-left
    • top-right
    • top-left
  • Default: "bottom-right"

​
data-theme

  • Description: Dark or light theme
  • Choices: (all lowercase)
    • light
    • dark
  • Default: "light"

​
data-button-icon

  • Description: The icon of the idle widget button to open the actual conversation window
  • Choices: (all lowercase)
    • chat (default): Speech bubble icon
    • message: Message box icon
    • question: Question mark icon
    • headset: Support headset icon
  • Default: "chat"

​
Content Settings

​
data-show-prompt

  • Description: true or false to show the message above the widget button on idle
  • Choices: (all lowercase)
    • true
    • false
  • Default: "true"

​
data-prompt-message

  • Description: The message in the prompt popup (if visible)
  • Example: "Ask me about voice AI 🚀"

​
data-assistant-name

  • Description: The name displayed on the widget for the assistant
  • Example: "AI Assistant | buildassistants.app"

​
data-startup-message

  • Description: Initial message shown when widget loads
  • Example: "How can I help you today?"

​
data-greeting-message

  • Description: The first message in the chat widget from the assistant (the pre-determined message that shows when the user opens the widget)
  • Example: "👋 Hey there! My name is {assistant_name} and I'm here to help you with your automation needs."

​
data-prompts

  • Description: Allows you to add prompts to the widget to get the user to click on pre-determined questions (that could be fine-tuned in your knowledge base) to start the conversation
  • Format: JSON array of objects with text properties
  • Example:
[
  {"text": "What is buildassistants.app?"}, 
  {"text": "How do I get started?"}, 
  {"text": "What does it cost?"}, 
  {"text": "How does it work?"}
]

​
Key Widget Features

  • ✅ Decoupled architecture - runs independently of main servers
  • ✅ OAuth integration with GoHighLevel for seamless contact management
  • ✅ Guest contact creation with automatic conversation logging
  • ✅ Tool integration supporting all assistant configurations
  • ✅ Customizable appearance with themes, colors, and positioning
  • ✅ Interactive prompts for guided user engagement
  • ✅ Mobile responsive design for all device types
  • ✅ Real-time chat functionality with instant responses

​
Implementation Best Practices

Widget Placement:
  • Place script in page header for consistent loading
  • Ensure OAuth credentials are current and valid
  • Test widget functionality before deploying to production
Customization:
  • Use brand colors that match your website design
  • Write clear, engaging prompt messages
  • Configure assistant name to reflect your brand
  • Set up relevant quick-start prompts for common questions
Performance:
  • Widget loads independently for reliability
  • Decoupled architecture ensures uptime
  • Guest contacts automatically sync with GoHighLevel

​
Troubleshooting

Widget not appearing:
  • Verify assistant ID and account ID are correct
  • Check OAuth connection status
  • Ensure script is properly embedded in page
Messages not saving:
  • Confirm OAuth credentials are up-to-date
  • Verify GoHighLevel location ID is accurate
  • Check contact permissions and settings
Styling issues:
  • Validate hex color codes
  • Ensure position values are lowercase
  • Check theme compatibility with website