search

langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.
https://dify.ai
Other
53.76k stars 7.88k forks source link

iframe embbeding with inputs #11367

Closed Namec999 closed 3 hours ago

Namec999 commented 6 hours ago

Self Checks

Provide a description of requested docs changes

hello,

when embedding using an iframe how to pass custom inputs like :

user dev mode

can you write a sample code that i can test

dosubot[bot] commented 6 hours ago

To pass custom inputs such as "user" and "dev mode" when embedding using an iframe, you can define these inputs in the difyChatbotConfig object in your HTML file. Here's a sample code snippet for testing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed Chatbot</title>
    <style>
        /* Example of overriding default button styles */
        #dify-chatbot-bubble-button {
            --dify-chatbot-bubble-button-bg-color: #ABCDEF;
        }
    </style>
</head>
<body>
    <script>
        // Define the difyChatbotConfig with custom inputs
        window.difyChatbotConfig = {
            token: 'your-chatbot-token', // Replace with your actual chatbot token
            inputs: {
                user: 'exampleUser',
                devMode: 'true'
            },
            isDev: true, // Set to true for development mode
            baseUrl: 'https://your-custom-url.com', // Optional: specify a custom base URL
            draggable: true, // Optional: make the chat button draggable
            dynamicScript: true, // Ensure the script runs immediately
            containerProps: {
                style: {
                    backgroundColor: '#ABCDEF',
                    width: '60px',
                    height: '60px',
                    borderRadius: '30px',
                }
            }
        };
    </script>
    <script src="path/to/embed.js"></script> <!-- Ensure this script is included after the config -->
</body>
</html>

Replace 'your-chatbot-token' with your actual chatbot token. The inputs object contains the custom inputs "user" and "devMode" that you want to pass. The script will handle the compression and encoding of these inputs and include them in the iframe URL [1][2].

To continue talking to Dosu, mention @dosu.

Namec999 commented 6 hours ago

currently using an iframe

like :

<iframe src="http://localhost/chatbot/kBgjhKGD001bh" style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone">

using this how and where to add the difyChatbotConfig

also you need to know that i am embedidng this in my react app

best

dosubot[bot] commented 6 hours ago

To add the difyChatbotConfig when embedding a chatbot using an iframe in your React app, you need to define the configuration in your HTML file and ensure the embed.js script is included. Here's how you can do it:

  1. Define difyChatbotConfig in your HTML file:

    Add the following script in your HTML file before the embed.js script:

    <script>
 window.difyChatbotConfig = {
   token: 'your-chatbot-token', // Replace with your actual token
   baseUrl: 'https://your-base-url.com', // Optional: specify the base URL
   isDev: false, // Optional: set to true if using a development environment
   inputs: {
     user: 'exampleUser',
     devMode: 'true'
   },
   containerProps: {
     // Optional: customize the chat button container properties
   },
   draggable: true, // Optional: make the chat button draggable
   dragAxis: 'both' // Optional: specify the drag axis ('x', 'y', or 'both')
 };
</script>

  2. Include the embed.js script:

    Ensure the embed.js script is included after the <body> element in your HTML file:

    <body>
 <!-- Your React app root element -->
 <div id="root"></div>

 <!-- Include the embed.js script -->
 <script src="path/to/embed.js"></script>
</body>

  3. React Component Setup:

    In your React component, you can use the difyChatbotConfig to configure the iframe. Here's an example:

    import React from 'react';

function Chatbot() {
 React.useEffect(() => {
   // Ensure the script is loaded and the chatbot is embedded
   const script = document.createElement('script');
   script.src = 'path/to/embed.js';
   script.async = true;
   document.body.appendChild(script);

   return () => {
     document.body.removeChild(script);
   };
 }, []);

 return (
   <div>
     {/* Your React component content */}
   </div>
 );
}

export default Chatbot;

Replace 'your-chatbot-token' and 'path/to/embed.js' with your actual chatbot token and the correct path to the embed.js script. This setup ensures that the difyChatbotConfig is properly defined and the chatbot is embedded using the embed.js script [1][2].

To continue talking to Dosu, mention @dosu.

Namec999 commented 6 hours ago

this is perfect

i have my custom inputs that are generated by my react jsx code, and then cannot add them in index.html

how to set window.difyChatbotConfig inside my react component like this one :

import React from 'react';

function Chatbot() { React.useEffect(() => { // Ensure the script is loaded and the chatbot is embedded const script = document.createElement('script'); script.src = 'path/to/embed.js'; script.async = true; document.body.appendChild(script);

return () => {
  document.body.removeChild(script);
};

}, []);

return (

{/* Your React component content */}

); }

export default Chatbot;

dosubot[bot] commented 6 hours ago

To set window.difyChatbotConfig inside your React component when your custom inputs are generated by your React JSX code, you can define the configuration object within a useEffect hook. This ensures it is set when the component mounts. Here's how you can do it:

import React, { useEffect } from 'react';

function Chatbot() {
  useEffect(() => {
    // Set the difyChatbotConfig with custom inputs
    window.difyChatbotConfig = {
      token: 'your-chatbot-token', // Replace with your actual token
      baseUrl: 'https://your-base-url.com', // Optional: specify the base URL
      isDev: false, // Optional: set to true if using a development environment
      inputs: {
        user: 'exampleUser', // Example of a custom input
        devMode: 'true' // Example of another custom input
      },
      containerProps: {
        // Optional: customize the chat button container properties
        style: {
          backgroundColor: '#ABCDEF',
          width: '60px',
          height: '60px',
          borderRadius: '30px',
        }
      },
      draggable: true, // Optional: make the chat button draggable
      dragAxis: 'both' // Optional: specify the drag axis ('x', 'y', or 'both')
    };

    // Ensure the script is loaded and the chatbot is embedded
    const script = document.createElement('script');
    script.src = 'path/to/embed.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      {/* Your React component content */}
    </div>
  );
}

export default Chatbot;

Replace 'your-chatbot-token' and 'path/to/embed.js' with your actual chatbot token and the correct path to the embed.js script. This setup allows you to dynamically set the difyChatbotConfig within your React component [1][2][3].

To continue talking to Dosu, mention @dosu.