Add a Website Widget

Build a chat widget in the Playground, preview it live, and deploy it to your website.

The widget is a chat bubble that sits in the corner of your website. Visitors click it, talk to your AI assistant, and you can jump in to reply yourself any time.

The widget builder lives at Dashboard → Playground ("Customise and deploy your website widget"). The Create button on Channels → Website Widget takes you to the same place. To manage widgets you've already built, use Widgets in the sidebar — it opens the same Create Widget / My Widgets view.

Before you start

You need:

An assistant already set up (the widget needs a brain).
Access to your website's code — somewhere you can paste a snippet or add a component.

Go to Dashboard → Playground. The Create Widget tab is open by default, showing the Widget configuration form.
On the Basic tab, fill in:
- Assistant — the AI assistant that powers this widget.
- Widget name — e.g. "Heavenly Hotels — concierge".
- Avatar — JPG or PNG, max 5MB, shown in the widget header.
- Website URL — where this widget will be deployed (e.g. https://yourcompany.com).
- Brand color — match your site (default is Intelli blue #007fff).
- Greeting message — the first thing visitors see (e.g. "Hello! I'm here to help.").
Optionally open the Styling tab (position, size, header and message colors, font, help text, button text, window dimensions, animation) and the Advanced tab (sound notifications, the "Powered by Intelli" credit, and optional help/knowledge-base and tickets tabs inside the widget).
Watch the Live preview card on the right update as you go — switch between Preview, Demo, and Live test modes.
Click Create widget.

Deploy it to your site

After creating, open the My Widgets tab (or Dashboard → Widgets) and click the widget's Deploy widget action. The Deploy website widget dialog gives you three options:

HTML — copy the snippet and paste it into the <head> of your HTML. The script loads asynchronously and won't affect page load performance.
WordPress — install the Intelli plugin (Plugins → Add New, search "Intelli"), open its settings, and paste your Widget Key from the dialog.
React — add the IntelliWidget component from @intelli-inc/chat-widget to your root layout or App component. The dialog shows ready-made snippets for Next.js (App and Pages router), Vite, and Create React App.

Refresh your site — the chat bubble should appear.

Test it

Open your site in an incognito window.
Click the bubble. The greeting should appear.
Send a test question. The AI should reply within a few seconds.
Go to Dashboard → Conversations → Website — the conversation should be there in real time.

Managing widgets later

From My Widgets (or Dashboard → Widgets), each widget has three actions:

Deploy widget — reopen the deployment dialog to grab the snippet or Widget Key again.
Edit widget — change the name, greeting, colors, assistant, and other settings. Changes take effect without re-installing the snippet.
Delete widget — remove the widget. You can also select several and delete them in bulk.

Tips

Match the greeting to the page. If you run campaigns to a landing page, use a greeting that mentions the offer.
Keep the assistant prompt tight. Website visitors expect quick, on-topic answers. See Set Up Your Assistant.
Pick a colour with contrast. Light blue on a light background is invisible.

What's next

Reply to widget conversations → Manage Conversations
Connect WhatsApp too → Connect to WhatsApp