Cannot embed chatbot in react native web app
# 🤝helpc
curved-accountant-50126
08/07/2023, 9:47 PMWhen a user clicks on the "TALK TO OUR CHATBOT" i want to redirect to my chatbot component and display the chatbot to talk to. When i press the button that 2nd screenshot is what is shown. I have included screenshots of my bot.html file where I have embeded the scripts. My ChatBot.js component is what is called when the button is pressed. In that component it contains a iframe tag that gets that bot.html page. I have changed the width and height to different sizes and I still cant see the chatbot. I have tried to directly embed the shareable URL but that doesnt work. @famous-zoo-73118
https://cdn.discordapp.com/attachments/1138226928524988487/1138226929049272331/Screenshot_2023-08-07_at_22.40.45.png▾
https://cdn.discordapp.com/attachments/1138226928524988487/1138226929351282688/Screenshot_2023-08-07_at_22.41.10.png▾
https://cdn.discordapp.com/attachments/1138226928524988487/1138226929774887012/Screenshot_2023-08-07_at_22.41.36.png▾
https://cdn.discordapp.com/attachments/1138226928524988487/1138226930114646127/Screenshot_2023-08-07_at_22.42.19.png▾
f
famous-zoo-73118
08/07/2023, 9:50 PMOK, from the looks of it the React Native rendering might be either messsing with the iframe's dimensions or just removing it. Rather than using the width/height attributes in the iframe, can you try using the style attribute? e.g.
<iframe style="width: 100%; height: 600px;" ... />famous-zoo-73118
08/07/2023, 9:51 PMIf that doesn't work then definitely there's something in React Native or your app preventing the iframe from rendering as expected. In that case, it might be best for now as a quick solution to just open the shareable URL of the webchat using
window.open()c
curved-accountant-50126
08/07/2023, 10:28 PMThanks for your help. I’m just going to use windows.open for now!
19 Views