> For the complete documentation index, see [llms.txt](https://blog.mantago.cc/en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blog.mantago.cc/en/livechat-integration.md).

# LiveChat Integration

This tutorial will guide you through the setup process for integrating MantaGO’s Live Chat widget into your website. From basic installation to advanced settings and front-end display, you’ll learn how to create a seamless real-time chat experience that helps businesses engage visitors, capture leads, and respond more efficiently.

Let’s get started with the tutorial!

1. Open your chatbot, go to settings

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2F9Nxnq8WyHZIX75bENVfw%2FScreenshot%202026-04-20%20at%2018.18.34%20(1).png?alt=media&amp;token=37990901-287e-4e1f-818b-7a7b20925161" alt=""><figcaption></figcaption></figure>

2. Scroll down and go to “LiveChat” and click link settings

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FaSXKgvGG6faP1RO6S59w%2FScreenshot%202026-04-20%20at%2018.20.34%20(1).png?alt=media&amp;token=bbefb5a7-2971-47a9-8e0a-35801b482995" alt=""><figcaption></figcaption></figure>

Here you can customize the chat widget that will be featured on your website.

<div><figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2Fpc9D8bbXGj5TURpROMxM%2FScreenshot%202026-04-20%20at%2018.22.17%20(1).png?alt=media&amp;token=2549dada-deb1-4796-97bc-6dccff7d3a32" alt=""><figcaption></figcaption></figure> <figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FKRjW3tQWR9RNJos59Q7q%2FScreenshot%202026-04-20%20at%2018.22.24%20(1).png?alt=media&amp;token=89c52f50-7f67-4631-949f-8adb517075c9" alt=""><figcaption></figcaption></figure></div>

3. After you are done with the customization, click next step.
4. To add the widget to your website, copy and paste the code below in the \</body> section of each page on your official website

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FsESImR7wIcI9mlmKKn9F%2FScreenshot%202026-04-20%20at%2018.25.49%20(1).png?alt=media&amp;token=7e2537b9-b1f7-4ff6-b05c-b36ad412afb3" alt=""><figcaption></figcaption></figure>

Once you have finished, it will look like this on your website:

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FV9W9oXAzqRHuNA0z3S1o%2FScreenshot%202026-04-20%20at%2018.24.30.png?alt=media&amp;token=fbce88fb-3d86-4c3a-bb33-65f4ac7e21b5" alt=""><figcaption></figcaption></figure>

Once the basic Live Chat setup is complete, the next step is to fine-tune the widget experience through Advanced Settings.

These settings allow you to customize how customer information is collected and how the chat interface appears on the front end.

**Advanced Settings**

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2Fvp6YLPgfwBlV4mqrUGZ5%2FScreenshot%202026-04-20%20at%2018.30.57%20(1).png?alt=media&amp;token=7100afc2-e5e3-4922-966e-7a41a127187f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2F4xsXyvvk3RMjwRwZ8K3C%2FScreenshot%202026-04-20%20at%2018.31.13%20(1).png?alt=media&amp;token=04bf188e-6e21-4358-9013-0564fa5d8941" alt=""><figcaption></figcaption></figure>

1. **Enable assignment function:** After enabling this, users with the appropriate permissions will only be able to view the conversation messages that have been assigned to them.
2. **Show Name**: When you enable “Show Name”, the Live Chat widget will require customers to enter their name, email address, and phone number before starting the conversation.

This setting is recommended when you want to collect customer details for:

* lead capture
* follow-up communication
* customer service records

Once enabled, these fields will appear automatically on the front-end chat widget.

To make sure you can collect each user’s data, go to the Setting of the LiveChat section. Make sure the “Collect User Data” toggle is on, and check the checkbox of what you want to collect.

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FXuBafPfvIc9g3CttIIij%2FScreenshot%202026-04-20%20at%2018.18.50%20(1).png?alt=media&amp;token=22cb8140-48bc-47c3-9dc1-7f87002f7027" alt=""><figcaption></figcaption></figure>

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FvSQmGUsMRbj4KRXou9fR%2FScreenshot%202026-04-20%20at%2018.28.17%20(1).png?alt=media&amp;token=4d349d49-9ab3-4350-8180-ec8707ee4267" alt=""><figcaption></figcaption></figure>

Tip: Make sure to update your chatbot once you make any changes, so the widget on the website will be updated as well.

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FkhslW3ePjoS57hsdiZvN%2FScreenshot%202026-04-20%20at%2018.38.16%20(1).png?alt=media&amp;token=2488e05a-be12-4bec-9799-62416eb4ece6" alt=""><figcaption></figcaption></figure>

The result will look like this:

<figure><img src="https://971361156-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjEgYnj4JfzImd872neOw%2Fuploads%2FtvGMk88D1QVRkVPVrgFa%2Fezgif-1f3747308f3db057%20(1).gif?alt=media&amp;token=06ca7f51-e5b4-4425-b75d-5bb1c107ff7b" alt=""><figcaption></figcaption></figure>