https://discord.gg/botpress logo
Join Discord
Powered by
Shopify botpress chatbot embed not dispalying prop...
# 🤝help
f
Hi, I have been trying to integrate my botpress chatbot into Shopify but for some reason it is messing up the theme where the theme text displays on top of the chat bot, the layout on mobile is also messed up. Can you please help me with this as it is an urgent matter? (I have a client waiting -- been trying to resolve it for over a week now) Thank you! 🙂
c
Hey @flaky-gpu-87733 ! We have someone on the team working on something regarding Shopify. He could help, but he's currently on vacation.
@famous-jewelry-85388 could you potentially help in the meantime? Thank you
Is the same issue happening both on desktop + mobile version ? @flaky-gpu-87733
f
yes
f
@flaky-gpu-87733 hey, basically, this is a CSS issue. I think you can use the z-index propert to move the chatbot to the front/top
@bright-magazine-792 what do you think?
f
I’ve tried that but I don’t know what exactly to set the z-index to or where to even set it…
f
is it published? can you send me the URL?
f
It isn't live on the client side, but I've made it live on my personal site, you can find it here: https://salmanhaider.xyz/@famous-jewelry-85388
f
it looks fine to me 👀
f
that's only on my site though, only my client's shopify store it does not look fine
^see image above
@famous-jewelry-85388 any updates on this?
f
So it is a CSS problem on your clients shop
I am sorry I can't help with CSS, but it seems some of the shopify styles are interfering with Botpress styles
are you using exactly the same embedding code?
can you share it with us?
c
@bright-magazine-792 CC
f
yes I am
sure
@crooked-van-25152 This is an issue I've been dealing with for quite sometime now, my client is loosing patience aha...is there anyway we can expedite this and get it resolved?
f
Do you see something here @bright-magazine-792 ? or is it pure CSS ?
f
@famous-jewelry-85388 any update on this?>
my client is still waiting on a response...
@crooked-van-25152 any udpdates? It's been a few months now
b
hey @flaky-gpu-87733 can you DM me your client's shopify store URL?
f
hey! @bright-magazine-792 https://basedbodyworks.com/ this is the URL
b
the bot is not embed at the moment right?
can you add the bot again to your personal website?
f
Yes I can
b
is your personal website a shopify store?
f
my personal website is salmanhaider.xyz, let me add it in, it's not a shopify store
b
it would be good if you can add it to your client's shop
also, did you try with out new webchat v2?
f
I did not
b
try this out!
on the shopify store
f
is this the embedd for my webchat?
b
yes your webchat
f
ok should I ask them to test that?
what would be the correct way then? is there a guide? been dealing this shit for months now..
b
sorry, you did right. just ask them to test with the new code
let me know how it goes!
f
ok just did, this is a large client and unfortunately this issue has been left unresolved for a long time now, there's a high chance I might loose them...
@bright-magazine-792 my client tried it and now it's not even popping up
b
can I get the code from your client?
f
it's the one you shared
@bright-magazine-792 this a screenshot from them
the code adds a header ot their site
b
okay okay
it shouldn't be done via custom code block
f
how should it be done then?
is there an article you can send?
I really want to resolve this
does this have anything to do with the z-index value?
b
Step 1: Go to Online Store and select 
Themes
. You'll find 3 dots next to customize button for your current theme. Click 
Edit code
. Step 2: Find and open 
theme.liquid
file, and scroll to the end of the file. Paste the webchat script inside the body (right before 
</body>
ends) Step 3: Save and preview https://cdn.discordapp.com/attachments/1201621601771335740/1226986424059039775/Screenshot_2024-04-09_at_1.32.07_AM.png?ex=662ffda7&is=661d88a7&hm=157d2538eb1180f7c0c6dd2ff0b0d32e447a7297424145182b49d9d17fc72926& https://cdn.discordapp.com/attachments/1201621601771335740/1226986424390127747/Screenshot_2024-04-09_at_1.32.36_AM.png?ex=662ffda7&is=661d88a7&hm=32c04df7ff3b1095d8a3bbb35ce364d5c5ed192e974d249155931fb5a43fa79f& https://cdn.discordapp.com/attachments/1201621601771335740/1226986424629465168/Screenshot_2024-04-09_at_1.33.15_AM.png?ex=662ffda7&is=661d88a7&hm=ab86a66c63c1db7beff2e76da549f602e92cfa22f0d7f049ba82f308414c665f& https://cdn.discordapp.com/attachments/1201621601771335740/1226986424843112509/Screenshot_2024-04-09_at_1.34.20_AM.png?ex=662ffda7&is=661d88a7&hm=fa0ae002f934f9e22f720551ab2f20738497744d4fc958c7dcfa66b95e115b59&
not yet, but this piece of content should work
f
I will send this over to them and follow-up with you
b
sure!
f
thanks for the help so far
b
happy to help!
f
their going through the steps, in the meantime, the chatbot on the shareable link doesn't seem to work: https://mediafiles.botpress.cloud/5b434a15-5ac9-4b53-8e3c-9aebc13664a4/webchat/bot.html
can you test it out pls?
b
what doesn't work?
f
the shareable link under integrations
b
f
interesting, maybe it's my browser
the client added the code
b
might be. try in incognito once
f
but they do not see the chatbot
I see in yours the defer is before "src"
b
yes exactly
forgot to mention in the steps 🙂
f
does the one at the end need to be deleted?
b
add defer on line 267
f
same for both lines?
b
no it's alright. just add 
defer
to the above line
just for the first line, as second line already includes 
defer
f
ok got it, what does defer do?
where it's placed doesn't matter right?
still nothing for them
b
yeah it doesn't matter. basically adding 
defer
waits for the entire page to be loaded and then runs the script
f
can you share the snippet on your end here and I'll send that to them directly
I'm getting on a call with the client in an hour
b
Copy code
<script defer src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/5b434a15-5ac9-4b53-8e3c-9aebc13664a4/webchat/config.js" defer></script>
f
what does this do?
I want the chatbot to be live on their site
b
I have edited the script just now. the update is for 
v1
let's try this
f
this worked! can you explain why?
and for some reason it's floating up top..
and it's not clickable on mobile also
b
can you try removing the stylesheet?
f
ok
b
sometimes, depending on the shopify theme, the webchat could behave different based on your theme's CSS properties and placement of the script. Try moving the script at the top of the body tag.
f
can you visit their site and check it out?
b
yes I'm checking
f
ok
they have the bot live on their sit for a few mins
will be taking it offline shortly
b
alright. adding 
z-index:9999
would solve this issue though
f
ok, do you have a link to the modified stylesheet?
will add once you send it
b
one last thing before I send you the code. Can you try with 
v0
Copy code
<script defer src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/5b434a15-5ac9-4b53-8e3c-9aebc13664a4/webchat/config.js" defer></script>
f
ok, asked them to try
pls give me a few
b
sure
f
can you send the stylesheeet link
this didn't do anything as of now
they have to take it down soon so pls lmk
b
you can tell them to take it down for now. I need to do some tests before sending the code. also we're coming up with the new webchat that solves the z-index part, so I need to check with the team as well.
f
ok
I will be on standby, pls keep me updated, I have resceduled my meeting with them to tomorrow
This is a large client, don't want to loose them 🙂
b
yes will keep you posted
f
ok thanks, will keep an eye out
@bright-magazine-792 any updates?
?
c
Did you chat with @acceptable-gold-88171 on the #1217501640626671637 channel? @flaky-gpu-87733
f
No because I am already charting with @bright-magazine-792
He has a lot of context on the issue I’m facing, waiting for an update.
Can you please share the status with me? My client has been waiting for months now.
20 Views
PreviousNext
Powered by