langgenius · tfia · Apr 24, 2025
diff --git a/en/guides/application-publishing/embedding-in-websites.md b/en/guides/application-publishing/embedding-in-websites.md
@@ -1,12 +1,33 @@
 # Embedding In Websites
 
-Dify Apps can be embedded in websites using an iframe. This allows you to integrate your Dify App into your website, blog, or any other web page.
+Dify supports embedding your AI application into your business website, enabling you to build an AI customer‑service chatbot, knowledge‑base Q&A, and other applications with business data in just minutes.
 
-When use Dify Chatbot Bubble Button embed in your website, you can customize the button style, position, and other settings.
+You can embed your AI application in three different ways: using an `<iframe>` tag, using a `<script>` tag, or installing the Dify Chrome extension.
+
+Click the **Embed** button on the WebApp card, copy the embed code, and paste it into the target location on your site.
+
+## Using the `<iframe>` Tag
+
+Copy the `<iframe>` code into the element on your site where the AI application should appear, such as a `<div>` or `<section>`.
+
+## Using the `<script>` Tag
+
+Copy the `<script>` code into your site’s `<head>` or `<body>` tag.  
+This will display a Dify chatbot bubble button on your site.
+
+If you paste the `<script>` code into the site’s `<body>`, you will get a full‑page AI chatbot:
+
+<figure><img src="../../.gitbook/assets/image (40) (1).png" alt=""><figcaption></figcaption></figure>
+
+## Installing the Dify Chrome Extension
+
+Follow the prompts to install the [Dify Chatbot Chrome extension](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf).
 
 ## Customizing the Dify Chatbot Bubble Button
 
-The Dify Chatbot Bubble Button can be customized through the following configuration options:
+When you embed the Dify chatbot bubble button (i.e., embedding via the `<script>` tag), you can customize the button’s style, position, and other settings.
+
+The Dify chatbot bubble button can be customized with the following configuration options:
 
 ```javascript
 window.difyChatbotConfig = {
@@ -38,105 +59,118 @@ window.difyChatbotConfig = {
 }
 ```
 
-## Overriding Default Button Styles
+### Overriding Default Button Styles
 
-You can override the default button style using CSS variables or the `containerProps` option. Apply these methods based on CSS specificity to achieve your desired customizations.
+You can override the default button styles using CSS variables or the `containerProps` option, according to CSS specificity rules.
 
-### 1.Modifying CSS Variables
+* **Modify CSS Variables**
 
-The following CSS variables are supported for customization:
+  The following CSS variables are supported:
 
-```css
-/* Button distance to bottom, default is `1rem` */
---dify-chatbot-bubble-button-bottom
+  ```css
+  /* Distance from bottom, default `1rem` */
+  --dify-chatbot-bubble-button-bottom
 
-/* Button distance to right, default is `1rem` */
---dify-chatbot-bubble-button-right
+  /* Distance from right, default `1rem` */
+  --dify-chatbot-bubble-button-right
 
-/* Button distance to left, default is `unset` */
---dify-chatbot-bubble-button-left
+  /* Distance from left, default `unset` */
+  --dify-chatbot-bubble-button-left
 
-/* Button distance to top, default is `unset` */
---dify-chatbot-bubble-button-top
+  /* Distance from top, default `unset` */
+  --dify-chatbot-bubble-button-top
 
-/* Button background color, default is `#155EEF` */
---dify-chatbot-bubble-button-bg-color
+  /* Background color, default `#155EEF` */
+  --dify-chatbot-bubble-button-bg-color
 
-/* Button width, default is `50px` */
---dify-chatbot-bubble-button-width
+  /* Width, default `50px` */
+  --dify-chatbot-bubble-button-width
 
-/* Button height, default is `50px` */
---dify-chatbot-bubble-button-height
+  /* Height, default `50px` */
+  --dify-chatbot-bubble-button-height
 
-/* Button border radius, default is `25px` */
---dify-chatbot-bubble-button-border-radius
+  /* Border radius, default `25px` */
+  --dify-chatbot-bubble-button-border-radius
 
-/* Button box shadow, default is `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
---dify-chatbot-bubble-button-box-shadow
+  /* Box shadow, default `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` */
+  --dify-chatbot-bubble-button-box-shadow
 
-/* Button hover transform, default is `scale(1.1)` */
---dify-chatbot-bubble-button-hover-transform
-```
+  /* Hover transform, default `scale(1.1)` */
+  --dify-chatbot-bubble-button-hover-transform
+  ```
 
-To change the background color to #ABCDEF, add this CSS:
+  Example: change background color to `#ABCDEF`:
 
-```css
-#dify-chatbot-bubble-button {
-    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
-}
-```
+  ```css
+  #dify-chatbot-bubble-button {
+      --dify-chatbot-bubble-button-bg-color: #ABCDEF;
+  }
+  ```
 
-### 2.Using `containerProps`
+* **Use `containerProps`**
 
-Set inline styles using the `style` attribute:
+  Inline style:
 
-```javascript
-window.difyChatbotConfig = {
-    // ... other configurations
-    containerProps: {
-        style: {
-            backgroundColor: '#ABCDEF',
-            width: '60px',
-            height: '60px',
-            borderRadius: '30px',
-        },
-        // For minor style overrides, you can also use a string value for the `style` attribute:
-        // style: 'background-color: #ABCDEF; width: 60px;',
-    },
-}
-```
+  ```javascript
+  window.difyChatbotConfig = {
+      // ...other config
+      containerProps: {
+          style: {
+              backgroundColor: '#ABCDEF',
+              width: '60px',
+              height: '60px',
+              borderRadius: '30px',
+          },
+          // For minor overrides, you can also use a string:
+          // style: 'background-color:#ABCDEF;width:60px;'
+      },
+  };
+  ```
 
-Apply CSS classes using the `className` attribute:
+  CSS class:
 
-```javascript
-window.difyChatbotConfig = {
-    // ... other configurations
-    containerProps: {
-        className: 'dify-chatbot-bubble-button-custom my-custom-class',
-    },
-}
-```
+  ```javascript
+  window.difyChatbotConfig = {
+      // ...other config
+      containerProps: {
+          className: 'dify-chatbot-bubble-button-custom my-custom-class',
+      },
+  };
+  ```
+
+## Passing `inputs` to the Embedded App
+
+You can pass initial inputs to your embedded AI application. Four input types are supported:
 
-### 3. Passing `inputs`
+1. **`text-input`**: Accepts any value; truncated if it exceeds the maximum length.
+2. **`paragraph`**: Similar to `text-input`; accepts any value and truncates if too long.
+3. **`number`**: Accepts a number or numeric string; strings are converted via `Number`.
+4. **`options`**: Accepts any value matching a pre‑configured option.
 
-There are four types of inputs supported:
+The method differs depending on whether you embed via `<iframe>` or `<script>`.
 
-1. **`text-input`**: Accepts any value. The input string will be truncated if its length exceeds the maximum allowed length.
-2. **`paragraph`**: Similar to `text-input`, it accepts any value and truncates the string if it's longer than the maximum length.
-3. **`number`**: Accepts a number or a numerical string. If a string is provided, it will be converted to a number using the `Number` function.
-4. **`options`**: Accepts any value, provided it matches one of the pre-configured options.
+Example: variable `name` with value `apple`.
 
-Example configuration:
+### Using the `<iframe>` Tag
+
+For `<iframe>` embedding, append the parameter to the URL:
+
+1. GZIP‑compress the value.
+2. Base64‑encode it.
+3. `encodeURIComponent` the result.
+
+Example result for `apple`:  
+`http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`
+
+### Using the `<script>` Tag
+
+For `<script>` embedding, pass inputs via the config:
 
 ```javascript
 window.difyChatbotConfig = {
-    // Other configuration settings...
+    // ...other config
     inputs: {
         name: 'apple',
     },
-}
+};
 ```
-
-Note: When using the embed.js script to create an iframe, each input value will be processed—compressed using GZIP and encoded in base64—before being appended to the URL.
-
-For example, the URL with processed input values will look like this: `http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D`