Skip to main content

Web chat widget

The web chat widget puts an always-on AI conversation on any page of your website. Visitors get instant answers from your assistant; your team gets a smaller inbox and a steady stream of qualified leads. You build once in Insighto and embed with two lines of HTML.

What you can do with it​

  • Support deflection (SaaS / B2B) — A project-management tool embeds the widget on its help center. The assistant answers "how do I invite a teammate" or "why is my export stuck" instantly. Tier-1 ticket volume drops, and the support team handles only the genuinely tricky cases.
  • Lead capture (real estate) — A brokerage drops the widget on every listing page. When a visitor asks "is this still available?", the assistant confirms, captures name + phone, and books a tour. The agent walks in Monday morning to a queue of confirmed showings.
  • Knowledge base Q&A (e-commerce) — A skincare brand wires its product catalog and ingredient database into the assistant. Shoppers ask "is this safe for pregnancy?" or "is it fragrance-free?" and get a direct, sourced answer instead of bouncing.

How it works​

Create the widget​

  1. Open Build → Widgets → Add widget.
  2. Pick Web chat.
  3. Give it a name, link the assistant you want behind it, and save.

Embed it on your site​

Paste these two snippets just before the closing </body> tag of your site.

<script src="https://cdn.insighto.ai/chat-widget-v2/script.js"></script>
<script>
  new ChatWidget({
    widgetId: "your-widget-id",
    deployType: "floating"
  }).init();
</script>

You'll find your widget ID in the embed-code panel inside the widget you just created. deployType accepts:

  • "floating" — round bubble bottom-right that expands into a panel
  • "inline" — embedded directly inside a <div> on your page

For inline mode, point the widget at a container:

<div id="insighto-chat" style="height: 600px;"></div>
<script>
  new ChatWidget({
    widgetId: "your-widget-id",
    deployType: "inline",
    container: "#insighto-chat"
  }).init();
</script>

Customize the look​

In the widget's Appearance tab:

  • Bubble color — primary brand color (hex)
  • Position — bottom-right or bottom-left
  • Greeting message — first line the assistant shows on open
  • Placeholder text — what appears inside the input box
  • Avatar — upload a square PNG/JPG
  • Header title and subtitle — what visitors see above the conversation

Changes go live within a few seconds of saving — no redeploy of your site needed.

Where to next​