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. When use Dify Chatbot Bubble Button embed in your website, you can customize the button style, position, and other settings.

1 · Copy the embed snippet from Dify

  1. Open your app in Dify Console → Publishing → Embed.

  2. Choose “Bubble Button (script tag)” and click Copy.

    The snippet contains two parts:

<script>
  window.difyChatbotConfig = {
    token: 'YOUR_TOKEN',          // required
    baseUrl: '<https://udify.app>', // change if self-hosting
    /* …optional props… */
  };
</script>

<script src="<https://udify.app/embed.min.js>"
        id="YOUR_TOKEN"
        defer></script>
``` :contentReference[oaicite:0]{index=0}

> **Where to paste?**
> Put both blocks just before `</body>` (recommended) or in `<head>` if you want the bubble to appear as soon as the page loads.

---

### 2 · Understand the `difyChatbotConfig` options

| Key | Purpose | Default |
|-----|---------|---------|
| `token` | App-specific token copied from Dify | – |
| `baseUrl` | Your Dify endpoint (`https://udify.app` for cloud or `https://chat.example.com` when self-hosted) | auto-filled |
| `isDev` | Use dev environment | `false` |
| `containerProps` | Any valid HTML attributes (e.g. `style`, `className`) | `{}` |
| `draggable` | Let users drag the bubble | `false` |
| `dragAxis` | Limit drag to `"x"`, `"y"` or `"both"` | `"both"` |
| `inputs` | Pre-fill app variables | `{}` |
| `systemVariables` | Pass `user_id`, `conversation_id`, … | `{}` |
| `userVariables` | e.g. `avatar_url`, `name` | `{}` | :contentReference[oaicite:1]{index=1}

---

### 3 · Styling the bubble button

#### 3.1 CSS variables (quick & global)

Add overrides anywhere in your site’s CSS:

```css
/* Move bubble 2 rem from bottom and recolor */
#dify-chatbot-bubble-button {
  --dify-chatbot-bubble-button-bottom: 2rem;
  --dify-chatbot-bubble-button-bg-color: #ff5722;
}

Supported variables include position (bottom, right, left, top), size (width, height), color, radius, shadow and hover transform. Dify Docs

3.2 containerProps (inline & granular)

window.difyChatbotConfig = {
  …,
  containerProps: {
    style: { width: '60px', height: '60px', borderRadius: '30px' },
    className: 'my-chat-bubble'
  }
}
``` :contentReference[oaicite:3]{index=3}

---

### 4 · Passing data into the conversation

```html
window.difyChatbotConfig = {
  …,
  inputs:   { product: 'Macan GTS' },    // visible to prompt
  systemVariables: { user_id: 'U123' },  // hidden system vars
  userVariables:   { name: 'Hien' }      // shown in UI
};

Values are GZIP-compressed & base64-encoded, then appended to the iframe URL automatically. Dify Docs

5 · Inline “full-width” embed (optional)

If you’d rather place the chat inside your page instead of a floating bubble:

<iframe src="<https://udify.app/chatbot/YOUR_TOKEN>"
        style="width:100%;height:640px;border:0;"
        allow="microphone"></iframe>

Use this inside any container (<div>, <section>, etc.). Positioning and styling follow normal CSS rules. Dify Docs

6 · Self-hosting checklist

  1. Expose your Dify instance at https://chat.example.com.
  2. Change baseUrl and the second <script> src to that domain:
baseUrl: '<https://chat.example.com>'
<script src="<https://chat.example.com/embed.min.js>" …></script>
  1. Verify CORS headers allow your site to load embed.min.js.