#support

Embedding a Chat Window in a React Based App

TLDR shrey_42 wants to restrict the chat window to a certain component in a dynamically-mounted React app. patrickvandenhoek provided a suggestion that didn't work for shrey_42. natefi mentioned seeing a similar implementation in use.

3mo

Join the chat

Sep 02, 2023 (3 months ago)

Photo of md5-b109d0e0e71a334fe67c5bfb73e170c0

shrey_42

05:55 AM

I would like the chat window to be restricted to the confines of a pre-defined div element, and not popup up as a modal like it does by default.

Is that possible?
If yes, how?

Thanks.

Photo of md5-563133d64d035a610c9312967e87d9fd

patrickvandenhoek

11:31 AM

Try this shrey_42 : https://domain.com/widget?website_token=XtokenhereX

11:33

patrickvandenhoek

11:33 AM

For example, yes.

shrey_42

01:43 PM

patrickvandenhoek Thanks for the advice!

01:43

shrey_42

01:43 PM

Although, in my current use-case, i think something else is required.

01:44

shrey_42

01:44 PM

Because, the app is React based, and the container/component that i want to put the Chat Window is dynamically generated/mounted.

01:44

shrey_42

01:44 PM

Hence, if i add an iframe to that component, it gets created afresh everytime the component is mounted/remounted

patrickvandenhoek

01:45 PM

Ahhh I got it. But that’s out of my knowledge unfortunately

01:45

patrickvandenhoek

01:45 PM

Would love to help out, but sorry haha

shrey_42

01:49 PM

i could even go with the default initialisation process, but just need to be able to fix the chat window to a certain component, dynamically

Sep 03, 2023 (3 months ago)

Photo of md5-330c4da3d7c34d6b7af0261791b254fe

natefi

12:23 AM

hey shrey_42 i saw someone doing this

12:23

natefi

12:23 AM

in a fb ad actually

12:23

natefi

12:23 AM

well it was a fb ad for a product i clicked into and then noticed it was just chatwoot they were selling

12:23

natefi

12:23 AM

but they had exactly what you are describing implemented

Chatwoot

Chatwoot | Knowledge Base powered by Struct.AI

Indexed 2221 threads (46% resolved)

Generate Knowledge

Similar Threads

Browser Freezing Issue with Loading Widget Code

User patrickvandenhoek experiences browser freezing when loading widget code in Chatwoot. Key debugging with support from sojan_official and nithindavid, and input from users tobsowo and darjeelingtea eventually leads to a workaround by creating a new inbox.

2mo

Implementing Self-Hosted Chatwoot on Gatsby Site Issue

psycarlo had an issue implementing Chatwoot on a Gatsby site due to 'X-Frame-Options' issues. The problem was resolved by applying a solution from CloudFlare as suggested by the discussion in the provided link.

2mo

Troubleshooting Facebook Channel Setup for Chatwoot Locally

codingkrazy was having trouble setting up a Facebook channel for Chatwoot locally. After several suggestions, jackgun05 resolved the issue by suggesting some settings tweaks. codingkrazy was directed to premium support.

1mo

Navigation Issue on Support Website

patrickvandenhoek raised an issue about website navigation inconvenience. muhsin_k asked them to report it on GitHub. patrickvandenhoek complied, and sojan_official suggested a potential solution.

2mo

React Native Chat History Integration Issue

mysterious_moose_96219 faced a problem with React Native chat history. sojan_official suggested persisting history via identifier hash value on widget initialization.

2mo