iframe stuck on white background
# 🤝help
l
HI guys, I am having problem with embedded chatbots. Both custom and pre-configured. The issue is that Iframe has a white background at all times. I am using NextJs and chakraUI, rendering the bot in client Components. The problem is - i can not figure out why is only occurring on local development and on production domain connected via nameservers. it does not occur on Vercel deployment URL. I have my background setup also in globals.css to the main color, and also in theme.ts It occurs here 👉 https://innogrowlabs.com/ and here https://innogrowlabs.com/chatbot/example only while loading see second image but not here 👉https://automatization-ai.vercel.app/ Thanks I appreciate your help a lot!

https://cdn.discordapp.com/attachments/1138805143949807739/1138805144532811836/Snimka_obrazovky_2023-08-09_o_14.03.23.png

https://cdn.discordapp.com/attachments/1138805143949807739/1138805144893542410/Snimka_obrazovky_2023-08-09_o_14.04.43.png

@acceptable-kangaroo-64719
Hi guys, anyone, did you encounter this issue?
q
on firefox I found this issue .

https://cdn.discordapp.com/attachments/1138805143949807739/1146169964861083668/46446e.PNG

using firefox?
l
no chrome @User
but see that it happens only on domain: https://innogrowlabs.com/ and not on https://automatization-ai.vercel.app/ which is really strange. as it is the same exact page just different domain. also on local host, it does happen
q
its on both sites for me
on firefox
let me see on chrome
checking your site quick
checked on both sites firefox and chrome, you got it on both. Check using chrome incognito mode again yourself, because of catche it;' using old version of bot.

https://cdn.discordapp.com/attachments/1138805143949807739/1146171522743029760/42424242e.PNG

https://cdn.discordapp.com/attachments/1138805143949807739/1146171522994679980/34234242.PNG

I always test using incognito mode, because it's not saving cookie and it's showing new view. etc.
l
yeas you are right I see it on both now .
@quiet-raincoat-89190 i am tring to access it in globals.css

https://cdn.discordapp.com/attachments/1138805143949807739/1146174695226495086/Snimka_obrazovky_2023-08-29_o_22.08.25.png

https://cdn.discordapp.com/attachments/1138805143949807739/1146174755662217226/Snimka_obrazovky_2023-08-29_o_22.09.07.png

q
I am more like python/java backend/scraping/pipelines guy. I have verry limited knowledge of front-end with css. @acceptable-gold-88171 maybe can help?
l
yes me too. I work more on the backend, this is one of my first frontend projects. Thanks for help!
a
I can see the issue, but i'm not sure what's causing it. @rich-battery-69172 Do you know how to solve it?
I also created a ticket internally, hopefully we can get to the bottom of this quickly. Thanks for reporting this issue!
Update: I figured out the cause (color-scheme: dark in the html and meta tags). Trying to figure out if the fix should be on our end, or the website's end.
@lemon-army-49985 , @quiet-raincoat-89190 I think if you add :
#bp-web-widget {color-scheme:none;}
in your page's css you would solve the issue on your end, until we push an update.
This should solve the immediate issue. We'll still push a fix later on, so i'm going to mark this conversation as solved 🙂 Feel free to re-open / open a new one for other issues!
42 Views