Skip to main content
Chat agents provide AI-powered conversations via embeddable widgets on your website. They engage visitors, answer questions, and capture leads 24/7.

​
Creating a Chat Agent

Navigate to Agents → Chat Agents → Create Agent

​
Basic Configuration

FieldDescriptionExample
NameInternal identifier”Website Assistant”
First MessageOpening greeting”Hi! How can I help you today?”
System PromptAgent instructionsRole, capabilities, guidelines

​
Model Configuration

Chat agents use the same AI model options as voice agents. Select your preferred model and adjust settings like response creativity and length in the agent builder.

​
Widget Configuration

Customize the chat widget appearance:

​
Visual Settings

SettingDescriptionDefault
Primary ColorButton and header colorBrand color
PositionWidget locationbottom-right
Welcome MessagePre-chat greeting”Chat with us!”
PlaceholderInput field text”Type a message…”

​
Widget Positions

  • bottom-right - Most common, standard position
  • bottom-left - Alternative for left-aligned designs

​
Branding

Customize the widget’s color, position, welcome message, agent name, and avatar in the Branding settings.

​
Embedding the Widget

​
JavaScript Embed

Add this code before the closing </body> tag: 
<script 
  src="https://cdn.emanate.ai/widget.js" 
  data-agent-id="YOUR_AGENT_ID"
  data-primary-color="#f95426"
  data-position="bottom-right">
</script>

​
React Integration

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

​
Next.js Integration

For Next.js apps, add the widget script to your root layout. See the Widget tab for details.

​
Suggested Prompts

Add quick-start buttons by entering common questions in the Suggested Prompts section. These appear as clickable options when visitors open the chat.

​
Lead Capture

Configure lead capture for chat agents:
  1. Go to Overview tab
  2. Enable Lead Capture
  3. Set capture timing:
    • Immediate: Ask for info at start
    • Contextual: Collect naturally during conversation
    • End of Chat: Request before closing

​
Pre-Chat Form

Enable the pre-chat form and choose which fields (name, email, company) to collect before the chat begins.

​
Chat Sessions

​
Session Lifecycle

  1. Visitor opens widget → New session created
  2. Conversation happens → Messages stored
  3. Lead captured → Contact info extracted
  4. Session ends → Full transcript saved

​
Session Persistence

Sessions persist across page navigations:
  • Conversations persist across page navigations so visitors can pick up where they left off
  • Conversation history maintained
  • Visitor can return and continue

​
Session Timeout

Configure session expiration:
SettingDescriptionDefault
Idle TimeoutMinutes before session expires30
Max DurationMaximum session length24 hours

​
Human Handoff

Enable transfer to human agents:

​
Handoff Triggers

  • Explicit request: “Can I speak to a human?”
  • Sentiment detection: Frustrated visitor
  • Topic-based: Complex questions

​
Handoff Options

Configure where handoff requests go — email, live chat platforms, or support ticket systems.

​
Chat Agent Prompts

​
System Prompt Example

## Role
You are the website assistant for ABC Materials, helping visitors 
find information about our industrial products.

## Capabilities
- Answer questions about products and specifications
- Provide pricing guidance (refer to sales for quotes)
- Help visitors navigate the website
- Collect contact information for follow-up

## Guidelines
- Be concise - chat messages should be 1-3 sentences
- Use bullet points for lists
- Include links to relevant pages when helpful
- Ask clarifying questions before giving detailed answers

## Lead Capture
When appropriate, collect:
- Name
- Email
- Company
- Project details

​
Chat-Specific Considerations

Unlike voice, chat has:
  • Visual formatting: Use markdown, bullets, links
  • Asynchronous: Visitors may take time to respond
  • Multi-tab: Visitor may be browsing while chatting

​
Testing Chat Agents

Use the built-in test panel:
  1. Click Test in agent editor
  2. Chat test panel opens
  3. Verify:
    • First message displays
    • Responses are formatted correctly
    • Links work
    • Lead capture triggers

​
Test Checklist

  • Widget loads correctly
  • First message appears
  • Agent responds appropriately
  • Suggested prompts work
  • Lead capture collects data
  • Handoff triggers correctly

​
Analytics

Track chat agent performance:
MetricDescription
SessionsTotal chat sessions
MessagesAverage messages per session
DurationAverage session length
Leads CapturedSuccessful lead captures
Handoff RateSessions transferred to humans

​
Troubleshooting

  • Verify embed code is before </body>
  • Check agent ID is correct
  • Look for JavaScript errors in console
  • Try selecting a faster model to improve response times
  • Reduce max tokens
  • Simplify system prompt
  • Use markdown in agent responses
  • Keep messages concise
  • Test on mobile devices

​
Next Steps

Embed Tutorial

Step-by-step embedding guide

Knowledge Base

Add context documents

Lead Capture

Configure lead collection

Chat Logs

View conversation history