Hello, I’m trying to integrate my voiceflow AI chatbot to my shopify store. Voiceflow gives ta code snippet that needs to be pasted inside the tags in some liquid file (I’ve used theme.liquid and header.liquid). However, the chatbot is not showing up on the store. I get it working on another site which is hosted on Squarespace. What might be the problem? I’ve tried disabling all the shopify apps I have on the store but it did not solve the problem. I get no errors related to this. The chatbot even shows up in the element when I inspect the page. Just not on the site itself.
I think the placement of the code is not working or the chat widget is having some issues not loading. It is really hard to guess without looking at your website. Can you share us your website link please?
Store is at https://ehorisontti.com/. The chat code snippet does not have any problems because it works on some sites.
Yes! How did you get it? Maybe the problem is in my own browser.
No. It was hidden on my as well it was because the chat widget has a css property of display: none. You have to either delete that piece or have it be display: block instead.
You can see the widget by right-clicking → inspect → search for voice flow and delete that property or change it to block (Update the same in the backend).
If I answered your question, don’t forget to like and accept the solution.
Thanks,
Taknify
3 Likes
Hello @Taknify , I’m currently experiencing a challenge with my Shopify theme. I’ve successfully resolved an issue with my chatbot visibility by replacing “display: none;” with “display: block;” in the browser’s developer tools.
To ensure a permanent solution, I think I need to apply this change to my Shopify theme’s CSS. However, I’m having difficulty locating the specific CSS related to the chatbot in my “base.css” file, as there are numerous similar characters and styles.
I would be happy if you could assist me with it.
Do you mind sharing me your store url and if you have a code, can you share that as well?
Once I get access to the store, I can add you that code and show you which file I did that on.
Let me know if you have questions on giving collaborator access to the store.
Hello, I have the same problem, and I still don’t understand how to eliminate that.
Just add the below snippet just above the webchat snippet within the body tags.
#voiceflow-chat { display: block !important; }