Moein I•3mo ago

BUG! In popover mode, an overlayed element is blocking the site content

I can reproduce it on an empty page with only the Voiceflow widget embedded in 'popover' render mode. This blocks the clickable content on the page even though the widget is closed.

10 Replies

Tico | Voiceflow Assistant•3mo ago

Hi there – thanks for highlighting this issue! It definitely isn’t expected behavior for an overlay element to block your site’s content when the widget is closed in popover mode. The widget is supposed to provide a non-intrusive chat experience, and once closed, it shouldn’t interfere with clickable elements on your page. Here are a couple of things you might try: • Make sure you’re using the latest version of the widget script. Updates can address issues like this by fixing bugs in the widget’s overlay handling. • Double-check if any custom CSS or scripts on your site might be influencing the overlay element (for example, lingering styles or z-index settings). In your browser’s Developer Tools, inspect the overlay element to see if you can identify a class or style that remains active when the widget is closed. If so, you might be able to override it (for instance, by forcing a display: none on that element when the widget is not open). Since popover mode is designed to not block the page’s other content once closed, your experience likely indicates a bug or an unintended interaction with your site’s code. I’d suggest bringing additional details – such as a code snippet or any custom styling you’re applying – to the Discord community, as others there might have encountered and solved a similar issue. In the meantime, you can learn more about the widget integration and customization in the Voiceflow documentation: Voiceflow Documentation. Hope this helps! Let me know if you have any further questions.

W. Williams (SFT)•3mo ago

can you send a link to this page?

Moein IOP•3mo ago

It's just a simple HTML file. You can reproduce it locally with this file. Just add your project ID in the code.

voiceflow-widget-pro...

W. Williams (SFT)•3mo ago

@Braden (Voiceflow CEO) @NiKo | Voiceflow @Support This is 100% a bug. There is a div that is overlayed on the bottom of the page that is on top of the paeg's content that prevents a user from clicking anything while the chat is closed.

W. Williams (SFT)•3mo ago

@Braden (Voiceflow CEO) @NiKo | Voiceflow Test URL: https://seefusion.tech/voiceflow/popover.html Try to click the link at the bottom of the page when the chat is closed.

NiKo | Voiceflow•3mo ago

Works for me on mobile, let me check on desktop Yep, not working on desktop unless I shrink the window width Thanks for sharing guys, ticket has been made 👍🏻 As a quick fix in the meantime, you can pass CSS rules in the <head>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Voiceflow test popover widget</title>
    <style>
        /* Ensure footer link is always clickable */
        footer {
          z-index: 2147483647 !important;
          pointer-events: none !important;
        }

        footer a {
          pointer-events: auto !important;
          z-index: 2147483647 !important;
          position: relative !important;
        }
      </style>
  </head>
  <body>
    <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: '65403d0951232200074144ca' },
            url: 'https://general-runtime.voiceflow.com',
            versionID: 'production',
            assistant: {
              renderMode: 'popover'
            },
          });
        };
        v.src = 'https://cdn.voiceflow.com/widget-next/bundle.mjs';
        v.type = 'text/javascript';
        s.parentNode.insertBefore(v, s);
      })(document, 'script');
    </script>
    <footer style="position: fixed; bottom: 10px; width: 100%; text-align: center">
      <a href="https://voiceflow.com" target="_blank" style="color: #aaa">Click the link</a>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Voiceflow test popover widget</title>
    <style>
        /* Ensure footer link is always clickable */
        footer {
          z-index: 2147483647 !important;
          pointer-events: none !important;
        }

        footer a {
          pointer-events: auto !important;
          z-index: 2147483647 !important;
          position: relative !important;
        }
      </style>
  </head>
  <body>
    <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: '65403d0951232200074144ca' },
            url: 'https://general-runtime.voiceflow.com',
            versionID: 'production',
            assistant: {
              renderMode: 'popover'
            },
          });
        };
        v.src = 'https://cdn.voiceflow.com/widget-next/bundle.mjs';
        v.type = 'text/javascript';
        s.parentNode.insertBefore(v, s);
      })(document, 'script');
    </script>
    <footer style="position: fixed; bottom: 10px; width: 100%; text-align: center">
      <a href="https://voiceflow.com" target="_blank" style="color: #aaa">Click the link</a>
    </footer>
  </body>
</html>

NiKo | Voiceflow•3mo ago

Or a more generic JS script to put before </body>

patch_cw.txt

Moein IOP•3mo ago

Can you provide us with an estimated time of arrival (ETA) for this fix? The solutions are not ideal to add to our codebase. @NiKo | Voiceflow We had to take down Chatbot. Do you have any ETA on a fix for this issue?

NiKo | Voiceflow•3mo ago

The ticket has been assigned to the team but no fix has been pushed yet.

Moein IOP•3mo ago

Hi @NiKo | Voiceflow! Would you be able to follow up on the ticket? We have been unable to use the service for two weeks due to this bug.

BUG! In popover mode, an overlayed element is blocking the site content

Did you find this page helpful?