Help Center
Home Office AI Receptionist

Integrating the Web Chat Widget into Your Website

Valid for IONOS AI Receptionist

This article explains how to retrieve the unique widget script for your AI Receptionist and embed it into an external website. By adding this code to your website's HTML source code, you make the chat interface available to your visitors.

Retrieving the Widget Script

Before you can edit your website code, you must locate the unique script associated with your AI Receptionist. If you're new to the platform, you would have received your script soon after training your AI Receptionist. If you need to find your unique script again, follow these steps:

  • Log in to your IONOS account.
  • Click Menu > AI Receptionist in the title bar. The AI Agent Portal opens.
  • Click on Customer Portal under Actions for the desired receptionist. The Dashboard opens.
  • Click Settings in the main navigation bar.
  • Select the Chat tab.
  • Locate the Widget Script section.
  • Copy the entire script code to your clipboard.

Note

Your script will look similar to the example below, but will contain your unique client secret.

<script src="https://ionos.ai-voice-receptionist.com/chat-scripts-MqGN74WP/web-chat.js" name="web-chat" data-client-secret="[your_client_secret]"></script>

Adding the Code to Your Website

Once you have copied the script, you must insert it into your website's source code. You can place the script in either the Header or the Footer of your site.

Placement Location in HTML Behavior
Header Between the <head> and </head> tags. The chat widget loads before the visible page content.

Note: This may slightly delay the display of the rest of the page.
Footer Immediately before the </body> closing tag. The widget loads after the visible page content is ready. This allows the user to see the page content immediately.
Integrating with MyWebsite Now or WordPress

The process for adding code varies depending on the platform you use to host your website. Please refer to the specific documentation for your system:

Configuration for Different Website URLs

If you intend to integrate the web chat on a website that has a different address (URL) than the page used to train the AI initially, you must specify this URL in the settings to ensure the widget functions correctly.

  • While still in the Chat tab (Settings > Chat), locate the Client Website Base URL field.
  • Enter the URL of the website where the chat widget will be installed.
  • Save your changes.

Verifying the Integration

To ensure the chat widget is working correctly:

  • Publish your website changes.
  • Open your live website in a browser and refresh the page.
  • Confirm that the Chat icon appears in the bottom-right corner of the screen.

Content