Initialization
Initialize the script with your agent ID:
boostgpt.init({
botId: 'your-agent-uuid' // Required
});
Init Options
| Option | Type | Default | Description |
|---|
botId | string | — | Required. Your agent’s UUID |
Triggering Events
boostgpt.trigger(eventName, context, options);
Parameters
| Parameter | Type | Required | Description |
|---|
eventName | string | Yes | The event identifier |
context | object | No | Data to pass to your agent |
options | object | No | Trigger appearance and behavior |
Basic Example
boostgpt.trigger('checkout_help', {
cart_value: '$149',
items: 3
});
With Options
boostgpt.trigger('checkout_help', {
cart_value: '$149'
}, {
type: 'toast',
position: 'bottom-right',
message: 'Need help checking out?'
});
Common Options
These options work with all trigger types:
| Option | Type | Default | Description |
|---|
type | string | "button" | Trigger style: "button", "toast", "banner", "inline" |
botId | string | null | Override the agent for this trigger (uses init botId if not set) |
position | string | "bottom-right" | Screen position (see below) |
delay | number | 0 | Delay before showing (milliseconds) |
openInNewTab | boolean | false | Open chat in new tab |
loadingText | string | "Thinking..." | Text shown while loading |
zIndex | number | 999999 | CSS z-index |
dismissible | boolean | true | Show dismiss button |
autoShow | boolean | true | Auto-show on trigger() |
offsetX | string | "20px" | Horizontal offset from edge |
offsetY | string | "20px" | Vertical offset from edge |
Position Values
| Type | Available Positions |
|---|
| Button/Toast/Inline | "bottom-right", "bottom-left", "top-right", "top-left" |
| Banner | "top", "bottom" |
For type: 'button':
| Option | Type | Default | Description |
|---|
buttonText | string | "Need help?" | Button label |
buttonColor | string | "#7788BB" | Background color |
textColor | string | "#FFFFFF" | Text color |
showIcon | boolean | true | Show chat icon |
borderRadius | string | "50px" | Border radius |
fontSize | string | "14px" | Font size |
fontWeight | string | "600" | Font weight |
padding | string | "12px 20px" | Button padding |
boxShadow | string | "0 4px 12px rgba(0,0,0,0.15)" | Box shadow |
boostgpt.trigger('help', {}, {
type: 'button',
buttonText: 'Get Help',
buttonColor: '#EF4444',
textColor: '#FFFFFF',
borderRadius: '8px'
});
Toast Options
For type: 'toast':
| Option | Type | Default | Description |
|---|
message | string | "Need help? Click to chat..." | Single chat bubble text |
messages | array | null | Multiple chat bubbles (stacked) |
avatar | string | null | Avatar image URL (uses agent avatar if null) |
title | string | null | Agent name (uses agent name if null) |
toastBackground | string | "#ffffff" | Toast background color |
toastTextColor | string | "#374151" | Toast text color |
buttonColor | string | "#7788BB" | Action button color |
// Single message
boostgpt.trigger('onboarding_help', {}, {
type: 'toast',
message: 'Stuck on this step? I can help!',
title: 'Support Bot'
});
// Stacked messages
boostgpt.trigger('welcome', {}, {
type: 'toast',
messages: [
'Hey there! 👋',
'Need any help getting started?',
'Click here to chat!'
]
});
Banner Options
For type: 'banner':
| Option | Type | Default | Description |
|---|
bannerText | string | "Need help? Click here..." | Banner message |
bannerColor | string | "#7788BB" | Background color |
bannerTextColor | string | "#FFFFFF" | Text color |
bannerPadding | string | "14px 20px" | Padding |
buttonText | string | "Chat Now" | CTA button text |
boostgpt.trigger('promo', {}, {
type: 'banner',
position: 'top',
bannerText: 'Questions about our sale? Chat with us!',
bannerColor: '#10B981',
buttonText: 'Ask Now'
});
Inline Options
For type: 'inline':
| Option | Type | Default | Description |
|---|
container | string/element | null | CSS selector or DOM element |
buttonText | string | "Need help?" | Button label |
buttonColor | string | "#7788BB" | Background color |
textColor | string | "#FFFFFF" | Text color |
showIcon | boolean | true | Show chat icon |
borderRadius | string | "8px" | Border radius |
fontSize | string | "14px" | Font size |
padding | string | "12px 20px" | Padding |
<div id="help-trigger"></div>
<script>
boostgpt.trigger('inline_help', {}, {
type: 'inline',
container: '#help-trigger',
buttonText: 'Chat with Support',
buttonColor: '#4F46E5'
});
</script>
Screenshot Options
Capture a screenshot of the page when the trigger is clicked. The screenshot is sent to your agent as an attachment, providing visual context.
Screenshot capture requires the html2canvas library. Load it before trigger.js:<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://embed.boostgpt.co/trigger.js"></script>
| Option | Type | Default | Description |
|---|
captureScreenshot | boolean | false | Enable screenshot capture |
screenshotQuality | number | 0.8 | JPEG quality (0.0 - 1.0) |
screenshotMaxWidth | number | 1280 | Maximum screenshot width |
screenshotMaxHeight | number | 800 | Maximum screenshot height |
boostgpt.trigger('checkout_error', {
error_code: '500',
step: 'payment'
}, {
type: 'toast',
message: 'Having trouble? I can see your screen to help!',
captureScreenshot: true,
screenshotQuality: 0.7
});
Your agent receives:
- The user’s message with context
- The page URL (
source_url)
- A screenshot attachment showing exactly what the user sees
User Data
Pass user information for personalized experiences:
boostgpt.trigger('support', {
issue: 'billing'
}, {
user: {
id: 'user_123',
email: 'sarah@example.com',
name: 'Sarah Chen',
plan: 'pro',
// Add any custom fields
company: 'Acme Inc'
}
});
User data is:
- Passed to your agent in the message context
- Logged for analytics
- Available in prompt templates as
{{user.field}}
Multiple Bots
Override the botId per trigger to route different events to different agents:
// Initialize with your primary bot
boostgpt.init({ botId: 'support-bot-uuid' });
// Use default bot (from init)
boostgpt.trigger('general_help', {});
// Override for sales bot
boostgpt.trigger('pricing_question', {
product: 'Enterprise'
}, {
botId: 'sales-bot-uuid', // Different bot!
type: 'toast',
message: 'Questions about pricing?'
});
// Override for billing bot
boostgpt.trigger('billing_issue', {}, {
botId: 'billing-bot-uuid'
});
Use botId overrides when you have specialized agents for different purposes (sales, billing, technical support) on the same page.
Dismissing Triggers
Remove active triggers programmatically:
// Dismiss all triggers
boostgpt.dismissAll();
// Dismiss specific event
boostgpt.dismiss('checkout_help');
Next Steps