Skip to main content

πŸš€Getting Started

How to Install Embed Code for LiveChatAI?

LiveChatAI presents the easiest way to create an AI bot and reduce the need for human support in your customer conversations.

After creating your AI bot, you need to move forward to installing your AI bot on your website.

There are two practical ways to do that, and we will cover them both.

Feel free to jump into your target section!

How to Embed Messenger AI Bot on Your Website?

Embedding your Messenger AI bot only takes a few steps to apply.

Embed Your Messenger AI Bot Manually

You need to start by creating your account and your first AI bot on your dashboard.

Step 1- Find the "Embed & Share" section on your AI bot.

the Embed & Share section on the dashboard of LiveChatAI

Step 2- Copy the code to your clipboard to paste.

the embed code of an AI bot on the dashboard of LiveChatAI

As the image shows, you need to click on the "Copy to clipboard" button on the code editor.

Step 3- Paste the code to the <head> section.

the source editor of a website with the code embedded

To publish your Messenger AI bot, you should paste the copied code to the source code of your website.

And you need to save the changes based on the edits you have done.

⭐
The part you should pay attention to is that you need to embed the code after the <head> tag or before the </head> tag.

Also, you need to know your source editor effectively to embed the code.

Embed Your Messenger AI Bot with GTM

Google Tag Manager (GTM) is also another way to publish your Messenger AI bot on your website.

Step 1- Find the "Embed & Share" section on your AI bot.

the Embed & Share section on the dashboard of LiveChatAI

Step 2- Copy the code to your clipboard to paste.

the embed code of an AI bot on the dashboard of LiveChatAI

As the image shows, you need to click on the "Copy to clipboard" button on the code editor.

Step 3- Go to your GTM account and add a new tag.

the New Tag on GTM

Step 4- Name your tag and edit.

the Untitled tag configuration part on GTM

To edit the tag, you should click the 'Tag Configuration' title and then the pencil icon on the right side.

Step 5- Choose "Custom HTML" as the tag type.

Custom HTML highlighted as the tag type

Going further, you should choose the tag type as "Custom HTML."

Step 6- Paste the Code.

Naming your tag can help you identify. Then, you need to paste the code into the HTML box.

saving tag config and naming on GTM

After ticking the box where it says "Support document. write," you should "Save" the changes.

Step 7- Trigger the Pages.

Scrolling down the same area, you will see "Triggering." There, you can choose the target pages.

triggering pages on GTM

Then, click "Add" to save all.

Step 8- Click "Submit" to Apply Changes.

submitting button on GTM

Step 9- Publish Changes.

the changes of submission configuration of LiveChatAI

❇️ When you move forward, you should fill in the boxes for the Container Version Description.

And that's all! You can start using your AI bot on your website easily and practically.

How to Embed Inline AI Bot on Your Website?

Inline AI bot is displayed on your website as a part of the website.

Since you have created your inline AI bot, it is now time to embed it into your website.

Embed Your Inline AI Bot Manually

If you want to embed your code manually for your inline AI bot, it is easy to follow the process.

And you can make it live with only 3 steps! Let's start!


Step 1- Find the "Embed & Share" section on your AI bot.

the Embed & Share section on the dashboard of LiveChatAI

Step 2- Copy the code to your clipboard to paste.

the inline chat code to embed on the LiveChatAI dashboard

As the image shows, you need to click on the "Copy to clipboard" button on the code editor.

Step 3- Paste the code to the <head> section.

To publish your Inline AI bot, you should paste the copied code to the source code of your website.

And you need to save the changes based on the edits you have done.

⭐
The part you should pay attention to is that you need to embed the code after the <head> tag or before the </head> tag.

Also, you need to know your source editor effectively to embed the code.

So, we have shared the processes that you can follow step-by-step.

You can follow this guide and ask if you have any questions in your mind. We'll always be ready to help! Β