Skip to content
AurionAI

Add the web widget to your site

5 min readBy Emmanuel Yazbeck

The web widget puts AurionAI support on your own website. Visitors open it from a button in a corner of the page. On the Widget page you turn the widget on, choose the websites that may show it, change its look and copy the embed code.

Availability: all profiles. Voice in the widget needs the AI Voice or the AI Voice + Helpdesk profile. Administrators only.

Prerequisites

  • You have the Owner or Admin role. Other users see Access Denied.
  • You can add a script to the pages of your website, or you can ask your web team to do it.
  • You know the web address of each site that will show the widget, for example https://portal.northwind.example.

Open the widget page

  1. In the sidebar, select Configuration.
  2. Open the Integrations category.
  3. Select Widget.

The page has the cards Status & Security, Appearance and Embed Code. With the Helpdesk or the AI Voice + Helpdesk profile, it also has the Chat Settings card.

The Widget page with the Status & Security card.

Chat, voice or both

Your product profile decides what the widget offers. The Status & Security card shows it:

  • AI Voice: This widget is configured for voice-only mode based on your AI Voice plan.
  • Helpdesk: This widget is configured for chat-only mode based on your Helpdesk plan.
  • AI Voice + Helpdesk: This widget supports both chat and voice based on your plan.

The voice part uses the same AI agent as your phone line. Read Agent name, greeting and behaviour. The chat part uses the customer service persona of your agent and answers from your published Help Center articles. For the Help Center articles, read Write and publish articles and Knowledge base settings.

Turn on the widget and set the allowed sites

  1. In the Status & Security card, turn on Enable web widget.
  2. In Allowed origins, enter each website that may show the widget. Put one site per line, with https://, the host name and, if needed, the port. Do not add a path.
  3. Select Save Web Widget Settings.

How AurionAI checks the allowed sites:

  • The site of the page must match an entry exactly: the same http or https, the same host name and the same port. https://northwind.example and https://www.northwind.example are two different sites.
  • Paths do not count. One entry covers all pages of a site.
  • You can enter up to 50 sites.
  • On any other site, AurionAI refuses to start the widget.
  • Your AurionAI Help Center always shows the widget, on its aurionai.net address and on your own domain once that domain is verified. You do not need to add them, and they do not depend on Enable web widget. Read Use your own domain.

For single sign-on in the widget, read Single sign-on for end users.

Change the look of the widget

In the Appearance card:

  1. Select the Launcher position: Bottom right or Bottom left.
  2. Select an Accent theme. To use your own colors, turn on Use custom colors and set the Primary color and the Accent color.
  3. In Edit language, select a language. Then enter the Widget title, the Launcher label, the Welcome text and the Launcher bubble message for that language. Repeat for each language you need.
  4. Optional: under Company logo, upload a PNG, SVG or JPG file of 200 KB or less.
  5. Optional: set Widget theme, Quick actions and Show Powered by badge.
  6. Select Save Web Widget Settings.

The widget shows the texts of the visitor's browser language. When a language has no text, it uses the English text.

Add the widget to your website

  1. In the Embed Code card, select the Widget language. Auto-detect (page language) follows the language of the page.
  2. Select Copy Snippet.
  3. Paste the code into the pages of your website, or give it to your web team.

The code contains your Public widget key. If you select Regenerate Key, AurionAI creates a new key at once. Regenerating the key invalidates older snippets using the previous key. Copy the new code to your website after you regenerate the key.

Result

On an allowed site, the button of the widget appears in the corner that you chose. Visitors can chat, talk to the AI agent, or both, depending on your profile. The widget reads its settings each time a page with the widget loads, so your saved changes show on the next page load.

If something goes wrong

  • At least one allowed origin is required when the widget is enabled. Enter at least one site, or turn the widget off.
  • The save fails with a message about an allowed origin. Each line must start with http:// or https:// and contain a host name. Remove paths, query strings and user names.
  • The save fails with a message that starts with "Widget GA gate checks failed". AurionAI checks some safety settings when the widget first becomes usable on a site. If the message names recording_consent, turn off call recording or enter a consent text. Read Call recording. For the other names, contact AurionAI support. Read Get help.
  • The widget does not appear on your site. Check that Enable web widget is on, that the site is in Allowed origins with the right https, host name and port, and that the page uses the current code. After Regenerate Key, the old code no longer works. The widget also stops when your account is suspended.
  • Logo must be PNG, SVG, or JPG. Use a PNG, SVG or JPG file.
  • Failed to load web widget configuration. Please refresh and try again. Reload the page.
  • Failed to save voice widget settings Try again. If the error continues, contact AurionAI support.

Still stuck? Submit a request or .