Web Widget

The web widget lets visitors chat with your AI agent directly on your website. It’s fully customizable and works on any website.

Quick Setup

Go to Integrations > Web Widget
Copy the embed code
Paste it before the closing </body> tag on your website
Your widget is live

Embed Code

<script
  src="https://widget.chatoura.com/embed.js"
  data-agent-id="your-agent-id"
  async
></script>

Customization

Appearance

Setting	Description
Primary color	Widget button and header color
Position	Bottom-right or bottom-left
Welcome message	Initial greeting shown to visitors
Placeholder text	Input field placeholder

Behavior

Setting	Description
Auto-open	Open widget automatically after delay
Mobile display	Full-screen or floating on mobile
Sound notifications	Play sound for new messages

Advanced Configuration

Pass additional options via data attributes:

<script
  src="https://widget.chatoura.com/embed.js"
  data-agent-id="your-agent-id"
  data-position="bottom-left"
  data-primary-color="#6366F1"
  async
></script>

Available Options

Attribute	Values	Default
`data-position`	`bottom-right`, `bottom-left`	`bottom-right`
`data-primary-color`	Any hex color	Agent’s theme
`data-auto-open`	`true`, `false`	`false`
`data-delay`	Milliseconds	`0`

JavaScript API

Control the widget programmatically:

// Open the widget
window.Chatoura.open();

// Close the widget
window.Chatoura.close();

// Toggle open/closed
window.Chatoura.toggle();

// Send a message programmatically
window.Chatoura.sendMessage("Hello!");

Platform-Specific Setup

WordPress
Shopify
Webflow
React/Next.js

Go to Appearance > Theme Editor
Open footer.php
Paste embed code before </body>
Save changes

Or use a plugin like Insert Headers and Footers.

Go to Online Store > Themes
Click Actions > Edit code
Open theme.liquid
Paste embed code before </body>
Save

Add to your layout component:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.chatoura.com/embed.js';
  script.setAttribute('data-agent-id', 'your-agent-id');
  script.async = true;
  document.body.appendChild(script);

  return () => document.body.removeChild(script);
}, []);

Troubleshooting

Widget not appearing

Widget loads slowly

Styling conflicts

Widget uses isolated styles (Shadow DOM)
If issues persist, check for global CSS overrides
Contact support with your URL

Getting Started

AI Agents

Knowledge Base

Integrations

Features

Billing

Quick Setup

Embed Code

Customization

Appearance

Behavior

Advanced Configuration

Available Options

JavaScript API

Platform-Specific Setup

Troubleshooting

​Quick Setup

​Embed Code

​Customization

​Appearance

​Behavior

​Advanced Configuration

​Available Options

​JavaScript API

​Platform-Specific Setup

​Troubleshooting

Quick Setup

Embed Code

Customization

Appearance

Behavior

Advanced Configuration

Available Options

JavaScript API

Platform-Specific Setup

Troubleshooting