Skip to main content
This tutorial shows you how to add an AI chat widget to your website, enabling 24/7 customer engagement. Time: 15-20 minutes
Prerequisites: Emanate account, website access

​
What We’ll Build

A chat widget that:
  • Appears on your website
  • Matches your brand colors
  • Answers visitor questions
  • Captures leads automatically

​
Step 1: Create Chat Agent

  1. Navigate to Agents → Chat Agents
  2. Click Create Agent
  3. Enter basic information:
FieldValue
NameWebsite Assistant
First Message”Hi! 👋 I’m here to help you find the right materials for your project. What can I help you with?”

​
Step 2: Configure System Prompt

## Role
You are a helpful website assistant for ABC Materials. Your job is to:
- Answer questions about our products and services
- Help visitors find information on the website
- Qualify leads and collect contact information
- Provide a great first impression

## Response Style
- Keep messages short (1-3 sentences)
- Use bullet points for lists
- Include relevant links when helpful
- Be friendly but professional

## Lead Qualification
When visitors show buying intent, collect:
- Name
- Email
- Company
- Project details

## Common Questions
- Pricing: "Pricing varies by product and quantity. I can help you get a quote!"
- Shipping: "We ship nationwide. Delivery times depend on your location."
- Custom orders: "Yes, we handle custom orders. Tell me more about your needs."

## Handoff
If asked for human assistance:
"I'd be happy to connect you with our team. Let me get your email so they can reach out."

​
Step 3: Configure Widget Appearance

  1. Go to Widget tab
  2. Configure your widget’s appearance — brand color, position, welcome message, and agent display name — in the Widget tab.
  3. Add suggested prompts to help visitors start a conversation (e.g., “What products do you offer?”, “How do I get a quote?”, “What are shipping times?”).

​
Step 4: Add Knowledge Base

  1. Go to Knowledge Base tab
  2. Upload your documents:
    • Product information
    • FAQ
    • Company info

​
Step 5: Enable Lead Capture

  1. Go to Overview tab
  2. Enable Lead Capture
  3. Set capture timing: Contextual (during natural conversation)

​
Step 6: Test the Widget

  1. Click Test to open test panel
  2. Test conversations:
You: "What products do you sell?"
Bot: Should respond with product info from knowledge base

You: "I need a quote for steel beams"
Bot: Should start collecting lead information

​
Step 7: Get Embed Code

  1. Go to Widget tab
  2. Copy the embed code:
<script 
  src="https://cdn.emanate.ai/widget.js" 
  data-agent-id="YOUR_AGENT_ID"
  data-primary-color="#f95426"
  data-position="bottom-right">
</script>

​
Step 8: Add to Your Website

​
Standard HTML

Add before </body>: 
<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <!-- Your content -->
  
  <!-- Emanate Chat Widget -->
  <script 
    src="https://cdn.emanate.ai/widget.js" 
    data-agent-id="YOUR_AGENT_ID">
  </script>
</body>
</html>

​
WordPress

  1. Go to Appearance → Theme Editor
  2. Edit footer.php
  3. Add script before </body>
Or use a plugin like “Insert Headers and Footers”.

​
Shopify

  1. Go to Online Store → Themes → Edit Code
  2. Find theme.liquid
  3. Add script before </body>

​
React

For React apps, install the Emanate React package and use the provided component. See the Widget tab for integration details.

​
Next.js

For Next.js apps, add the widget to your root layout. See the Widget tab for framework-specific instructions.

​
Step 9: Verify Installation

  1. Visit your website
  2. Look for the chat bubble (bottom-right by default)
  3. Click to open the widget
  4. Test a conversation

​
Customization Options

​
Widget Settings

SettingDescription
AgentWhich chat agent powers the widget
Brand ColorPrimary color to match your brand
PositionWhere the widget appears (bottom-right or bottom-left)
Welcome MessageGreeting shown when visitors open the chat
Hide LauncherOption to control the widget programmatically
You can also control the widget programmatically — see the Developer Guide for details.

​
What’s Next?

Chat Logs

View chat conversations

Lead Capture

Configure lead collection

Custom Actions

Add integrations

Analytics

Track performance

​
Troubleshooting

  • Verify the widget is loading correctly on your page
  • Verify agent ID is correct
  • Look for JavaScript errors in console
  • Test agent in Emanate dashboard first
  • Check model configuration
  • Verify knowledge base is ready
  • Check data attributes are set correctly
  • Clear browser cache
  • Check that your website’s styling isn’t conflicting with the widget