> For the complete documentation index, see [llms.txt](https://chatlyst.gitbook.io/chatlyst-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chatlyst.gitbook.io/chatlyst-user-guide/zh/inbound-channels-zh/wang-zhan-nei-qian/pei-zhi-xiao-gong-ju.md).

# 配置小工具

在「網站內嵌 (Website Embed)」中，從清單中選取該小工具，然後選取 **Configure** 以開啟小工具的「總覽 (Overview)」頁面。

<div data-with-frame="true"><figure><img src="/files/juPUHMuuHW4ydMv166IN" alt="" width="375"><figcaption></figcaption></figure></div>

在此頁面中，關鍵統計數據包括：總對話數、總訊息數以及平均工作階段時間。

<div data-with-frame="true"><figure><img src="/files/jFqXE26FadmTDABEI4Oc" alt=""><figcaption></figcaption></figure></div>

此頁面同時也會顯示小工具目前的配置，包括外觀與各項設定。

<div data-with-frame="true"><figure><img src="/files/aKt2i2z1y2AGIQaCiqIq" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
請注意，開關切換鍵位於「總覽」頁面的右上角。您可以使用它來啟用或停用該小工具。

![](/files/ONrMv8JU1mNA7eqcttv2)
{% endhint %}

## 小工具管理

如果需要進行變更，請選取右上角的 **管理小工具**。「管理」頁面使用與 [新增小工具](/chatlyst-user-guide/zh/inbound-channels-zh/wang-zhan-nei-qian/xin-zeng-xiao-gong-ju.md) 相同的設定流程。

<div data-with-frame="true"><figure><img src="/files/BdVW6XuIsvTUah3PAhCU" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
導覽頁籤與保存 — 隨時使用此功能以返回總覽頁面。在離開頁面之前，請選取保存並確認已套用更新。

![](/files/rYkkjfudLASOvhJFxW0o)
{% endhint %}

### 嵌入代碼

在小工具「總覽」頁面的底部，複製嵌入代碼並將其貼到網站中以安裝小工具。

在網站上嵌入代碼的基本範例：

```html
<body><h1>My Website</h1><p>Welcome to my site.</p>

<!\-\- Paste widget code here --!>
</body>
```

<div data-with-frame="true"><figure><img src="/files/4uRQYlSynN8EtxmFpS2h" alt=""><figcaption></figcaption></figure></div>

### **預覽小工具**

{% stepper %}
{% step %}
選取 **預覽小工具** 以開啟即時範例，查看小工具嵌入網站時的外觀與行為。

<div><figure><img src="/files/xwh1P0r0D5eYu5Ylia5j" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HjUocStNoZyG7TD9t7nY" alt=""><figcaption><p>預覽小工具</p></figcaption></figure></div>
{% endstep %}

{% step %}
以網站訪客的身分測試小工具：選取啟動器圖示以開啟對話視窗，並開始與機器人聊天。

<div data-with-frame="true"><figure><img src="/files/eYGP6Zqh95gCP4Ad4hCJ" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
在正式上線前，您仍可以複製內嵌程式碼並在網站上進行測試。

![](/files/IS5dHRHy1kPZNSPPhqbF)
{% endhint %}
{% endstep %}

{% step %}
審查小工具的外觀（包括顏色、小工具名稱和歡迎訊息），並確認其與您的設定相符。

<div data-with-frame="true"><figure><img src="/files/prwO0xg53xDgVXXBaO42" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
發送幾則測試訊息，以確認整體體驗顯示正確。

{% hint style="warning" %}
**重要注意事項**：在預覽中發送的訊息皆為即時互動，且會被記錄為真實對話。在預覽中建立的對話將與其他訪客對話一樣，同步顯示在「對話」中。
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/rgwQ7rQTvpFTwFGI3voV" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://chatlyst.gitbook.io/chatlyst-user-guide/zh/inbound-channels-zh/wang-zhan-nei-qian/pei-zhi-xiao-gong-ju.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.
