> For the complete documentation index, see [llms.txt](https://idn.pancake.vn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://idn.pancake.vn/english/pancake-quick-start-guide/iii.-connecting-to-the-website-chat-plugin.md).

# III. Connecting to the Website chat plugin

Chat plugin is a widget attached to your website that helps customers chat directly to purchase or quickly exchange information about products.

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FdEGqIcUC3h9EoRhaQKvG%2FScreen%20Shot%202022-10-14%20at%2015.png?alt=media&amp;token=f3731bc9-ed32-40e6-81bd-e5a7c3d0cb53" alt=""><figcaption><p><em>Chat Plugin on a Website</em></p></figcaption></figure>

## **1. Create Pages to manage Website chat**

At [<mark style="color:blue;">**Dashboard**</mark>](https://pages.fm/dashboard#), you click <mark style="color:blue;">**Connect**</mark>, choose the tab <mark style="color:blue;">**Website**</mark> and start to create a new page

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FQTW9vxEoycRmYQX6wjea%2FScreen%20Shot%202022-10-14%20at%2015.png?alt=media&amp;token=e4c9f024-0ea8-4560-b764-245d1cbc4857" alt=""><figcaption><p><em>Create a new page for Website</em></p></figcaption></figure>

Here, you input the **Page Username**, **Display name**, and profile picture of that page. Then, click <mark style="color:blue;">**Create Page**</mark>.

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FRpHm8v46t4tMrWsI6fMZ%2FScreen%20Shot%202022-10-14%20at%2015(1).png?alt=media&amp;token=9fda7686-60d2-4ba5-ab0f-2537bf1589a2" alt=""><figcaption><p><em>Page Username, Display name</em></p></figcaption></figure>

* **Page username:** The username of the page in the system. You can freely customize the name, but it should not contain spaces, or special characters and have not existed on the system. For example: Pancake123
* **Display name**: The name that is displayed on the system, you can freely customize it.

## 2. Setup the Page

After creating the page successfully, you select that page and add the **domain** of your Website.

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FRa0IQzZy5ezWW1iiL3Fx%2FScreen%20Shot%202022-10-14%20at%2015(2).png?alt=media&amp;token=eb3025ad-a49e-4af6-a61c-8f16e54af880" alt=""><figcaption><p><em>Add whitelist domain</em></p></figcaption></figure>

The system will display a code script of your created page. You can customize the Chat Plugin Button in terms of shape, color, size, and default fields,...

After attaching this script to the \<body> of your website, the system will display the Chat Plugin button on your website.

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FLgccGeP27tXKEGTxa5RK%2FScreen%20Shot%202022-10-14%20at%2015(3).png?alt=media&amp;token=2000837d-cba7-4e13-9860-4a5b1be3488c" alt=""><figcaption><p><em>Add script to  &#x3C;body> of your website. Example setting of webcake.io</em></p></figcaption></figure>

<figure><img src="https://119338140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MizeiY419iEmKmpGjps%2Fuploads%2FdEGqIcUC3h9EoRhaQKvG%2FScreen%20Shot%202022-10-14%20at%2015.png?alt=media&amp;token=f3731bc9-ed32-40e6-81bd-e5a7c3d0cb53" alt=""><figcaption><p><em>Website Chat Plugin can be customized</em></p></figcaption></figure>
