Embed Your Web App

Your published web app can be embedded directly into any website. This isn’t a separate publishing method: it’s how you deploy the same web app you’ve already created, just presented within your existing website instead of as a standalone page.

How Web App Embedding Works

When you publish an app in Dify, you get a web app URL. You can share this URL directly, or embed the same app into your website using these methods:

Chat Bubble Widget

Your web app as a floating button that visitors click to open the full interface

Iframe Integration

Your web app embedded directly in page content, always visible and ready

JavaScript Control

Advanced embedding with custom styling and behavior control

Responsive Design

Same web app adapts automatically to any presentation format

All embedding methods use your published web app. Changes to your app configuration automatically apply everywhere it’s embedded.

The chat bubble presents your web app as a floating button. Visitors click it to open your app in an overlay, keeping them on your page while accessing your AI features.

Configuration Options

The chat bubble can be customized through the difyChatbotConfig object:

window.difyChatbotConfig = {
    // Required: Your app's token from Dify
    token: 'YOUR_TOKEN',
    
    // Optional: Environment settings
    isDev: false,
    baseUrl: 'https://udify.app', // Auto-set based on isDev
    
    // Optional: Visual customization
    containerProps: {
        style: {
            right: '20px',
            bottom: '20px'
        },
        className: 'custom-chat-button'
    },
    
    // Optional: Interactive behavior  
    draggable: false,              // Allow users to drag the button
    dragAxis: 'both',             // 'x', 'y', or 'both'
    
    // Optional: Pre-fill user context
    inputs: {
        name: "John Doe",          // Variable names from your Dify app
        department: "Support"
    },
    
    // Optional: System variables for tracking
    systemVariables: {
        user_id: 'USER_123',
        conversation_id: 'CONV_456'
    },
    
    // Optional: User profile information
    userVariables: {
        avatar_url: 'https://example.com/avatar.jpg',
        name: 'John Doe'
    }
}

Get your embed token

In your Dify app, go to Publish → Embed to find your unique token.

Add the script

Include the configuration and Dify’s embed script in your website’s HTML.

Customize appearance

Adjust the containerProps to match your website’s design.

Test functionality

Open your website and try the chat button to ensure everything works correctly.

Iframe Integration

Embed your web app directly into your page content. This displays your app as an integral part of your website:

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

Why Use Iframe Embedding

Always visible - Your web app is immediately accessible, not hidden behind a button
Full functionality - Everything from your web app works identically in the iframe
Page integration - Appears as native content, not an overlay
Simple setup - Just HTML, no JavaScript configuration needed

Customization Options

Size and Position:

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="400px" 
  height="500px"
  style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>

Responsive Design:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="https://udify.app/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

Choose Your Embedding Method

Customer Support Apps

Chat bubble works best, staying out of the way until needed. The floating button lets visitors continue browsing while having quick access to help.

Form & Workflow Apps

Iframe embed for dedicated pages where the app is the main content. Visitors see and use your app immediately without extra clicks.

Product Demonstrations

Iframe embed on landing pages to let visitors try your AI capabilities instantly. No barriers between interest and engagement.

Multi-page Integration

Chat bubble when you want the same app accessible across your entire site. One embed code provides access from every page.

Troubleshooting

Widget not appearing:

Verify your app token matches what’s shown in Dify’s Publish → Embed section
Check that configuration loads before the embed script
Look for JavaScript errors in browser console

Iframe not loading:

Confirm the web app URL includes your correct token
Ensure your site allows iframe content (check Content Security Policy)
Both your site and Dify app should use HTTPS

Your web app must be published before embedding. If you update your app configuration, republish to see changes in embedded versions.

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.

1. Modify CSS Variables

The following CSS variables are supported for customization:

/* Button distance to bottom, default is `1rem` */
--dify-chatbot-bubble-button-bottom

/* Button distance to right, default is `1rem` */
--dify-chatbot-bubble-button-right

/* Button distance to left, default is `unset` */
--dify-chatbot-bubble-button-left

/* Button distance to top, default is `unset` */
--dify-chatbot-bubble-button-top

/* Button background color, default is `#155EEF` */
--dify-chatbot-bubble-button-bg-color

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

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

/* Button border radius, default is `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

/* Button hover transform, default is `scale(1.1)` */
--dify-chatbot-bubble-button-hover-transform

To change the background color to #ABCDEF, add this CSS:

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

2. Use `containerProps`

Set inline styles using the style attribute:

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:

window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        className: 'dify-chatbot-bubble-button-custom my-custom-class',
    },
}

3. Pass `inputs`

There are four types of inputs supported:

text-input: Accepts any value. The input string will be truncated if its length exceeds the maximum allowed length.
paragraph: Similar to text-input, it accepts any value and truncates the string if it’s longer than the maximum length.
number: Accepts a number or a numerical string. If a string is provided, it will be converted to a number using the Number function.
options: Accepts any value, provided it matches one of the pre-configured options.

Example configuration:

window.difyChatbotConfig = {
    // Other configuration settings...
    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

​How Web App Embedding Works

Chat Bubble Widget

Iframe Integration

JavaScript Control

Responsive Design

​Chat Bubble Widget

​Configuration Options

​Iframe Integration

​Why Use Iframe Embedding

​Customization Options

​Choose Your Embedding Method

​Troubleshooting

​1. Modify CSS Variables

​2. Use containerProps

​3. Pass inputs

How Web App Embedding Works

Chat Bubble Widget

Configuration Options

Iframe Integration

Why Use Iframe Embedding

Customization Options

Choose Your Embedding Method

Troubleshooting

1. Modify CSS Variables

2. Use `containerProps`

3. Pass `inputs`