Implementation:Langgenius Dify Embed Widget

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Embedding, ChatWidget
Last Updated	2026-02-12 07:00 GMT

Overview

Self-contained JavaScript widget that embeds a Dify chatbot as a floating bubble button and iframe on third-party websites.

Description

web/public/embed.js is a self-executing IIFE (Immediately Invoked Function Expression) designed to be included as a <script> tag on external websites. It reads a global configuration object (window.difyChatbotConfig) and renders an interactive chatbot widget. Key features include:

Configuration-driven: Reads difyChatbotConfig from the host page, requiring at minimum a token property. Supports optional baseUrl, isDev, inputs, systemVariables, userVariables, draggable, dragAxis, containerProps, and dynamicScript.
Bubble button: Creates a fixed-position circular button (default 48px, blue background) with open/close SVG icons. The button is styled via CSS custom properties (e.g., --dify-chatbot-bubble-button-bottom, --dify-chatbot-bubble-button-right).
Iframe chat window: Loads the chatbot UI in an iframe pointing to {baseUrl}/chatbot/{token}. The iframe is preloaded on page load but hidden by default. It supports both a compact mode (24rem wide, 43.75rem tall) and an expanded mode (48% width, 88% height) toggled via postMessage.
Input compression: User inputs, system variables, and user variables are compressed using gzip via CompressionStream and base64-encoded before being passed as URL query parameters.
Drag support: Optional draggable functionality allowing the bubble button to be repositioned along x, y, or both axes. Includes touch event support for mobile devices.
Keyboard accessibility: ESC key closes the chat window.
PostMessage communication: Listens for dify-chatbot-iframe-ready and dify-chatbot-expand-change messages from the iframe, and sends dify-chatbot-config back with button toggle and drag state.
Responsive positioning: Automatically positions the iframe above or below, left or right of the button based on viewport center calculations.

Usage

Include this script on any website after the <body> element, with the global difyChatbotConfig object defined beforehand.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/public/embed.js
Lines: 1-455

Signature

// Global configuration object expected on the host page:
window.difyChatbotConfig = {
  token: string,           // Required: chatbot token
  baseUrl?: string,        // Optional: API base URL
  isDev?: boolean,         // Optional: use dev environment
  inputs?: Record<string, string>,
  systemVariables?: Record<string, string>,
  userVariables?: Record<string, string>,
  draggable?: boolean,
  dragAxis?: 'x' | 'y' | 'both',
  containerProps?: Record<string, any>,
  dynamicScript?: boolean,
}

// Key internal functions:
async function embedChatbot()
function createIframe(): HTMLIFrameElement
function createButton(): void
function enableDragging(element: HTMLElement, axis: string): void
function resetIframePosition(): void
function toggleExpand(): void

Import

<!-- On the host website -->
<script>
  window.difyChatbotConfig = { token: 'YOUR_CHATBOT_TOKEN' }
</script>
<script src="https://your-dify-instance.com/embed.js"></script>

I/O Contract

Inputs

Name	Type	Required	Description
token	string	Yes	Chatbot identifier token from Dify settings
baseUrl	string	No	Base URL for the Dify instance (defaults to udify.app)
isDev	boolean	No	Whether to use dev subdomain
inputs	Record<string, string>	No	Pre-filled input variables for the chatbot
systemVariables	Record<string, string>	No	System-level variables (prefixed with sys.)
userVariables	Record<string, string>	No	User-level variables (prefixed with user.)
draggable	boolean	No	Enable drag-to-reposition on the bubble button
dragAxis	'y' \| 'both'	No	Restrict drag direction
containerProps	Record<string, any>	No	Custom properties applied to the button container element
dynamicScript	boolean	No	If true, runs embedChatbot immediately instead of on body load

Outputs

Name	Type	Description
DOM elements	HTMLElement	A floating button (#dify-chatbot-bubble-button) and iframe (#dify-chatbot-bubble-window) appended to document.body
PostMessage events	MessageEvent	Sends dify-chatbot-config to iframe; listens for expand-change

Usage Examples

Basic Embedding

<script>
  window.difyChatbotConfig = {
    token: 'abc123',
    baseUrl: 'https://dify.example.com'
  }
</script>
<script src="https://dify.example.com/embed.js"></script>

With Draggable and Inputs

<script>
  window.difyChatbotConfig = {
    token: 'abc123',
    draggable: true,
    dragAxis: 'both',
    inputs: { user_name: 'John' },
    systemVariables: { locale: 'en-US' }
  }
</script>
<script src="https://dify.example.com/embed.js"></script>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment