Inline style for Drift causing cutoff effects
Carlo-Defilippis opened this issue · 4 comments
Describe the bug
When using drift chat on my Gatsby site, the first pop up shows up correctly that greets the user but upon changing routes/url's it cuts off the pop up box due to the inline style setting of "width: 76px !important"
How To Reproduce
the bug can currently bee seen here on my staging site https://dripsstaging.gtsb.io
- Click on the X on the pop up box when greeted after it pops up from hovering over button or idle period.
- change to any other page on the website
- See error
Expected behavior
Second pop up box should not have a set width of 76px
Video
@Carlo-Defilippis Thanks for filing this issue.
The fake drift widget is removed when the real one loads, as you can see here.
Do you think the real drift widget takes some sizing from the fake widget as it loads?
Update: I moved the provider into gatsby-browser.js and the state is now reading correctly for the Provider.
The issue seems to be caused by the Drift component in my header, not retrieving the state by the provider. Is there a way I can pass the state to the Drift component?
I tried this in my header.js without luck.
import {Drift, useChat} from "react-live-chat-loader" ...
const [state] = useChat({}) ...
<Drift icon="A" state={state} />
ANY help would be greatly appreciated =)
New issue video can been seen here: https://youtu.be/9Puxmtt4WEg
After much trials and testing I have determined this issue is a styling issue on the drift chat bot itself while firing the "conversation:playbookFired" function. Thanks for your help regardless!
@Carlo-Defilippis Glad to hear you were able to get to the cause of the issue!