Stino12547•2mo ago

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?

4 Replies

Tico | Voiceflow Assistant•2mo ago

Here’s a quick checklist to get the widget working in Shopify: 1. Use the full embed snippet from Integrations → Chat Widget

<!--  Voiceflow Webchat -->
<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'   <!-- or 'development' while testing -->
      });
    };
    v.src='https://cdn.voiceflow.com/widget/bundle.mjs';
    v.type='text/javascript';
    s.parentNode.insertBefore(v,s);
  })(document,'script');
</script>

<!--  Voiceflow Webchat -->
<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'   <!-- or 'development' while testing -->
      });
    };
    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). 2. Make sure the agent is accessible
Settings ► Danger Zone ► Private Agent toggle must be OFF – otherwise the widget returns a 401 and nothing appears. 3. 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. 4. 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. 5. 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•5w ago

I've already tried all of this but it doesn't work. The widget doesn't appear. @NiKo | Voiceflow @W. Williams (SFT) Do you perhaps know how to solve this? Thank you very much in advance.

NiKo | Voiceflow•5w ago

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•5w ago

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

Adding VF chatbot on shopify store

Did you find this page helpful?