Skip to main content
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. 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.

​
Customizing the Dify Chatbot Bubble Button

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: 
window.difyChatbotConfig = {
    // Required, automatically generated by Dify
    token: 'YOUR_TOKEN',
    // Optional, default is false
    isDev: false,
    // Optional, when isDev is true, default is 'https://dev.udify.app', otherwise default is 'https://udify.app'
    baseUrl: 'YOUR_BASE_URL',
    // Optional, It can accept any valid HTMLElement attribute other than `id`, such as `style`, `className`, etc
    containerProps: {},
    // Optional, If or not the button is allowed to be dragged, default is `false`
    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"
    }
}

​
Overriding Default Button Styles

You can override the default button styles using CSS variables or the containerProps option, according to CSS specificity rules.
  • Modify CSS Variables The following CSS variables are supported: 
    /* Distance from bottom, default `1rem` */
--dify-chatbot-bubble-button-bottom

/* Distance from right, default `1rem` */
--dify-chatbot-bubble-button-right

/* Distance from left, default `unset` */
--dify-chatbot-bubble-button-left

/* Distance from top, default `unset` */
--dify-chatbot-bubble-button-top

/* Background color, default `#155EEF` */
--dify-chatbot-bubble-button-bg-color

/* Width, default `50px` */
--dify-chatbot-bubble-button-width

/* Height, default `50px` */
--dify-chatbot-bubble-button-height

/* Border radius, default `25px` */
--dify-chatbot-bubble-button-border-radius

/* Box shadow, default `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` */
--dify-chatbot-bubble-button-box-shadow

/* Hover transform, default `scale(1.1)` */
--dify-chatbot-bubble-button-hover-transform
    Example: change background color to #ABCDEF: 
    #dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}
  • Use containerProps Inline style: 
    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: 
    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: 
window.difyChatbotConfig = {
    // ...other config
    inputs: {
        name: 'apple',
    },
};