---
title: Embedding In Websites
---

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](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf).

## 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:

```javascript
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:

  ```css
  /* 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`:

  ```css
  #dify-chatbot-bubble-button {
      --dify-chatbot-bubble-button-bg-color: #ABCDEF;
  }
  ```

* **Use `containerProps`**

  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 config
    inputs: {
        name: 'apple',
    },
};
```

{/*
Contributing Section
DO NOT edit this section!
It will be automatically generated by the script.
*/}

---

[Edit this page](https://github.com/langgenius/dify-docs/edit/main/en/guides/application-publishing/embedding-in-websites.mdx) | [Report an issue](https://github.com/langgenius/dify-docs/issues/new?template=docs.yml)

