Website Widget

Overview

The widget is configured per agent in the agent editor, under 🌐 Website Widget in the Settings panel. You choose the channels, list the websites allowed to show it, then copy a short code snippet into your site. The button opens a panel with your agent's name and a Powered by VINSI.AI footer.

New to the agent editor? Start with Create your first AI Phone Agent.

Before You Start

• Save the agent. Until it's saved, the section shows "Save your agent first to generate the widget embed code."
• Give it a Welcome Message and Instructions, and test it with Talk.
• Widget voice calls and Call me callbacks use your organization's minutes like any other call.
• For Call me, assign a phone number to the agent under ☎️ Telephony (see Outbound Calls).

Choose Channels

Under Channels, turn on any combination. New agents start with Voice only.

With more than one channel on, the panel shows Voice, Text, and Call me buttons so visitors can switch. It opens on Voice first, then Text, then Call me.

Chat Instructions

Appears when Text chat is on. These instructions are used only in text chat, so you can drop voice-only guidance (like spelling things out loud) and ask for short, well-formatted replies. Leave it empty to reuse the agent's main instructions. Click the expand button for the full-screen Edit Chat Instructions editor.

Starter Messages

Appears only when Text chat is the only channel. Starter messages are tappable suggestions shown under the greeting, e.g. Book a service, Get a quote, Ask a question.

• One per line, up to 4; each is cut to 40 characters.
• Leave empty and suggestions are generated from the agent's instructions.
• In chat-only mode the panel opens with the agent's Welcome Message as the first chat bubble.

Allowed Domains

List every website where the widget may appear — one per line or separated by commas. The helper text shows how many entries you have.

• Enter the host only. https:// and any path are ignored.
• Plain domain entries require your site to use HTTPS.
• Click Save on the agent after changing domains. Changes apply on the next page load of your website.

Get the Embed Code

1. Click Get Widget Embed Code to open Embed Widget on Your Website.
2. Under Customize Your Widget, set the options below. The Preview shows the button.
3. Click Copy Code ("Embed code copied to clipboard!").

The copied code looks like this (your agent ID is filled in):

<!-- VINSI AI Agent Widget -->
<vinsi-agent
  agent-id="YOUR_AGENT_ID"
  button-text="Let's Talk"
  button-color="#000000"
  button-shape="pill"
  has-shadow="true"
  button-icon="chat"
  base-url="https://dashboard.vinsi.ai">
</vinsi-agent>
<script src="https://dashboard.vinsi.ai/widget/vinsi-widget.js" async type="text/javascript"></script>

Channels, instructions, starter messages, and allowed domains are read live from the agent, so you don't need to re-copy the code after changing them. Re-copy only if you change the button's look.

Install on Your Website

1. Add your site's domain to Allowed domains and save the agent.
2. Paste the code before the closing </body> tag of your website — in your site template or footer so it appears on every page.
3. Publish your site, open it in a new tab, and click the button to test each channel.

What Visitors See

• A floating button in the bottom-right corner of every page.
• Voice — "Click to talk", then "Connecting..." and "Call in progress". The red button hangs up.
• Text — "Type your message..." and Send. After 3 minutes without a message the chat ends ("Conversation ended").
• Call me — "Leave your number and we'll call you right away."
• Closing the panel with × ends the voice call or chat.

How Call Me Works

1. The visitor enters a US/Canada phone number and clicks Call me.
2. VINSI immediately places an outbound call using the agent's Outbound Agent tab — its welcome message, instructions, voice, and voicemail message — from the agent's default outbound number (Set as default under ☎️ Telephony).
3. The visitor sees "Great! We're calling you now at …" and their phone rings.

Conversations and Follow-up

Widget conversations appear in Call Logs. Text chats are saved when they end, with a summary, a disposition chosen from the agent's Dispositions, and any Call Data fields found in the chat. They also trigger the agent's After Call Webhook, so After Call Actions (emails and tickets) work for chats too.

Troubleshooting