Help Center
Home AI AI Frontdesk

AI Frontdesk: Setting up and integrating the website widget

Valid for AI Receptionist (plans from August 31, 2026) and AI Chat Assistant. (Momentum AI)

With the website widget, your visitors can access the assistant directly on your website: by clicking a button, they can start a conversation without leaving the page – as a text chat, a browser-based call, or both. Your visitors do not need a phone number to make a call. Furthermore, while in an ongoing chat, your assistant can connect visitors directly to one of your contacts. You decide for yourself what the button looks like and on which domains it may be loaded. The website widget is available in the products AI Receptionist and AI Chat Assistant. The following steps show you how to customize it, authorize it for your domain, and embed it into your website.

Note

If you use only the AI Receptionist, the website widget is available in the AI Receptionist Flex Pro and AI Receptionist Unlimited plans. With the AI Chat Assistant, you can use it regardless of your plan – your visitors can access this assistant via the widget.

Requirements
  • You have access to your website’s HTML source code or your CMS’s template editor.
  • Your website is linked to your own registered domain. The widget cannot be used with a temporary IONOS system domain (e.g. *.live-website.com).

Access the assistant's settings

  • Log in to your IONOS account.
  • Click on Menu > AI Frontdesk in the title bar.
  • In the contract overview, click on Manage in the tile for the contract you want.
  • Open the Website Widget section. This is where you can configure all the following settings.

Note

These settings form part of your assistant’s overall configuration. If you use multiple channels, the display, permitted domains, and embedding code apply to all channels; the widget is identical for chat and phone. You define which functions the button offers in the Channels section; whether your assistant offers a call from within the chat is set in the Call forwarding from chat section. Only the settings in the Language, Voice & Behavior section are channel-specific (see Customizing behavior and language).

Set channels

The Channels section appears when you order both products – the AI Receptionist and the AI Chat Assistant. If you only use one of them, this section will not appear; the widget will then offer the channel provided by that product.

In the Channels section, specify whether the widget should offer a voice call, a text chat or both. The options are:

  • Call only – the button initiates a voice call only; no chat is included.

  • Chat only – the button initiates a text chat only.

  • Chat and call – your visitors decide for themselves whether they want to type or speak.

Enable call forwarding from the chat

Your assistant can transfer the visitor to one of your contacts via chat – for example, to the support team or the accounts department. They will offer to make the transfer on their own initiative as soon as the inquiry is relevant to one of your contacts, and also if the visitor asks for it themselves.

Note

If you are using only the AI Chat Assistant, the Call forwarding from chat option will not be displayed. It will appear once you add the AI Receptionist: the contacts suggested by the assistant are located in the Contacts, Call Forwarding & Email Summary section, which is only available with this product.
 

In the Call forwarding from chat section, toggle the switch of the same name. The contacts for whom you have set up call forwarding will be displayed.

In the chat, the contact’s name will then appear below your assistant’s reply, with the Call now button below that. If the visitor clicks on it, the contact’s phone will ring, and the visitor speaks via their browser.

Note

You can create contacts in the Contacts, Call Forwarding & Email Summary section – you’ll find instructions in the article Managing escalated call forwarding and contacts. For each contact, fill in either the Department or Description field: this tells your assistant which matters the person is responsible for. If both fields are left blank, your assistant will not offer to forward the inquiry to that contact.

Adjust display

In the Appearance section, specify how the button should look on your website:

  • Under Position, select where you want the button to appear: Bottom left, Bottom center, or Bottom right.
  • Under Accent color, choose the color of the button. Click on the color preview – the colored square next to the input field – to select a color, or enter a hex color code (e.g. #003d8f) directly into the text field. If you do not specify a color, the IONOS brand color will be used.
  • Under Button label, enter the text you want to appear on the button.

Choose the button label to match what the widget offers: for Chat only, for example, “Chat with AI”; or for Call only, “Speak to AI”; and for Chat and call, a neutral text such as “Get in touch”.

Note

Below the Button label field is the line "Text shown on the call button." This appears regardless of which channels your widget offers. The text you enter will always appear on the widget’s button – even if it only leads to the chat function.

In the Preview section, you can see what the button looks like with your settings applied.

Upload your own icon

As well as the position, color, and text, you can also choose the icon for the button. Under Icon, you can upload your own image. If no icon is specified, the widget will display the default icon.

  • In the Appearance section, under Icon, click on Upload icon.
  • Select the desired image file from your operating system’s file dialog. Common image formats are supported, including JPG, PNG, GIF, ICO and SVG.
  • In the Crop icon window, define the desired image section. The section is circular. You can enlarge it using the slider below the image and move it to the desired position by dragging while holding down the mouse button.
  • Click Apply.

The icon now appears to the left of the button, which is now labelled Edit. It is also displayed immediately in the preview area.

Note

The color set under Accent color does not affect an uploaded icon.

Replace or remove an icon

Under Icon, click Edit. A menu with two options will open:

  • Upload icon – this replaces the existing icon. The process is the same as when you first uploaded it.
  • Remove – deletes the stored icon. The Upload icon button will then reappear under Icon, and the widget will display the default icon again.
     

Authorize domain

For security reasons, the widget will only be loaded on domains that you have authorized. It will remain disabled until a domain has been entered.

In the Installation section, under Allowed domains, enter your website’s domain:

  • For the main domain only: Enter your domain in the format www.example.com. The widget will then only work at this exact address.
  • For all subdomains: Use an asterisk as a placeholder (*.example.com) so that the widget is also active on subdomains (e.g. shop.example.com).

Each authorized domain appears as a separate entry in the field. Click the × next to an entry to remove it. Add additional domains in the same way.

Note

example.com is just a placeholder. Replace it with your actual domain name.

Save changes

To apply your changes, click the Save changes button in the top right-hand corner. Unless you have made any changes, the button will be greyed out and labelled No changes.

If you have already embedded the website widget on your website, your saved changes will be automatically applied there – there is no need to embed it again. It may take a few minutes for the changes to become visible to all visitors.

Incorporate the embed code

To make the widget visible to your visitors, insert the generated code into your website.

  • In the Installation section, under Embed code, click Copy.
  • Insert the code within the <body> tag on your website. The script loads in the background and does not slow down page loading.

Instead of the placeholder YOUR_AGENT_ID, your code will contain your assistant’s unique ID. It will look something like this:

<script src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js" data-agent-id="YOUR_AGENT_ID" defer></script>

Test settings

To test your settings, embed the website widget as described and then open your website. From there, start a conversation yourself using the button. This will allow you to experience the assistant exactly as your visitors do.

Guides for popular website platforms and CMSs

The exact procedure for inserting HTML code varies depending on the system you are using. Please use the relevant quick guide for your platform:

IONOS MyWebsite
  • Open the website editor for your MyWebsite.
  • Go to Settings > Custom Head Code.
  • Paste the copied script into the field provided.
  • Create a privacy consent (cookie consent entry) for your language widget.
  • Save and publish your website to make the changes live.
WordPress

We recommend embedding the code via a plugin. This works with all themes and ensures that your code isn’t lost when you update your theme.

  • Install and activate the “Insert Headers and Footers” plugin.
  • Go to Settings > WP Headers and Footers and paste the script into the Scripts in Footer section.
  • Save the changes.
Wix
  • In your Wix dashboard, go to Settings > Custom Code.
  • Click on + Add Custom Code.
  • Paste the script.
  • Select the All pages option.
  • Set the placement to Body – end.
  • Click Apply.
Shopify
  • In the admin panel of your Shopify shop, go to Online Store.
  • Click on the three dots next to the active theme and select Edit code.
  • Open the theme.liquid file.
  • Insert the script immediately before the closing </body> tag and click Save.
Webflow
  • In Webflow, open the Site settings and go to the Custom code tab.
  • Paste the script into the Footer code section.
  • Click on Save changes.

Content