Embedding in an Iframe is not possible #25

New Issue

2026-02-16T10:15:51-05:00

yindo commented

2026-02-16 10:15:51 -05:00

Originally created by @veserai on GitHub (Apr 9, 2024).

The standard dify-web docker container allows to embed the Chatbot in an Iframe on a website.
As I needed to customize the frontend, I followed the instructions and deployed the webapp-conversations frontend on vercel.
It runs perfectly when I open the Vercel URL directly. As soon as I embed it into an Iframe, I always get the error, that the chatbot is still responding, when I try to send a second message.

Already tested:

Using a Reverseproxy in front of Vercel
Using Browser Dev Tools to find possible CORS Errors ect.
Using other Browsers: Chrome, Safari -> Not working, Firefox-> Working

Originally created by @veserai on GitHub (Apr 9, 2024). The standard dify-web docker container allows to embed the Chatbot in an Iframe on a website. As I needed to customize the frontend, I followed the instructions and deployed the webapp-conversations frontend on vercel. It runs perfectly when I open the Vercel URL directly. As soon as I embed it into an Iframe, I always get the error, that the chatbot is still responding, when I try to send a second message. ![error_chatbot](https://github.com/langgenius/webapp-conversation/assets/164884418/f8ead5cc-8e45-42fb-adc3-82cc1c32b2af) Already tested: - Using a Reverseproxy in front of Vercel - Using Browser Dev Tools to find possible CORS Errors ect. - Using other Browsers: Chrome, Safari -> Not working, Firefox-> Working

yindo closed this issue

2026-02-16 10:15:51 -05:00

yindo commented

2026-02-16 10:15:51 -05:00

@veserai commented on GitHub (Apr 11, 2024):

I was able to fix it on my own. The problem was: /app/compontents/index.tsx: The "oncompleted" function fails while fetching the conversations.id . Therefore the bot never reaches the state, where the "setResponsingFalse()" is set.
I rewrote the async onCompleted like this:

async onCompleted(hasError?: boolean) {
        // Immediately set the chatbot as not responding, regardless of potential errors in fetching conversations
        setResponsingFalse();
        
        if (hasError) {
          return; // Early return if there was an error in the chat message operation
        }

        try {
          // Attempt to fetch all conversations and generate a new name for the conversation
          const { data: allConversations }: any = await fetchConversations();
          if (allConversations && allConversations.length > 0) {
            const newItem: any = await generationConversationName(allConversations[0].id);
            
            // Proceed with setting new conversation information and resetting state as needed
            const newAllConversations = produce(allConversations, (draft: any) => {
              draft[0].name = newItem.name;
            });
            setConversationList(newAllConversations as any);
            
            // Additional logic to reset inputs and conversation IDs as needed
            if (getConversationIdChangeBecauseOfNew()) {
              setConversationIdChangeBecauseOfNew(false);
              resetNewConversationInputs();
              setChatNotStarted();
              setCurrConversationId(allConversations[0].id, APP_ID, true);
            }
          } else {
            // Handle the case where no conversations are returned
            console.error("No conversations were fetched.");
          }
        } catch (error) {
          console.error("An error occurred while fetching conversations or generating a new conversation name:", error);
          // Here, handle the error as needed, possibly setting additional error states or displaying a message to the user
        }
      },

@veserai commented on GitHub (Apr 11, 2024): I was able to fix it on my own. The problem was: /app/compontents/index.tsx: The "oncompleted" function fails while fetching the conversations.id . Therefore the bot never reaches the state, where the "setResponsingFalse()" is set. I rewrote the async onCompleted like this: ``` async onCompleted(hasError?: boolean) { // Immediately set the chatbot as not responding, regardless of potential errors in fetching conversations setResponsingFalse(); if (hasError) { return; // Early return if there was an error in the chat message operation } try { // Attempt to fetch all conversations and generate a new name for the conversation const { data: allConversations }: any = await fetchConversations(); if (allConversations && allConversations.length > 0) { const newItem: any = await generationConversationName(allConversations[0].id); // Proceed with setting new conversation information and resetting state as needed const newAllConversations = produce(allConversations, (draft: any) => { draft[0].name = newItem.name; }); setConversationList(newAllConversations as any); // Additional logic to reset inputs and conversation IDs as needed if (getConversationIdChangeBecauseOfNew()) { setConversationIdChangeBecauseOfNew(false); resetNewConversationInputs(); setChatNotStarted(); setCurrConversationId(allConversations[0].id, APP_ID, true); } } else { // Handle the case where no conversations are returned console.error("No conversations were fetched."); } } catch (error) { console.error("An error occurred while fetching conversations or generating a new conversation name:", error); // Here, handle the error as needed, possibly setting additional error states or displaying a message to the user } }, ```

yindo commented

2026-02-16 10:15:51 -05:00

@taowang1993 commented on GitHub (Aug 17, 2024):

After you embed the chatbot in another website, can other people still access your web app UI?

@taowang1993 commented on GitHub (Aug 17, 2024): After you embed the chatbot in another website, can other people still access your web app UI?

yindo commented

2026-02-16 10:15:51 -05:00

@veserai commented on GitHub (Aug 17, 2024):

After you embed the chatbot in another website, can other people still access your web app UI?

Before I fixed it -> No

After my fix -> Yes

Please make sure to have SSL activated (For example by using a reverse Proxy), otherwise many brothers will block the iFrame

@veserai commented on GitHub (Aug 17, 2024): > After you embed the chatbot in another website, can other people still access your web app UI? Before I fixed it -> No After my fix -> Yes Please make sure to have SSL activated (For example by using a reverse Proxy), otherwise many brothers will block the iFrame

yindo commented

2026-02-16 10:15:51 -05:00

@AllForNothing commented on GitHub (Dec 11, 2024):

I found the root cause of this issue: Set-Cookie is blocked by the browser

then conversations API always returns empty data without session_id cookie.
So, we can add "SameSite=None; Secure" to the session_id cookie to fix this issue (webapp-conversation\app\api\utils\common.ts)

@AllForNothing commented on GitHub (Dec 11, 2024): I found the root cause of this issue: Set-Cookie is blocked by the browser ![image](https://github.com/user-attachments/assets/8a43569a-35b7-423a-811d-09006cc91147) then conversations API always returns empty data without session_id cookie. So, we can add "SameSite=None; Secure" to the session_id cookie to fix this issue (webapp-conversation\app\api\utils\common.ts) ![image](https://github.com/user-attachments/assets/be87fc6c-7c70-4a5a-a901-23e46e4137d7)

yindo commented

2026-02-16 10:15:51 -05:00

@amine-y commented on GitHub (Aug 5, 2025):

I was able to fix it on my own. The problem was: /app/compontents/index.tsx: The "oncompleted" function fails while fetching the conversations.id . Therefore the bot never reaches the state, where the "setResponsingFalse()" is set. I rewrote the async onCompleted like this:

async onCompleted(hasError?: boolean) {
        // Immediately set the chatbot as not responding, regardless of potential errors in fetching conversations
        setResponsingFalse();
        
        if (hasError) {
          return; // Early return if there was an error in the chat message operation
        }

        try {
          // Attempt to fetch all conversations and generate a new name for the conversation
          const { data: allConversations }: any = await fetchConversations();
          if (allConversations && allConversations.length > 0) {
            const newItem: any = await generationConversationName(allConversations[0].id);
            
            // Proceed with setting new conversation information and resetting state as needed
            const newAllConversations = produce(allConversations, (draft: any) => {
              draft[0].name = newItem.name;
            });
            setConversationList(newAllConversations as any);
            
            // Additional logic to reset inputs and conversation IDs as needed
            if (getConversationIdChangeBecauseOfNew()) {
              setConversationIdChangeBecauseOfNew(false);
              resetNewConversationInputs();
              setChatNotStarted();
              setCurrConversationId(allConversations[0].id, APP_ID, true);
            }
          } else {
            // Handle the case where no conversations are returned
            console.error("No conversations were fetched.");
          }
        } catch (error) {
          console.error("An error occurred while fetching conversations or generating a new conversation name:", error);
          // Here, handle the error as needed, possibly setting additional error states or displaying a message to the user
        }
      },

Thanks @veserai, just an update you need to fix a typo in the function setResponsingFalse => setRespondingFalse

@amine-y commented on GitHub (Aug 5, 2025): > I was able to fix it on my own. The problem was: /app/compontents/index.tsx: The "oncompleted" function fails while fetching the conversations.id . Therefore the bot never reaches the state, where the "setResponsingFalse()" is set. I rewrote the async onCompleted like this: > > ``` > async onCompleted(hasError?: boolean) { > // Immediately set the chatbot as not responding, regardless of potential errors in fetching conversations > setResponsingFalse(); > > if (hasError) { > return; // Early return if there was an error in the chat message operation > } > > try { > // Attempt to fetch all conversations and generate a new name for the conversation > const { data: allConversations }: any = await fetchConversations(); > if (allConversations && allConversations.length > 0) { > const newItem: any = await generationConversationName(allConversations[0].id); > > // Proceed with setting new conversation information and resetting state as needed > const newAllConversations = produce(allConversations, (draft: any) => { > draft[0].name = newItem.name; > }); > setConversationList(newAllConversations as any); > > // Additional logic to reset inputs and conversation IDs as needed > if (getConversationIdChangeBecauseOfNew()) { > setConversationIdChangeBecauseOfNew(false); > resetNewConversationInputs(); > setChatNotStarted(); > setCurrConversationId(allConversations[0].id, APP_ID, true); > } > } else { > // Handle the case where no conversations are returned > console.error("No conversations were fetched."); > } > } catch (error) { > console.error("An error occurred while fetching conversations or generating a new conversation name:", error); > // Here, handle the error as needed, possibly setting additional error states or displaying a message to the user > } > }, > ``` Thanks @veserai, just an update you need to fix a typo in the function setResponsingFalse => setRespondingFalse

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: langgenius/webapp-conversation#25