Phone, SMS & website

Add the website widget

Design the AIVA chat and voice widget, choose which websites can load it, and paste one script tag into your site.

The AIVA widget puts your assistant on your website. Visitors can chat by text or, if you allow it, talk to the assistant by voice in the browser. You install it by pasting one script tag into your site. There's no plugin or app to install. You need an assistant and access to edit your website's code or theme. Conversations from the widget appear under Web Widget → Web Conversations.

1. Open the Widget Builder

In the sidebar, open Web Widget → Widget Builder. It has three tabs: Design, Install and History. A live preview sits beside the form. You can switch it between Pre-chat, Chat and Voice screens and between Desktop and Phone.

2. Design the widget

On the Design tab, start with Assistant that answers and pick the assistant this widget uses. Then work through the sections:

  • Branding: Header Title, Subtitle, Avatar Image URL (leave empty for the default bot icon) and Welcome Message, the assistant's first message when a chat opens.
  • Colors: pick one of the Quick Presets, or set Header Color and Bubble Button Color yourself.
  • Layout: Widget Width, Widget Height, Header Height and Position (Bottom left or Bottom right).
  • Appearance: Input Placeholder, Font, Theme (Light or Dark) and Auto-open Delay. Set the delay in seconds to open the widget on its own after the page loads, or leave it at 0 to keep it closed until clicked. You can also turn the "Powered by" line on or off here.

Pre-chat form

Turn on Ask visitors for details before they can chat to collect details first. Turn it off to let visitors start chatting straight away. When it's on:

  • Set Name, Phone and Email each to Required, Optional or Not asked.
  • Add a Consent message (up to 200 characters) and a Privacy policy link.

Voice and sound

  • Let visitors talk to the assistant by voice adds voice mode to the widget. Voice uses your OpenAI key and needs Realtime access on it.
  • Play a sound when the assistant replies plays a short sound on each reply.
  • Widget language sets the language of the widget's own buttons and labels: English, Spanish, Hindi, Gujarati, Polish or German. The assistant still replies in the visitor's language.

This section also reminds you that callers are always told the call may be recorded and that they're speaking with an AI assistant. That notice can't be turned off.

3. Allow your websites

The widget only loads on websites you list under Allowed websites. Until you add one, the builder warns: No websites are allowed yet.

  1. Type your domain, such as example.com, in the box.
  2. Click Add.
  3. To include every subdomain, add *.example.com.

When you're done designing, click Save changes. Discard undoes unsaved edits. Reset returns every setting to its default. Saved changes reach your live site the next time a page loads, so you don't need to paste the script again.

4. Copy the script

Open the Install tab and click Copy. The script looks like this, with your own IDs filled in:

<script
  src="https://chat-widget.aivachat.io/embed.js"
  data-user-id="YOUR_USER_ID"
  data-assistant-id="YOUR_ASSISTANT_ID">
</script>

Each assistant has its own script. If you change Assistant that answers, copy the script again.

5. Paste it into your website

Add the script just before the closing </body> tag, on every page where the widget should appear. Putting it in a shared footer or theme file covers the whole site. Where to do that depends on your site builder:

  • WordPress: your theme's footer, or a plugin that adds code to the footer.
  • Shopify: your theme's code, in the main layout file.
  • Webflow, Wix, Squarespace, Framer: the site-wide custom code setting for the footer or end of body.
  • Hand-coded or framework sites (for example Next.js): your shared layout or page template.

Check your builder's own help pages for the exact setting. Some builders only allow custom code on paid plans.

6. Check it works

On the Install tab, use Check a website. Enter a page address, like https://www.example.com/pricing, and click Check. It tells you whether that site is on your allowed list. If it isn't, click Add it. Then open your site and look for the chat bubble.

The widget runs in its own sealed-off container on the page, so your site's styles won't change how it looks, and it won't change your site.

Troubleshooting

The widget doesn't show up. Check the domain is under Allowed websites, including www. if your site uses it, or use *.example.com. Make sure the script is on the page and you've clicked Save changes.

Chat doesn't answer. Check that your OpenAI key is connected and your trial or plan is active. A banner at the top of the dashboard tells you if either is a problem.

Next steps

Something here doesn’t match what you see in the dashboard? Email support@aivachat.io and we’ll fix the guide.