Installation Guide

Get Your Chat Widget Running in 5 Minutes

Step-by-step installation instructions for WordPress, Shopify, Squarespace, and 10+ other platforms. No coding experience required.

10+
Platforms
5min
Setup Time
1 Line
Of Code
1

Get Your Personalized Script Code

Follow these steps:

  1. 1Go to your specific AI Agent
  2. 2Click on "Customize and Preview"
  3. 3Click "Get Embed Code & Testing Instructions"
  4. 4Choose Minimal (recommended) or Customizable embed code
  5. 5Copy the complete script that appears

Your script will look like this:

<script
  src="https://www.chat.builtabot.com/widget.js"
  data-project-id="YOUR_PROJECT_ID_HERE"
  defer
></script>

Minimal Code

Only includes project ID. Settings managed through dashboard. Recommended.

Customizable Code

Includes data attributes for per-page customization. For advanced users.

Use Your Personalized Script

The script from your dashboard includes your actual project ID. Don't use the example above for installation.

2

Platform-Specific Instructions

Script Placement

Always place your script before the closing </body> tag for best performance.

Wix

Wix (Not Supported)

As of January 2025, Wix sandboxes all third-party custom code inside iframes without allow-same-origin, blocking localStorage, sessionStorage, and proper widget positioning. Third-party chat widgets including BuiltABot are no longer compatible with Wix. We recommend WordPress, Shopify, Squarespace, or Webflow instead.

3

Test Your Installation

Quick Test

  1. Visit your website in a new browser tab
  2. Look for the chat widget in the bottom corner
  3. Click to open and send a test message
  4. Check on both desktop and mobile devices

Cache Clearing Tips

Incognito Mode (Easiest)

Cmd+Shift+N (Mac) or Ctrl+Shift+N (Windows)

Hard Refresh

Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

Customization Options

Easy Dashboard Customization

Most settings are managed through your dashboard—no code changes needed:

  1. 1Go to your AI Agent
  2. 2Click "Customize and Preview"
  3. 3Adjust settings using form controls
  4. 4Click "Apply Settings" to save
  5. 5Changes apply automatically
SettingOptionsDescription
Assistant NameAny textName shown in chat header
Initial MessageAny textFirst message users see
Widget PositionBottom Right/LeftWhere widget appears
Widget ThemeLight, Dark, SystemColor theme
Primary ColorAny hex colorBrand accent color
Launcher Icon6 stylesWidget button icon
Widget SizeS/M/L/FullChat window size
Quick RepliesUp to 10 chipsSuggestion buttons
Lead FormEnable/DisableCapture visitor info

Troubleshooting

Widget Not Appearing?

  1. 1Check your Project ID matches your dashboard
  2. 2Clear browser cache and reload
  3. 3Check for JavaScript errors (F12 → Console)
  4. 4Verify script is before closing </body> tag
  5. 5Wait 24-48 hours for changes to propagate

Widget Won't Open?

  1. 1Check for conflicting scripts on your page
  2. 2Try disabling other chat widgets temporarily
  3. 3Test in an incognito/private browser window
4

Integrations (Slack, Zapier, Make, n8n)

Automate Your Workflows

Connect your AI agent to external services for real-time notifications and automation when events occur.

SlackSlack
ZapierZapier
MakeMake
n8nn8n

SlackSlack Notifications Setup

Step 1: Create Slack Webhook

  1. 1Go to api.slack.com/apps and create a new app
  2. 2Enable "Incoming Webhooks" feature
  3. 3Click "Add New Webhook to Workspace"
  4. 4Select the channel to receive notifications
  5. 5Copy the generated webhook URL

Step 2: Connect in Dashboard

  1. 1Go to your AI Agent → Integrations → Slack
  2. 2Paste your Slack webhook URL
  3. 3Click "Test" to send a test message
  4. 4Select which events trigger notifications
  5. 5Add keywords for alert monitoring (optional)
  6. 6Save your configuration

ZapierMaken8n
Webhooks Setup

Step 1: Get Your Webhook URL

Zapier

Zapier

Create a Zap → Choose "Webhooks by Zapier" as trigger → Copy webhook URL

Make

Make (Integromat)

Create scenario → Add "Custom Webhook" module → Copy webhook URL

n8n

n8n

Create workflow → Add "Webhook" node → Copy production/test URL

Step 2: Add Webhook in Dashboard

  1. 1Go to your AI Agent → Integrations → Webhooks
  2. 2Click "Add Webhook"
  3. 3Enter a name (e.g., "Zapier - Send leads to HubSpot")
  4. 4Paste your webhook URL (must be HTTPS)
  5. 5Select which events to subscribe to
  6. 6Save and click "Send Test" to verify

Available Events

new_lead

Lead form submitted

intake_completed

Questionnaire finished

session_activity

Engagement threshold reached

keyword_alert

Keyword mentioned

high_value_lead

Buying signals detected

appointment_booked

Meeting scheduled

Sample Webhook Payload
{
  "id": "del_abc123...",
  "event": "new_lead",
  "timestamp": "2025-01-15T10:30:00.000Z",
  "project": { "id": "proj_xxx", "name": "My Agent" },
  "data": {
    "customer": {
      "name": "John Doe",
      "email": "[email protected]",
      "phone": "+1234567890"
    },
    "source": "form"
  }
}

Webhook Verification

All webhooks include HMAC-SHA256 signatures in headers (X-BuiltABot-Signature) for verification. Your secret is shown in the webhook details page.