Integration Guide

🚀 Quick Start

Follow these simple steps to add the AI Chat Widget to your website:

1 Generate Your Embed Code

Visit the Code Generator and fill in your credentials:

• Assistable API Key - From your Assistable dashboard
• Assistant ID - Your bot/assistant ID
• AutomateMyBiz Location ID - Your AMB location/sub-account ID
• AutomateMyBiz Private Access Token - AMB API token with required permissions
• AI Bot Name - Display name for your chatbot
• Chat Theme Color - Primary color for the widget
• Bot Avatar (Optional) - Upload an avatar image

2 Copy the Generated Code

After clicking "Generate Embed Code", you'll receive code that looks like this:

<!-- AI Live Chat Widget -->
<script src="https://ai-chatbot.automatemybiz.pro/widget/chat-widget.js"></script>
<script>
  AILiveChatWidget.init({
    assistableApiKey: 'asst_xxxxx...',
    assistantId: '1767164504753x148450098158239740',
    ghlLocationId: 'vDVoXqS1dMRlrGIpKM84',
    ghlApiToken: 'pit-xxxxx...',
    botName: 'Your Bot Name',
    themeColor: '#4F46E5',
    avatarUrl: 'https://yourdomain.com/path/to/avatar.png'
  });
</script>

3 Add Code to Your Website

Paste the generated code just before the closing </body> tag on every page where you want the chat widget to appear.

📋 Prerequisites

Before integrating the widget, make sure you have:

1. Assistable AI Account

• Active Assistable AI account
• Created assistant/bot with tools configured
• API key generated

2. AutomateMyBiz Account

• Active AMB account with a location/sub-account
• Private Access Token created with these scopes:
  • contacts.write
  • conversations.write
  • conversations/message.write

⚙️ Configuration Options

Complete reference for all configuration options:

Option	Type	Required	Description
assistableApiKey	String	Yes	Your Assistable API key (starts with "asst_")
assistantId	String	Yes	Your assistant/bot ID from Assistable
ghlLocationId	String	Yes	Your AutomateMyBiz location ID
ghlApiToken	String	Yes	AMB Private Access Token (starts with "pit-")
botName	String	Yes	Display name for your chatbot
themeColor	String	Yes	Hex color code (e.g., "#4F46E5")
avatarUrl	String	No	URL to bot avatar image (PNG, JPG, GIF)
position	String	No	Widget position (default: "bottom-right")

🔧 How It Works

Understanding the widget's backend flow:

First Message Flow

1. User sends their first message
2. Widget creates anonymous contact in AutomateMyBiz
3. Widget creates conversation in AutomateMyBiz
4. Message sent to Assistable AI for response
5. Both user and bot messages synced to AMB
6. Response displayed in chat

Subsequent Messages

1. User sends message
2. Widget checks for name, email, phone in message
3. If found, automatically updates AMB contact
4. Message sent to Assistable AI with full conversation history
5. Both messages synced to AMB conversation
6. Response displayed in chat

Data Persistence

• Contact ID - Stored in localStorage (persists across sessions)
• Conversation ID - Stored in sessionStorage (resets when tab closes)
• Message History - Maintained during active session

✨ Features

Automatic Contact Management

The widget automatically:

• Creates anonymous contacts on first interaction
• Extracts name, email, and phone from messages using regex
• Updates contact information in AutomateMyBiz
• Tags contacts with "ai-chat-widget" for easy filtering

Conversation Syncing

All conversations are synced to AutomateMyBiz in real-time:

• Every message (user and bot) appears in AMB Conversations
• Messages are searchable in AMB dashboard
• Supports full conversation history
• Works with AMB automation workflows

AI-Powered Responses

Powered by Assistable AI:

• Context-aware conversations with message history
• Tool calling support (appointments, calendar, etc.)
• Custom prompts and behaviors
• Multi-turn conversations

Mobile Responsive

• Full-screen on mobile devices
• Touch-friendly interface
• Optimized for all screen sizes

🎨 Customization

Theme Colors

The themeColor option controls:

• Chat bubble background
• Header background
• Send button background
• User message bubbles

Bot Avatar

Upload a custom avatar image to personalize your bot:

• Supported formats: PNG, JPG, GIF
• Maximum file size: 2MB
• Recommended size: 200x200px
• Displayed as circular avatar in chat

Bot Name

Choose a friendly name that matches your brand:

• Displayed in chat header
• Shown in welcome message
• Can be anything (e.g., "Sarah", "Support Bot", "Alex")

🔍 Troubleshooting

Widget doesn't appear

• Check browser console for errors
• Verify embed code is before </body> tag
• Ensure all required config options are provided
• Check that JavaScript is enabled in browser

Messages not syncing to AMB

• Verify AMB API token has correct permissions
• Check AMB location ID is correct
• Look for API errors in browser console
• Ensure AMB account is active

AI not responding

• Verify Assistable API key is correct
• Check assistant ID matches your bot
• Ensure assistant has tools configured in Assistable
• Check browser console for API errors

🚀 Advanced Usage

Multiple Widgets on Same Site

You can only have one widget instance per page. If you need different configurations on different pages, generate separate embed codes for each page.

Dynamic Configuration

You can programmatically initialize the widget with dynamic values:

// Get values from your backend or URL parameters
const config = {
  assistableApiKey: getApiKey(),
  assistantId: getAssistantId(),
  // ... other options
};

AILiveChatWidget.init(config);

Event Tracking

The widget logs all events to browser console for debugging:

• Contact creation
• Conversation creation
• Message syncing
• AI responses
• Errors and warnings

💬 Support & Resources

Documentation

• Code Generator
• Assistable AI Docs
• AutomateMyBiz API Docs

Common Use Cases

• Lead capture and qualification
• Appointment scheduling
• Customer support
• Product recommendations
• FAQ automation