other-emerald•2y ago

Chatbot is not showing up on Website

Hey, I am testing the chatbot on my website but the message icon is not up on the shopify website, even when I have added the code for the bot in shopify theme.liquid file. Has anyone faced a similar issue? Is there othey way to integrate the chat bot to shopify website?

11 Replies

Tico | Voiceflow Assistant•2y ago

If your chatbot is not showing up on your Shopify website, it might be due to a CSS rule that hides empty elements. Here's how you can fix it: 1. Check and Update CSS in Shopify: - Go to the base.css file in the Assets folder of your Shopify code editor. - Add the following CSS code to ensure the chatbot is displayed:

   <style>
       #voiceflow-chat { display: block !important; }
   </style>

   <style>
       #voiceflow-chat { display: block !important; }
   </style>

2. Ensure Proper Installation: - Make sure you have correctly installed the web chat by copying the JS snippet provided by Voiceflow and pasting it between the <body> ... </body> tags on every page where you want the chatbot to appear. 3. Enable the Web Chat: - You can enable or disable the web chat using the toggle button found in the top-right corner of the Web Chat Integration page in your Voiceflow dashboard. 4. Publish a Version of Your Assistant: - Ensure you have saved and published a Production Version of your assistant. Anytime you make changes to your assistant, you need to publish a new version for it to appear in your web chat. For more detailed steps on customizing and embedding the web chat, you can refer to the following resources: - Voiceflow Developer Documentation - Voiceflow Help Center

other-emeraldOP•2y ago

where in base.css should I add the given code?

ambitious-aqua•2y ago

I faced the same problem today You need to put this code <style> #voiceflow-chat { display: block !important; } </style> In folder -> assets -> css However Ive done this, and it didnt help

other-emeraldOP•2y ago

where in css did you put the code?

ambitious-aqua•2y ago

. At the end

other-emeraldOP•2y ago

I figured it out

ambitious-aqua•2y ago

How?

other-emeraldOP•2y ago

it did not work when I put it in css however, i put it in the <body> just after the chatbot code now, it's showing

ambitious-aqua•2y ago

Wow

other-emeraldOP•2y ago

thanks for your help

ambitious-aqua•2y ago

I`ll test it right now Hah It really works Thank you bro

Chatbot is not showing up on Website

Did you find this page helpful?