Skip to main content

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

Info

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

Chat Bubble Widget#

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:

Get your embed token

In your Dify app, open the Access Point tab and click Embed Into Site on the Web App card 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:

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:

Responsive Design:

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.

Advanced Configuration#

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:

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

2. Use containerProps#

Set inline styles using the style attribute:

Apply CSS classes using the className attribute:

3. Pass 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:

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

Troubleshooting#

Widget not appearing:

  • Verify your app token matches what’s shown under Embed Into Site on the app’s Access Point tab
  • 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
Warning

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