> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vambe.me/llms.txt
> Use this file to discover all available pages before exploring further.
# Webchat Integration Guide
> Learn how to integrate Vambe Webchat into your website. Add AI-powered customer support directly to your web pages in minutes.
## Overview
The Vambe Webchat is a powerful tool that allows customers to interact with your AI assistant directly from your website, enabling real-time communication and instant support.
## Quick Start
### Prerequisites
* Active Vambe account
* Access to your website's HTML code
* Your Vambe API credentials
### Installation Steps
Log in to your Vambe account at [app.vambeai.com](https://app.vambeai.com)
Go to **Settings** → **Channels & Accounts**
You can access this directly at: [app.vambeai.com/settings?q=channels](https://app.vambeai.com/settings?q=channels)
1. Click **"Add Channel"** 2. Select **"Webchat"** from the available options
2. Give your webchat channel a descriptive name (internal use only, not
visible to customers)
1. Click on the newly created Webchat channel
2. Click the three dots menu (⋮)
3. Select the code icon (`<>`)
4. Copy the provided script code
Paste the copied code into the `` section of your website's HTML, preferably just before the closing `` tag.
```html theme={null}
Your Website
```
Refresh your website and you should see the Vambe chat widget appear in the corner of your page.
**Success!** Your webchat is now live on your website. Customers can start
chatting with your AI assistant immediately.
## Configuration Options
After the basic installation, you can customize your webchat with various options:
### Basic Configuration
```javascript theme={null}
window.embeddedWebchatConfig = {
// Required fields
clientId: 'YOUR_CLIENT_ID',
channelId: 'YOUR_CHANNEL_ID',
// Agent customization
agentName: 'Sofia',
agentIconUrl: 'https://your-domain.com/agent-avatar.png',
// Appearance
primaryColor: '#2994FF',
darkTheme: false,
// Initial data collection
askForName: true,
askForEmail: true,
askForPhoneNumber: false,
// Positioning
xPosition: 20,
yPosition: 20,
// Language
language: 'es', // "es" or "en"
// Custom text
chatWithUsText: 'Chat with us',
// Suggested questions
suggestedQuestions: [
'What services do you offer?',
'How can I get started?',
'What are your pricing plans?',
],
};
```
### Configuration Reference
Your Vambe client ID (found in the integration code)
Your webchat channel ID (found in the integration code)
The name of the agent displayed in the chat. Example: `"Sofia"`, `"Customer
Support"`
URL to the agent's avatar image. Must be a valid image URL (JPG, PNG, SVG, etc.)
Example: `"https://your-domain.com/avatar.png"`
The user ID from your system. Use this if you're embedding the webchat on a page where users are already logged in.
This allows you to:
* Track conversations by your user IDs
* Link chat history across sessions
* Use with [POST /api/public/webchat/contact/add-metadata](/reference/webchat/add-webchat-contact-metadata) endpoint
The user's name from your system. Use when embedding on authenticated pages.
Request user's phone number before starting the chat.
Request user's email before starting the chat.
Request user's name before starting the chat. If not provided, contact will be
named "Webchat Contact" in Vambe.
Enable dark theme for the webchat widget.
Primary color for the chat widget. Must be a valid hex color code.
Examples: `"#2994FF"`, `"#FF5733"`, `"#00AA00"`
Chat interface language. Options: `"es"` (Spanish) or `"en"` (English)
Up to 4 suggested questions displayed to start the conversation.
Example:
```javascript theme={null}
suggestedQuestions: [
'What services do you offer?',
'How can I get started?',
'What are your pricing plans?',
'How do I contact support?',
];
```
Text displayed next to the chat button. Example: `"Chat with us"`, `"Need help?"`
Horizontal position of the chat button in pixels from the right edge.
Vertical position of the chat button in pixels from the bottom edge.
## Advanced Examples
### Example 1: E-commerce Website
```html theme={null}
```
### Example 2: Logged-in User Area
```html theme={null}
```
### Example 3: Multilingual Support
```javascript theme={null}
// Detect user's browser language
const userLang = navigator.language.startsWith('es') ? 'es' : 'en';
window.embeddedWebchatConfig = {
clientId: 'YOUR_CLIENT_ID',
channelId: 'YOUR_CHANNEL_ID',
language: userLang,
// Language-specific suggestions
suggestedQuestions:
userLang === 'es'
? [
'¿Qué servicios ofrecen?',
'¿Cómo puedo empezar?',
'¿Cuáles son sus precios?',
]
: [
'What services do you offer?',
'How can I get started?',
'What are your prices?',
],
chatWithUsText: userLang === 'es' ? 'Habla con nosotros' : 'Chat with us',
};
```
### Example 4: Dark Theme for Dark Websites
```html theme={null}
```
## Customization Tips
### Choosing Colors
* **Primary Color**: Used for buttons, headers, and accents
* **Brand Alignment**: Use your brand's primary color
* **Contrast**: Ensure good contrast with white/dark backgrounds
* **Test**: Test with both light and dark themes
```javascript theme={null}
// Brand color examples
primaryColor: '#2994FF'; // Vambe blue
primaryColor: '#FF6B6B'; // E-commerce red
primaryColor: '#4CAF50'; // Success green
primaryColor: '#9C27B0'; // Tech purple
```
### Positioning the Widget
```javascript theme={null}
// Bottom right (default)
xPosition: 20,
yPosition: 20
// Bottom left
xPosition: 20,
yPosition: 20,
// + CSS: right -> left position
// Custom positioning
xPosition: 100, // Further from edge
yPosition: 80 // Higher up
```
### Creating Effective Suggested Questions
**✅ Good Examples**:
```javascript theme={null}
suggestedQuestions: [
'What are your business hours?', // Practical
'How much does it cost?', // Clear
'Can you help me track my order?', // Specific
'Do you offer custom solutions?', // Open-ended
];
```
**❌ Avoid**:
```javascript theme={null}
suggestedQuestions: [
'Hello', // Too vague
'I have a question', // Not specific
'Click here', // Not a question
'Tell me everything', // Too broad
];
```
## Integration with User Data
### Pass User Information
If users are logged in on your website, pass their information:
```javascript theme={null}
// Example with template engine (EJS, Handlebars, etc.)
window.embeddedWebchatConfig = {
clientId: "YOUR_CLIENT_ID",
channelId: "YOUR_CHANNEL_ID",
// User info from your session
externalUserId: "<%= user.id %>",
externalUserName: "<%= user.full_name %>",
// Skip collection if already have data
askForName: false,
askForEmail: <%= user.email ? 'false' : 'true' %>
};
```
### Add Metadata After Chat Start
Use the webchat metadata endpoint to enrich contact data:
```javascript theme={null}
// After user interacts with chat
async function enrichChatContact(externalUserId, userData) {
await fetch('https://api.vambe.me/api/public/webchat/contact/add-metadata', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'your_api_key_here',
},
body: JSON.stringify({
externalUserId: externalUserId,
metadata: {
subscription_tier: userData.tier,
account_status: userData.status,
lifetime_value: userData.ltv.toString(),
last_purchase: userData.lastPurchaseDate,
},
}),
});
}
```
## Common Integrations
### WordPress
Add to your theme's `footer.php` before ``:
```php theme={null}