HaveAIDocs

Chat Widget Installation

To add the HaveAI Chat Widget to your site, use the setup code in the panel. For most sites, the recommended option is the chat button that opens in the corner of the page.

Add the Chat Button to Your Site

1

Chat Widget section

Open the Chat Widget section in the HaveAI panel.
2

Copy the code

Copy the recommended one-line code in the setup area.
3

Add it to the page

Add the code to your site's common page template, before the closing </body> tag. If your site infrastructure offers a separate code-adding area, you can also use it.
4

Publish

Save and publish the change.
5

Check

Refresh your site and open the chat button.

If you want the widget to appear on all pages, add the code to the common area that runs on all pages. Do not add it more than once to the same page.

Use the correct widget code

The setup code contains the information that identifies your widget. Instead of code belonging to another account or agent, use the code you got from the panel for the widget you want to use.

Place the Chat Inside the Page

If you want to keep the chat window continuously visible on a contact page or a dedicated support area, use the iframe option.

1

Copy the iframe code

Copy the iframe code in the panel.
2

Add it to the area

Add it to the area where you want the chat to appear on your site.
3

Size it

Adjust the width and height of the window according to the area you placed it in.
4

Check

Publish the page and check on different screen sizes.

The chat button that opens in the corner and the iframe placed inside the page are different layout options. You do not need to use both on the same page.

WordPress and Other Site Infrastructures

In WordPress, you can use the custom code area your site offers or a tool that helps add header and footer code. Add the setup code once to the site's common footer area.

In Shopify and similar systems, use the code-adding method of your theme or site editor. Code added only to a specific page may not show the widget on other pages.

If you do not have permission to add code, forward the code you copied from the panel to the person who manages your website.

Installation with Google Tag Manager

If you manage your site's code through Google Tag Manager, you can add the widget code as a Custom HTML tag. Choose a suitable trigger for the pages where you want the widget to appear; if it will be used across the whole site, use a trigger that covers all pages.

After checking the tag in preview, publish the changes. If the widget code has already been added to the site by another method, do not add it a second time.

Check the Installation

After setup, do not settle for only looking at the panel preview. Try these steps on your published site:

  • Open and close the chat button.
  • Send a question and check the assistant's answer.
  • If the information form is on, fill in the fields and move to the chat.
  • On phone, check that the window, keyboard and message compose area are comfortable to use.
  • If you use human handoff, check that the agent can take over the conversation.

To try the flow a new visitor sees, use a clean browser session such as an incognito window. The information form you filled in earlier may not open again in the same browser.

If the Widget Does Not Appear

First check that the code was added to the correct page and the changes were published. If you use a site cache, refresh the cache. If you use Google Tag Manager, make sure the tag runs on the relevant page.

Also check whether the chat button is hidden behind a cookie notice or another fixed button. If needed, change the widget's position and add the current code again.

After installation, you can complete the customization and customer information settings.

Related Topics

🎨

Customization→

Color, position and avatar

πŸ“

Customer Information→

Pre-chat form

🀝

Human Handoff→

Handoff to agents

Was this page helpful?