metropolitan-bronze•2y ago

Embedding Help

hey guys, i have a question when it comes to embedding the AI Customer service bot or just a Chatbot in general , how does one embed it into a website. because every-time i try to embed it into a website or a shopyify store it doesn't allow me to add it. Error code 401 pops up. and it asks me for a Custom Css, Htlm, and Java script, any ideas why this is occurring

3 Replies

W. Williams (SFT)•2y ago

Did you watch this video: https://www.youtube.com/watch?v=2gy-0HURFI0 You can get the code @Daniel talks about within the VF docs: https://developer.voiceflow.com/docs/embed-customize-styling#embed-the-webchat-in-a-page

Voiceflow

YouTube

How to embed your assistant within your website

This tutorial walks through how to embed your chatbot within a specific element on your website! This can be used to add it to the middle of the page or give your users a full page or larger webchat experience. You can find the documentation here https://developer.voiceflow.com/docs/chat-widget#supported-html-elements-in-the-text-step ** The ...

Voiceflow

Embed & Customize Styling

Modify the CSS of your web chat and embed it within a page

xenial-black•2y ago

https://discord.com/channels/1079548823610871889/1213972554604220477 👆 This is the best solution I found. Just change out your project ID and set the width accordingly.

W. Williams (SFT)•2y ago

Here is the script:

<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-HERE' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production',
          render: {
            mode: 'embedded',
            target: document.getElementById('voiceflow-chat'),
          },
          autostart: true
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

<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-HERE' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production',
          render: {
            mode: 'embedded',
            target: document.getElementById('voiceflow-chat'),
          },
          autostart: true
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

Remember to enter your project ID. Add the following HTML where you want it toshow up in your page

<div id="voiceflow-chat"></div>

<div id="voiceflow-chat"></div>

Embedding Help

Did you find this page helpful?