langgenius · tfia · Apr 24, 2025
diff --git a/zh_CN/guides/application-publishing/embedding-in-websites.md b/zh_CN/guides/application-publishing/embedding-in-websites.md
@@ -1,24 +1,33 @@
 # 嵌入网站
 
-Dify 支持将你的 AI 应用嵌入到业务网站中，你可以使用该能力在几分钟内制作具有业务数据的官网 AI 客服、业务知识问答等应用。点击 WebApp 卡片上的嵌入按钮，复制嵌入代码，粘贴到你网站的目标位置。
+Dify 支持将你的 AI 应用嵌入到业务网站中，你可以使用该能力在几分钟内制作具有业务数据的官网 AI 客服、业务知识问答等应用。
 
-当你在网站中使用 Dify 聊天机器人气泡按钮时，你可以自定义按钮的样式、位置和其他设置。
+可以使用 3 种不同的方式将你的 AI 应用嵌入网站，分别为 `<iframe>` 标签方式，`<script>` 标签方式，和安装 Dify Chrome 浏览器扩展方式。
 
-*   **iframe 标签方式**
+点击 WebApp 卡片上的嵌入按钮，复制嵌入代码，粘贴到你网站的目标位置。
 
-    将 iframe 代码复制到你网站用于显示 AI 应用的标签中，如 `<div>`、`<section>` 等标签。
-*   **script 标签方式**
+## 使用 `<iframe>` 标签方式
 
-    将 script 代码复制到你网站 `<head>` 或 `<body>` 标签中。
+将 `<iframe>` 代码复制到你网站用于显示 AI 应用的标签中，如 `<div>`、`<section>` 等标签。
 
-    <figure><img src="../../.gitbook/assets/image (69) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (69) (1).png" alt=""><figcaption></figcaption></figure>
 
-    如果将 script 代码粘贴到官网的 `<body>` 处，你将得到一个官网 AI 机器人：
+## 使用 `<script>` 标签方式
 
-    <figure><img src="../../.gitbook/assets/image (40) (1).png" alt=""><figcaption></figcaption></figure>
+将 `<script>` 代码复制到你网站 `<head>` 或 `<body>` 标签中。这会在你的网站上显示一个 Dify 聊天机器人气泡按钮。
+
+如果将 `<script>` 代码粘贴到官网的 `<body>` 处，你将得到一个官网 AI 机器人：
+
+<figure><img src="../../.gitbook/assets/image (40) (1).png" alt=""><figcaption></figcaption></figure>
+
+## 安装 Dify Chrome 浏览器扩展方式
+
+按照提示，安装 [Dify Chrome 浏览器扩展](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf)。
 
 ## 自定义 Dify 聊天机器人气泡按钮
 
+当你在网站中使用 Dify 聊天机器人气泡按钮时（即，使用 `<script>` 标签方式将你的 AI 应用嵌入网站），你可以自定义按钮的样式、位置和其他设置。
+
 Dify 聊天机器人气泡按钮可以通过以下配置选项进行自定义：
 
 ```javascript
@@ -51,95 +60,109 @@ window.difyChatbotConfig = {
 };
 ```
 
-## 覆盖默认按钮样式
+### 覆盖默认按钮样式
 
 你可以使用 CSS 变量或 `containerProps` 选项来覆盖默认按钮样式。根据 CSS 优先级使用这些方法实现自定义样式。
 
-### 1.修改 CSS 变量
-
-支持以下 CSS 变量进行自定义：
-
-```css
-/* 按钮距离底部的距离，默认为 `1rem` */
---dify-chatbot-bubble-button-bottom
-
-/* 按钮距离右侧的距离，默认为 `1rem` */
---dify-chatbot-bubble-button-right
-
-/* 按钮距离左侧的距离，默认为 `unset` */
---dify-chatbot-bubble-button-left
-
-/* 按钮距离顶部的距离，默认为 `unset` */
---dify-chatbot-bubble-button-top
-
-/* 按钮背景颜色，默认为 `#155EEF` */
---dify-chatbot-bubble-button-bg-color
-
-/* 按钮宽度，默认为 `50px` */
---dify-chatbot-bubble-button-width
-
-/* 按钮高度，默认为 `50px` */
---dify-chatbot-bubble-button-height
-
-/* 按钮边框半径，默认为 `25px` */
---dify-chatbot-bubble-button-border-radius
-
-/* 按钮盒阴影，默认为 `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
---dify-chatbot-bubble-button-box-shadow
-
-/* 按钮悬停变换，默认为 `scale(1.1)` */
---dify-chatbot-bubble-button-hover-transform
-```
+*   **修改 CSS 变量**
+
+    支持以下 CSS 变量进行自定义：
+
+    ```css
+    /* 按钮距离底部的距离，默认为 `1rem` */
+    --dify-chatbot-bubble-button-bottom
+
+    /* 按钮距离右侧的距离，默认为 `1rem` */
+    --dify-chatbot-bubble-button-right
+
+    /* 按钮距离左侧的距离，默认为 `unset` */
+    --dify-chatbot-bubble-button-left
+
+    /* 按钮距离顶部的距离，默认为 `unset` */
+    --dify-chatbot-bubble-button-top
+
+    /* 按钮背景颜色，默认为 `#155EEF` */
+    --dify-chatbot-bubble-button-bg-color
+
+    /* 按钮宽度，默认为 `50px` */
+    --dify-chatbot-bubble-button-width
+
+    /* 按钮高度，默认为 `50px` */
+    --dify-chatbot-bubble-button-height
+
+    /* 按钮边框半径，默认为 `25px` */
+    --dify-chatbot-bubble-button-border-radius
+
+    /* 按钮盒阴影，默认为 `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
+    --dify-chatbot-bubble-button-box-shadow
+
+    /* 按钮悬停变换，默认为 `scale(1.1)` */
+    --dify-chatbot-bubble-button-hover-transform
+    ```
+
+    例如，要将按钮背景颜色更改为 #ABCDEF，请添加以下 CSS：
+
+    ```css
+    #dify-chatbot-bubble-button {
+        --dify-chatbot-bubble-button-bg-color: #ABCDEF;
+    }
+    ```
+
+*   **使用 `containerProps` 选项**
+
+    使用 `style` 属性设置内联样式：
+
+    ```javascript
+    window.difyChatbotConfig = {
+        // ... 其他配置
+        containerProps: {
+            style: {
+                backgroundColor: '#ABCDEF',
+                width: '60px',
+                height: '60px',
+                borderRadius: '30px',
+            },
+            // 对于较小的样式覆盖，也可以使用字符串作为 `style` 属性的值：
+            // style: 'background-color: #ABCDEF; width: 60px;',
+        },
+    }
+    ```
+
+    使用 `className` 属性应用 CSS 类：
+
+    ```javascript
+    window.difyChatbotConfig = {
+        // ... 其他配置
+        containerProps: {
+            className: 'dify-chatbot-bubble-button-custom my-custom-class',
+        },
+    };
+    ```
 
-例如，要将按钮背景颜色更改为 #ABCDEF，请添加以下 CSS：
+## 向嵌入网站的应用传递 `inputs`
 
-```css
-#dify-chatbot-bubble-button {
-    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
-}
-```
+你可以向嵌入你的网站的 AI 应用传递初始输入。支持四种类型的输入：
 
-### 2.使用 `containerProps` 选项
+1. **`text-input`**：接受任何值。如果输入字符串的长度超过允许的最大长度，将被截断。
+2. **`paragraph`**：类似于 `text-input`，接受任何值并在字符串长度超过最大长度时截断。
+3. **`number`**：接受数字或数字字符串。如果提供的是字符串，将使用 `Number` 函数将其转换为数字。
+4. **`options`**：接受任何值，前提是它匹配预先配置的选项之一。
 
-使用 `style` 属性设置内联样式：
+使用 `<iframe>` 标签方式和使用 `<script>` 标签方式将 AI 应用嵌入网站时，传递 `inputs` 的方法亦有所不同。
 
-```javascript
-window.difyChatbotConfig = {
-    // ... 其他配置
-    containerProps: {
-        style: {
-            backgroundColor: '#ABCDEF',
-            width: '60px',
-            height: '60px',
-            borderRadius: '30px',
-        },
-        // 对于较小的样式覆盖，也可以使用字符串作为 `style` 属性的值：
-        // style: 'background-color: #ABCDEF; width: 60px;',
-    },
-}
-```
+以下以传入变量名为 `name`，值为 `apple` 的情形为例。
 
-使用 `className` 属性应用 CSS 类：
+### 使用 `<iframe>` 标签方式
 
-```javascript
-window.difyChatbotConfig = {
-    // ... 其他配置
-    containerProps: {
-        className: 'dify-chatbot-bubble-button-custom my-custom-class',
-    },
-};
-```
+如果你的 AI 应用是使用 `<iframe>` 标签方式嵌入网站的，你可以通过向其 URL 追加参数的方式传递 `inputs`。
 
-### 3. 传递 `inputs`
+你需要将传入变量的值先使用 GZIP 压缩，并以 base64 编码，再将得到的 base64 值使用 encodeURIComponent 编码，最后附加到 URL 上。
 
-支持四种类型的输入：
+例如，变量名为 `name`，值为 `apple`，首先压缩 `apple`，得到 base64 编码 `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA==`，再使用 encodeURIComponent 编码得到 `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。最后的输入值 URL 将如下所示： `http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。
 
-1. **`text-input`**：接受任何值。如果输入字符串的长度超过允许的最大长度，将被截断。
-2. **`paragraph`**：类似于 `text-input`，接受任何值并在字符串长度超过最大长度时截断。
-3. **`number`**：接受数字或数字字符串。如果提供的是字符串，将使用 `Number` 函数将其转换为数字。
-4. **`options`**：接受任何值，前提是它匹配预先配置的选项之一。
+### 使用 `<script>` 标签方式
 
-示例配置：
+如果你的 AI 应用是使用 `<script>` 标签方式嵌入网站的，则只需要通过前文提到的配置选项即可传递 `inputs`。示例配置：
 
 ```javascript
 window.difyChatbotConfig = {
@@ -149,7 +172,3 @@ window.difyChatbotConfig = {
     },
 }
 ```
-
-注意：使用 embed.js 脚本创建 iframe 时，每个输入值将被处理——使用 GZIP 压缩并以 base64 编码——然后附加到 URL 上。
-
-例如，处理后的输入值 URL 将如下所示： `http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D`