Adding VF chatbot on shopify store

Can someone please help me? I've been trying this for days, but nothing works. I can't get the VF chatbot to work on Shopify. I'm placing the code right above the </body> tag, and I'm adding the following CSS at the top under the <head> section:

#voiceflow-chat {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

What am I doing wrong?

SStino12547 Can someone please help me? I've been trying this for days, but nothing works. I...

Tico | Voiceflow Assistant•7/30/25, 6:19 PM

Here’s a quick checklist to get the widget working in Shopify:

Use the full embed snippet from Integrations → Chat Widget ```html<script type="text/javascript">(function(d,t){ var v=d.createElement(t),s=d.getElementsByTagName(t)[0]; v.onload=function(){ window.voiceflow.chat.load({ verify: { projectID: 'YOUR_PROJECT_ID' }, url: 'https://general-runtime.voiceflow.com', versionID: 'production'  }); }; v.src='https://cdn.voiceflow.com/widget/bundle.mjs'; v.type='text/javascript'; s.parentNode.insertBefore(v,s);})(document,'script');</script>```Paste this exactly one line above the closing </body> tag in theme.liquid (Online Store ► Themes ► Edit code).
Make sure the agent is accessible Settings ► Danger Zone ► Private Agent toggle must be OFF – otherwise the widget returns a 401 and nothing appears.
Pick the right version If you haven’t published yet, set `versionID: 'development'`. When you later hit Publish in Voiceflow you can switch to `production`.
Remove the custom CSS you added `#voiceflow-chat { … }` won’t affect the widget; the launcher + chat live inside a Shadow DOM and already handle visibility. Extra CSS can actually hide it in some themes, so just delete it for now.
Hard-refresh / clear cache after each change (Shopify can aggressively cache theme assets).

After those steps you should immediately see the small chat bubble in the lower-right corner of your store.
You can later customise colours, avatar, or advanced CSS using the methods shown here → https://docs.voiceflow.com/docs/chat-widget#custom-web-chat-styling

Let me know if the bubble is still missing after this checklist!

Stino12547OP•7/30/25, 6:31 PM

I've already tried all of this but it doesn't work. The widget doesn't appear.

Stino12547OP•7/31/25, 12:36 PM

@NiKo | Voiceflow @W. Williams (SFT) Do you perhaps know how to solve this? Thank you very much in advance.

NiKo | Voiceflow•7/31/25, 2:52 PM

Are you using this in your base.css or theme.css file?

Also, where is your chat widget snippet code? Usually you want to put it in the theme.liquid file, just before the closing </body> tag—or into a page section where you want the widget to appear.

Also, be sure to use the opening/closing <style> tags for your CSS rule(s):

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

Stino12547OP•7/31/25, 8:34 PM

Thank you very much this was indeed the problem "opening/closing <style> tags for your CSS rule(s):"