like-gold
like-gold•3mo ago

Need help by implementing my (styled) Chatbot to my website

Hey everyone, I don't understand why I can't implement my chatbot in my website. I want the chatbot to be embed with my customized styling from the widget area. I copy the code and implement it right before the closing body tag. But the chatbot is nowhere. So I did also implement this code: <div id="vf-chat-wrapper" style="width:100%;max-width:420px;height:100vh;"></div> - but nothing happened. I have no idea, what I'm doing wrong. Is there someone, who can help me? Thanks a lot My code: <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: 'XYZ' }, url: 'https://general-runtime.voiceflow.com', versionID: 'production', voice: { url: "https://runtime-api.voiceflow.com" }, render: { mode: 'embedded', target: document.getElementById(vf-chat-wrapper), } }); } v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s); })(document, 'script'); </script>
2 Replies
Tico | Voiceflow Assistant
Tico | Voiceflow Assistant•3mo ago
Hi there! the widget isn’t mounting because the target element you pass to render.target is undefined. In your call you’ve written: 
render: {
  mode: 'embedded',
  target: document.getElementById(vf-chat-wrapper), // <-- JS looks for a *variable* called vf-chat-wrapper
}
render: {
  mode: 'embedded',
  target: document.getElementById(vf-chat-wrapper), // <-- JS looks for a *variable* called vf-chat-wrapper
}
getElementById() needs the id string in quotes: 
render: {
  mode: 'embedded',
  target: document.getElementById('vf-chat-wrapper'),
}
render: {
  mode: 'embedded',
  target: document.getElementById('vf-chat-wrapper'),
}
A working minimal example 
<!-- the container that the chat will mount into -->
<div id="vf-chat-wrapper" style="width:100%;max-width:420px;height:100vh;"></div>

<script type="text/javascript">
  (function (d, t) {
    const v = d.createElement(t), s = d.getElementsByTagName(t)[0];
    v.onload = function () {
      window.voiceflow.chat.load({
        verify: { projectID: 'XYZ' },
        url: 'https://general-runtime.voiceflow.com',
        versionID: 'production',
        render: {
          mode: 'embedded',
          target: document.getElementById('vf-chat-wrapper'),
        }
        // any additional styling options go here
      });
    };
    v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs'; // recommended URL
    v.type = 'text/javascript';
    s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>
<!-- the container that the chat will mount into -->
<div id="vf-chat-wrapper" style="width:100%;max-width:420px;height:100vh;"></div>

<script type="text/javascript">
  (function (d, t) {
    const v = d.createElement(t), s = d.getElementsByTagName(t)[0];
    v.onload = function () {
      window.voiceflow.chat.load({
        verify: { projectID: 'XYZ' },
        url: 'https://general-runtime.voiceflow.com',
        versionID: 'production',
        render: {
          mode: 'embedded',
          target: document.getElementById('vf-chat-wrapper'),
        }
        // any additional styling options go here
      });
    };
    v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs'; // recommended URL
    v.type = 'text/javascript';
    s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>
Tips • Make sure the <div id="vf-chat-wrapper"> appears before the script tag, or load the chat after the DOM is ready. • If you omit render.target the widget will look for an element with id voiceflow-chat-frame; otherwise it falls back to the overlay launcher (docs “Embed & customize styling”). • All the colours, fonts, etc. you configured in the Integrations > Web Chat section will still apply automatically; extra CSS can be injected with the assistant.stylesheet option if needed. That’s it! Once the ID string is corrected the chat should appear inside your page section with your saved styling.
Steve B. | IntelleSync.ai
Steve B. | IntelleSync.ai•3mo ago

Did you find this page helpful?