[帮助] 需要帮助将网站参数解析并嵌入到 Dify Chatflow(通过 iFrame 嵌入)

image

image

iframe

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Chatbot</title>
</head>
<body>
    <h1>Iframe Chatbot</h1>
    
    <script>
        // 定义要编码的变量
        const inputs = {
            "user_name": "Tom"
        };

        // 编码函数
        async function compressAndEncode(input) {
            const uint8Array = new TextEncoder().encode(input);
            const compressedStream = new Response(
                new Blob([uint8Array])
                    .stream()
                    .pipeThrough(new CompressionStream("gzip"))
            ).arrayBuffer();
            const compressedUint8Array = new Uint8Array(await compressedStream);
            return btoa(String.fromCharCode(...compressedUint8Array));
        }

        // 生成编码后的 URL
        (async () => {
            const params = new URLSearchParams();
            for (const [key, value] of Object.entries(inputs)) {
                params.append(key, await compressAndEncode(value));
            }

            const baseUrl = "http://localhost/chatbot/nF6Zbpsxk2Hc5vxE";
            const iframeUrl = `${baseUrl}?${params.toString()}`;

            // 更新 iframe 的 src
            document.querySelector("iframe").src = iframeUrl;
        })();
    </script>
    
    <iframe
      src="about:blank"
      style="width: 100%; height: 100%; min-height: 700px"
      frameborder="0"
      allow="microphone">
    </iframe>
</body>
</html>

script

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Chatbot</title>
</head>
<body>
    <h1>Script Chatbot</h1>
    
    <script>
      window.difyChatbotConfig = {
        token: 'nF6Zbpsxk2Hc5vxE',
        baseUrl: 'http://localhost',
        inputs: {
        // 可在此处定义来自开始节点的输入
        // key 是变量名
          user_name: "Tom"
        }
      }
    </script>
    <script
      src="http://localhost/embed.min.js"
      id="nF6Zbpsxk2Hc5vxE"
      defer>
    </script>
</body>
</html>