centersl/dify-docs
1
0
Fork 0
mirror of https://github.com/langgenius/dify-docs.git synced 2026-03-26 13:18:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update embedding in websites guide (en), add example

Browse Source
This commit is contained in:
tfia
2025-08-05 18:18:04 +08:00
parent 0e30663ebb
commit 39f92b9ed3
1 changed files with 122 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
en/guides/application-publishing/embedding-in-websites.mdx
View File

@@ -2,14 +2,34 @@
title: Embedding In Websites
---
# 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.
## 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 = {
@@ -25,131 +45,138 @@ window.difyChatbotConfig = {
draggable: false,
// Optional, The axis along which the button is allowed to be dragged, default is `both`, can be `x`, `y`, `both`
dragAxis: 'both',
// Optional, An object of system variables that set in the dify chatbot
systemVariables: {
// key is the system variable name
// e.g.
// user_id: "YOU CAN DEFINE USER ID HERE",
// conversation_id: "YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID"
},
// Optional, An object of inputs that set in the dify chatbot
inputs: {
// key is the variable name
// e.g.
// name: "NAME"
},
// Optional, An object of system variables that set in the dify chatbot
systemVariables: {
// e.g.
// user_id: 'USER_ID',
// conversation_id: 'CONVERSATION_ID',
},
// Optional, An object of user variables that set in the dify chatbot
userVariables: {
// e.g.
// avatar_url: 'AVATAR_URL',
// name: 'NAME',
},
}
}
```
## 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 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;'
},
};
```
CSS 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:
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.
The method differs depending on whether you embed via `<iframe>` or `<script>`.
Example: variable `name` with value `apple`.
### 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 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;',
},
}
```
Apply CSS classes using the `className` attribute:
```javascript
window.difyChatbotConfig = {
// ... other configurations
containerProps: {
className: 'dify-chatbot-bubble-button-custom my-custom-class',
},
}
```
### 3. Passing `inputs`
There are four types of inputs supported:
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 configuration:
```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`
{/*
Contributing Section
DO NOT edit this section!