Embed the chat widget on your website

The chat widget lets website visitors start a text conversation with your AI receptionist without calling. You enable it on your agent, copy a one-line script tag, and paste it into your website's HTML.

Prerequisites

• An active agent in VoiceCraft.

• Access to edit your website's HTML, or your CMS's header/footer code injection setting.

Enable the widget

1. Open your agent from Receptionists in the sidebar.

2. Click Channels in the agent navigation.

3. Click Configure next to Web widget.

4. Toggle Enable chat widget on. A widget key is generated automatically and the embed code appears.

Copy the embed code

1. Under Embed Code, click the copy button.

2. Paste the script tag into your website's HTML, just before the closing body tag. Most website builders (Squarespace, Wix, Webflow, WordPress) have a "Custom code" or "Header/footer injection" setting where you can paste this.

Restrict which domains can load the widget

By default the widget loads on any domain. To lock it to specific domains:

1. In the Allowed Domains field, enter your domain(s) separated by commas. For example: yourdomain.com, www.yourdomain.com

2. Click outside the field to save. You'll see an "Allowed domains updated" confirmation.

Leaving the field empty allows any domain to load the widget. This is fine for testing but restrict it before going live.

Choose where the widget appears

The widget supports two display modes.

Floating bubble (default): Paste the script tag with no other changes and a chat bubble appears in the bottom-right corner of your page. Visitors click it to open a chat panel.

Inline (embedded in a specific spot): To render the chat inside a specific section of your page instead of as a floating bubble, add a container element with the id voicecraft-chat at the location where the widget should appear, then include the script tag as usual. When the script finds that container on the page, it fills it rather than injecting the floating bubble. Set an explicit height on the container so the chat panel has room to render.

Preview the widget

Click Preview widget to open a new tab showing the widget as visitors will see it.

What to expect

Once the script tag is on your site, the widget appears automatically. Visitors can type messages, and the agent responds using the same knowledge base and configuration as your phone agent.

Troubleshooting

The widget does not appear on my site. Confirm the script tag is present in the page source (right-click, View Page Source, search for widget.js). If the tag is there but the widget is invisible, check that your domain matches the Allowed Domains list exactly, including or excluding www as needed.

The widget appears but does not respond. Make sure your agent is active. Agents that have not been activated do not handle widget conversations.