# WebChat Widget

## Please pay attention to the following points:

1. WebChat Widget Setting

   * **WebChat Widget -> Setting -> Whitelist Domains**, place your website domain in order to use and display the widget. 

   (*If you enter the real website domain that have published on the Internet, make sure to publish your website every you make changes, to test out is the widget working normally.*)

   * Click **Apply Changes** if you have edited any things on webchat widget, include **whitelist domain.**
2. When Install Webchat Widget into website

   * Replace "id" with you division id where you want to display the widget. 

   For example,  \<script async defer src="<https://chatkuai.com/js/widget/jsdf8q49q318ws3/embed.js?id=[**divider-7Uxz--IsGh>\*\*]\(#user-content-fn-1)[^1]">\</script>
3. Set and Receive specific payloads when flow been triggered

   * Place the **Ref url** inside the script, behind the "id". Make sure to add "&" between "id" and "ref".

   For example,  \<script async defer src="<https://chatkuai.com/js/widget/78pov4zhcxfe1p9b/embed.js?id=divider-7Uxz--IsGh[**\\&ref=name--aesthetic--demo>\*\*]\(#user-content-fn-2)[^2]">\</script>
4. Ref URL settings
   * Remember to **save changes** when edit settings of the **Ref URL.**
   * **Style and Channel** is suggest to select as same as **webchat widget** to avoid any clashing.
   * Set a **parameter name** to use it on webchat widget script.

Video tutorial:

{% embed url="<https://youtu.be/s5fQq9p3DkU>" %}

[^1]: replace the id here.

[^2]: "&" ref=\[parameter]--\[payload1]--\[payload2]


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.mampuai.com/mampu-ai/platform/webchat-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.