Implementation:Infiniflow Ragflow EmbedAppModal Component

Knowledge Sources	RAGFlow
Domains	Frontend_Architecture, Search
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete frontend component for generating iframe embed code for search applications provided by RAGFlow's EmbedAppModal.

Description

The EmbedAppModal React component generates an iframe HTML snippet that embeds the search application's share page. It constructs the URL with parameters: shared_id, from, auth (API token), tenantId, and optional hideAvatar and locale. Users can copy the generated code to clipboard.

Usage

Accessed via the "Embed" button on the search application page.

Code Reference

Source Location

Repository: ragflow
File: web/src/pages/next-search/embed-app-modal.tsx
Lines: L23-149

Signature

interface EmbedAppModalProps {
    token: string;       // Search app ID
    visible: boolean;    // Modal visibility
    hideModal: () => void;
}

function EmbedAppModal({ token, visible, hideModal }: EmbedAppModalProps) {
    // Generates: <iframe src="${origin}/next-search/share?shared_id=${token}&from=Search&auth=${beta}&tenantId=${tenantId}"
    //             style="width:100%;height:100%;min-height:600px" frameborder="0"></iframe>
}

Import

import EmbedAppModal from '@/pages/next-search/embed-app-modal';

I/O Contract

Inputs

Name	Type	Required	Description
token	string	Yes	Search application ID
visible	boolean	Yes	Modal visibility state

Outputs

Name	Type	Description
iframe HTML	string	Copyable iframe embed code

Usage Examples

import EmbedAppModal from '@/pages/next-search/embed-app-modal';

function SearchPage() {
    const [showEmbed, setShowEmbed] = useState(false);

    return (
        <>
            <Button onClick={() => setShowEmbed(true)}>Embed</Button>
            <EmbedAppModal
                token={searchId}
                visible={showEmbed}
                hideModal={() => setShowEmbed(false)}
            />
        </>
    );
}

Related Pages

Implements Principle

Page Connections

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

Principle

Implementation

Heuristic

Environment