---
description: 建立和管理可嵌入您網站的小部件，以便網站訪客透過選擇的管道與您聯繫。
title: 增長小部件
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[新的🔥 搶先試試 WhatsApp Business Calling API（開放式測試版）！![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/tw/whatsapp-business-calling-api)

幫助我... ⌘ 

1. [All Collections >](/tw/help)
2. [ 產品 >](/tw/help/product)
3. [ 工作區設置 >](/tw/help/workspace-settings)
4. 增長小部件

# 增長小部件

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/4GvzCieeTBRY4TRJUbIr4y/b92428e6b049d23f546269180534f7ea/Ryan_Tan_Avatar.svg)

Joshua Lim

· 04 Apr 2025

5 分鐘

增長小部件可讓您在您的網站上嵌入單渠道或多渠道小部件，以便訪問者可以透過他們喜歡的訊息應用程式與您聯繫。

> 如果您希望新增網站聊天小工具，請了解更多資訊[在此](https://respond.io/tw/help/website-chat-widget/website-chat-widget-overview)。

## 到達這裡

> 只有業主和經理可以存取此設定。

可從 **設定** 導覽選單的 **工作區設定** 子選單項目、 **成長小工具**存取此設定。

在「成長小工具設定」部分下，您可以看到工作區中現有小工具的清單。 在這裡，您可以編輯和管理這些小部件，或建立新的小部件。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif?fm=avif&w=1000) 

在此設定中，您可以：

* 建立小部件
* 管理現有小部件
* 刪除小工具

## 建立小部件

**步驟 1：** 點選**新增小工具**按鈕以探索所有可用的小部件。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1cSEqRmlBANAYqqY5FntFL/da1d2cbc82153ef8a38e9d4dc0a1d524/workspaces-add-widget.png?fm=avif&w=1000) 

**步驟 2：** 選擇您想要建立的小工具 > 點選**建立小工具**按鈕

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2v1rbVsIBPfSndSWriVBe5/3b5fb7c19244b4bca71d4840d757063e/workspaces-createw.png?fm=avif&w=1000) 

> 如果通道連接到工作區，您只能選擇單通道小工具。

### 配置小工具

根據必填欄位配置所選的小工具。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4TI7vQA9U7yvcO9RtuCgse/965118031034edb7a1d1bac374f8446d/workspaces-configurew.png?fm=avif&w=1000) 

#### 網站域名

在網站網域欄位中新增將新增小工具的網站。 這裡介紹如何將網站列入白名單：

* 如果使用者加入`https://app.respond.io`，那麼只有`https://app.respond.io`會被列入白名單。 任何其他子域或根域都不應起作用。
* 如果使用者加入`https://*.respond.io`，則包括根域在內的所有子網域都將被列入白名單。
* 若使用者加入`https://respond.io`，則只有根域會被列入白名單。
![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1MMSfFMgRphP35jCbBejTT/8e9eac0f58354013130396de3ecef3ec/websitedomain.gif?fm=avif&w=1000) 

#### 選擇你的頻道

從可用頻道下拉清單中選擇您想要為其建立小工具的頻道。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2BDzQ5y4lVIgvRau13PRrC/a818f134ff35c6794dc0b1b9d158f3d6/choosechannels.gif?fm=avif&w=1000) 

#### 進階設定

您可以點選**進階設定**按鈕進一步配置選用欄位。

* **懸停文字：** 懸停在小部件上時顯示
* **預先填入文字（選購）：** 傳送訊息前預先填入文字
* **包含目前頁面 URL：** 選取此核取方塊可在預先填入文字中包含目前頁面 URL

> 「包含目前頁面 URL」功能僅適用於 WhatsApp、Viber 和電子郵件頻道。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1MYLyLozRByTsjbDvrr1aM/8d0620e360d0b6f4535e4eedc610a138/workspaces-advanced-settings.png?fm=avif&w=1000) 

#### 安裝腳本

複製生成的腳本以將其安裝到您的網站上，然後點擊**完成**按鈕。 或者，透過電子郵件轉發安裝說明。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/sEm4u6WmVilu3Xjfdz0Rv/d6541119d3f441855bb6fe315c1edcaa/growth-widgets-7.png?fm=avif&w=1000) 

> 請參閱這裡的 [以了解如何在您的網站上安裝腳本](https://respond.io/tw/help/website-chat-widget/website-chat-widget#installing%5Fthe%5Fchat%5Fwidget)。

> 完成後，點擊右上角的“生成小部件”按鈕。

## 管理小部件

一旦創建了小部件，您就可以如下管理它。

### 打開安裝代碼

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7liJXSQ6a8K0P0AvSlsVsL/00b273a27c309b4972c7d8aec6659876/installation-code.png?fm=avif&w=1000) 

若要查看或複製所建立小部件的安裝代碼（腳本），請點選 **安裝代碼** 按鈕並依照螢幕上的指示進行操作。

> 此功能不適用於二維碼產生器。

### 下載二維碼

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2Omh41BIWxCUyCKB5axLfa/f38aa08096e4eef8c0a450d62f374585/qr-code.png?fm=avif&w=1000) 

若要下載產生的二維碼，請點選 **掃描代碼** 按鈕，然後點選 **下載** 按鈕，並為可掃描代碼選擇所需的像素尺寸。

> 這僅適用於二維碼產生器，不適用於其他訊息小工具。

> 有關如何使用此功能的更多信息，請閱讀我們關於使用可掃描代碼的 [博客文章](https://respond.io/tw/blog/facebook-messenger-code)。

### 自訂小工具

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7jpBHww29KHkVGZzWNuXJc/d671069da8e50bd7d8009e3b6ccc80f4/customize-widget.png?fm=avif&w=1000) 

若要自訂現有小工具，請點選 **自訂** 按鈕開啟自訂頁面。

根據小部件的類型，您可以自訂 5 個部分：

#### **一般的**

您可以配置以下常規設定：

* **小部件名稱：** 內部用於識別小部件的名稱
* **網站網域：** 安裝小工具的網站。 如果您不將您的網站新增至此列表，您的小工具將不會載入。 如果您打算在多個網站上安裝該小工具，則可以輸入多個 URL。

#### **頻道**

您可以自訂以下內容來根據所選頻道定義小工具的行為：

* **懸停文字：** 當懸停在小部件上時，懸停文字會顯示在工具提示中。
* **預先填入文字：** 預填文字是聯絡人開始對話時的輸入建議。
* **參考：** 開啟對話時會出現參考，並讓您追蹤聯絡人的來源。
* **顏色：** 選擇小工具中頻道圖示的背景顏色和圖示外觀。

#### **顯示 & 外觀**

您可以自訂以下內容來變更網站上小工具的顯示外觀：

* **彈出訊息：** 彈出訊息每天在頁面載入後 5 秒向網站訪客顯示一次。 如果未定義，則不會出現彈出訊息。
* **小部件大小：** 從大、標準或小部件大小中選擇。
* **顯示選項：** 選擇在桌面、行動裝置或兩者上顯示此小工具。

#### **位置**

您可以根據以下設定更改網站上小工具的位置：

* **對齊：** 指定您是否希望在網站的左下角或右下角顯示小工具。
* **垂直間距：** 指定小部件與螢幕底部之間的垂直間距量。
* **水平間距：** 指定小部件與螢幕邊緣之間的水平間距量。

#### **其他設定**

小部件的額外客製化：

* **隱藏 Respond.io 品牌：** 從您的小工具中刪除 respond.io 品牌。

## 刪除小工具

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3DMqeOcw4oNk6tMo9n1tXQ/6fc0f30860447ebccfa8c7dd80a4d21c/delete-widget.png?fm=avif&w=1000) 

若要刪除現有小工具，請點選 **刪除** 按鈕並依照螢幕上的指示進行操作。 這樣做將會從您的工作區中完全刪除該小工具。

> 從工作區中刪除小工具時要小心。 當刪除一個小部件時，它的所有配置都將被刪除。 刪除操作無法撤銷。

分享這篇文章

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/workspace-settings/growth-widgets)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/workspace-settings/growth-widgets)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/workspace-settings/growth-widgets)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/workspace-settings/growth-widgets)

## 

相關文章

* [呼叫了解如何管理您已連接的呼叫通道的呼叫配置。 ](/tw/help/workspace-settings/calls)
* [AI提示了解如何設置和配置 AI 提示。 ](/tw/help/workspace-settings/ai-prompts)
* [人工智慧輔助了解如何設定和配置 AI Assist。 ](/tw/help/workspace-settings/ai-assist)
* [生命週期了解如何在我們的平台上在整個銷售過程中追蹤和管理聯絡人。 ](/tw/help/workspace-settings/workspace-settings-lifecycle)
* [聯絡匯入了解如何在平台中匯入、審查和管理資料。 ](/tw/help/workspace-settings/data-import)

找不到您想要的東西？ 🔎

[聯繫支持](/tw/contact-us)

2025-12-05T04:04:30.420Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"建立和管理可嵌入您網站的小部件，以便網站訪客透過選擇的管道與您聯繫。","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/4GvzCieeTBRY4TRJUbIr4y/b92428e6b049d23f546269180534f7ea/Ryan_Tan_Avatar.svg","name":"Joshua Lim","url":"https://respond.io/tw/author"},"dateCreated":"2025-01-28T04:11:59.000Z","dateModified":"2025-04-04T10:14:25.056Z","datePublished":"2025-01-28T04:11:59.000Z","headline":"增長小部件","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif","mainEntityOfPage":"https://respond.io/tw/help/workspace-settings","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif","url":"https://respond.io/tw/help/workspace-settings/growth-widgets"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/tw/help","position":1},{"@type":"ListItem","name":"產品","item":"https://respond.io/tw/help/product","position":2},{"@type":"ListItem","name":"工作區設置","item":"https://respond.io/tw/help/workspace-settings","position":3},{"@type":"ListItem","name":"增長小部件","item":"https://respond.io/tw/help/workspace-settings/growth-widgets","position":4}]}]
```
