conscious-sapphire•2y ago

Web chat embedding problem

Hi I am trying to implement the web chat embedding into a frame as per the new video from Voiceflow. Whilst I can get the overlay method working I am having problems with getting the frame method working. Here is my code: <div class="iframe-container"> <iframe id="voiceflow-frame" width="800" height="500" frameborder="0"></iframe> <div id="blank-state" style="display: flex;"></div> </div> <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: '65e070d88c2b8b812acd3a02' }, url: 'https://general-runtime.voiceflow.com', versionID: 'production', render: { mode: 'embedded', target: document.getElementById('voiceflow-frame'), }, autostart: true }); } v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s); })(document, 'script'); </script> Can anyone help me out? Thanks steve

4 Replies

Tico | Voiceflow Assistant•2y ago

It seems like you're trying to embed the Voiceflow chat widget into an iframe, but the Voiceflow chat widget doesn't support iframe embedding. Instead, it should be embedded directly into the HTML of your webpage. Here's how you can do it:

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

<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: '65e070d88c2b8b812acd3a02' },
          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>

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

<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: '65e070d88c2b8b812acd3a02' },
          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>

In this code, the Voiceflow chat widget is being embedded into a div with the id 'voiceflow-chat'. The 'render' property in the 'load' function is set to 'embedded' and the 'target' is set to the div with the id 'voiceflow-chat'. This will embed the chat widget directly into your webpage, rather than into an iframe.

conscious-sapphireOP•2y ago

Hi Thanks for your quick response. According to this video: https://www.youtube.com/watch?v=2gy-0HURFI0 using frames is possible. I've used you code and it does display the web chat across the entire page but I want to emulate the Voiceflow video and use a frame! Thanks Steve

NiKo | Voiceflow•2y ago

The shared code should allow it. Be sure to size/position your div as you want on your page.

conscious-sapphireOP•2y ago

Thanks NiKo I adjusted the margins and hey presto, it appeared. Many thanks Steve

Web chat embedding problem

Did you find this page helpful?