How to embed your chat on your website.

Adding a live chat feature to your website is a great way to connect with your visitors in real-time. This guide will walk you through embedding the Authenti Chat floating bubble widget directly into your site’s code.

A quick note before you begin: This process involves adding a code snippet to your website’s backend. If you’re not comfortable editing your website’s code or don’t have the necessary permissions, we recommend forwarding this guide to your web developer.

Step 1: Get your embed code

First, you’ll need to retrieve the unique script from your dashboard.

Log in to your Authenti Chat dashboard.
In the Dashboard footer, click the “Embed chat widget” button.
A modal window will appear, presenting two options. Select the “Embed widget” option, which features an icon of a chat bubble floating over a page.
Before copying, you have an optional setting.
- Optional: Disable the Offline Contact Form If you only want to offer live chat and not receive messages when you’re offline, you can disable the contact form. This is ideal if you prefer to use the widget for automated FAQs to guide users when you’re not available. To do this, check the box that says “Remove contact form when offline (FAQ only)”. The script will automatically update. Note: FAQs are also shown when the contact form is active, to de-activate FAQs, click on the FAQ button in the Dashboard header (top right).
Once you’ve configured your options, a section will appear below containing your personalized code snippet with you unique identifier in a text box.
Click the “Copy” button to copy the entire script to your clipboard.

Step 2: Add the Script to Your Website

Now that you have the script, you need to add it to your website. Adding the script to your site’s main footer will make it appear on every page. However, some platforms give you the flexibility to choose specific pages for the chat bubble (ex: contact page only).

Here are instructions for popular platforms:

WordPress

The safest way to add code to WordPress is by using a plugin. We recommend the free “Code Snippets” plugin.

From your WordPress dashboard, go to Plugins > Add New.
Search for “Code Snippets,” then install and activate it.
In the sidebar, go to Snippets > Add New.
Give your snippet a title, like “Authenti Chat Widget”.
Paste the script you copied from your dashboard into the “Code” field.
Below the code box, you can choose where the snippet runs.
- To show the chat on all pages, select “Run snippet everywhere”.
- To show it only on specific pages (like your “Contact Us” or “Pricing” pages), you can set conditional logic within the plugin’s settings.
Click Save Changes and don’t forget to click on Activate.

Squarespace

You must have a Squarespace Business plan or higher to use this feature.

From your Squarespace dashboard, go to Settings > Advanced.
Select Code Injection.
Paste the copied script into the Footer box. This will display the widget on all pages of your site.
Click Save.

To display the chat bubble only on specific pages of your website, you can add the code directly to that page using a Code or HTML block.

Navigate to the page you want to edit and open the page editor.
Add a new content block. Look for options named “Code,” “Custom HTML,” “Embed,” or “Script.”
Paste the entire embed script you copied from your Authenti Chat dashboard into the block’s code field.
Save the changes to your page.

Wix

Please note: The ability to add custom JavaScript or code blocks is often a premium feature on website-building platforms and may require a higher-tier subscription plan.Wix

You must have a Wix premium plan and a connected domain to add custom code.

From your Wix dashboard, go to Settings.
Scroll down to the “Advanced” section and click Custom Code.
Click “+ Add Custom Code” in the top-right corner.
Paste the script into the code snippet box.
Give the snippet a name (e.g., “Authenti Chat”).
Under “Add Code to Pages,” choose to load on “All pages” or specific pages.
Under “Place Code in,” choose “Body – end”.
Click “Apply”.

Customizing the Chat Widget’s Height

You can easily adjust the height of the chat window when it’s opened. In the script you copied, find the data-chat-height attribute:

HTML

<script src="https://www.authenti.chat/chat-widget-embed.js" 
        data-tenant-id="YOUR-UNIQUE-ID" 
        data-chat-height="450px" 
        async defer>
</script>

Simply change the "450px" value to your desired height. For example, to make it taller, you could change it to "600px".

Cookies and GDPR Compliance

To provide a seamless experience, our chat widget uses a single cookie to remember visitors across different sessions. This ensures their chat history is saved if they navigate away and come back.

For visitors in Europe, GDPR regulations may require you to declare this cookie in your website’s cookie consent banner (e.g., CookieYes, Cookiebot).

If you add the script and the chat bubble doesn’t appear, you may need to add the following information to your cookie consent platform’s “necessary” or “functional” category:

Cookie ID: chatWidgetVisitorId
Domain: (Your website’s domain, ex: www.yourwebsite.com)
Duration: Persistent
Script URL: https://dashboard.authenti.chat
Description: This is used to identify a visitor between Browse sessions to maintain chat history and context for the customer support widget.
Category: Necessary

Optional: Improving the mobile experience

To ensure the chat widget provides a smooth, app-like experience on mobile devices, you may want to prevent users’ devices from accidentally zooming in, which can disrupt the layout. Adding a specific <meta> tag to your website’s HTML <head> section can lock the viewport and disable zoom.

Add the following line of code inside the <head> section of your website’s HTML:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This tag instructs mobile browsers to set the page width to the device’s screen width and, crucially, disables the ability for users to pinch-to-zoom (user-scalable=no). This creates a more stable and predictable experience when interacting with the chat.

Is the script method too complicated?

If you’re looking for a simpler, no-code solution, you can use our “Link to full page” option. This gives you a direct URL to your chat page that you can link to any button on your site. We will cover this method in a separate article.