How to handle multiple widgets overlapping each other?

Sometimes when you have multiple widgets on a page, they may overlap one another. In the above example, cookie consent widget partially overlays over our survey form, causing a "broken" user experience. There are various options to resolve this, and it's applicability depends on your use case.

1) Reposition one of the component

You can reposition one of the component but it may be sub-optimal since it will cause the screen to feel overly stacked, especially on mobile devices.

2) Use Z-Index

Z-Index may work if one of the component can fully overlay over another. For OnVoard's widgets you can override z-index values via javascript API.

OnVoard('notifier', 'setZIndex', 999999);
OnVoard('slide_in_web_survey', 'setZIndex', 999999);

3) Programmatically handle display (Recommended Solution)

This solution requires technical work but it is the most reliable avenue to resolve widgets overlapping issues. Here's how it works for our above use case:

  • On initial load, if cookie consent widget is eligible for display, we will hide survey widget. Otherwise, we will display survey widget.
  • After user clicks "Got It" and agrees to cookie consent, we will show survey widget.

This is how the code looks like with OnVoard's widget:

<script>
  window.onvoardConfig = {
    loaderId: YOUR_LOADER_ID
  };
</script>

<script>
  (function() {
    window.OnVoard = window.OnVoard || function() {
      (window.OnVoard.q = window.OnVoard.q || []).push(arguments);
    };
    var script = document.createElement("script");
    var parent = document.getElementsByTagName("script")[0].parentNode;
    script.async = 1;
    script.src = "https://widgets.onvoard.io/assets/YOUR_LOADER_ID.js";
    parent.appendChild(script);
  })();
</script>

<script>
// User has not agree to cookie consent
if (!check_cookie_consent()) {
  // hide survey
  OnVoard('slide_in_web_survey', 'hide');

  cookieconsent.initialise({
    "onStatusChange": function(status) {
      if (status === "dismiss") {
        OnVoard('slide_in_web_survey', 'show');
      }
    }
  })});
}
</script>

Take a look at Javascript API to see how you can interact with OnVoard's widgets via API. 

We understand that this may be challenging to configure. If you need any assistance with this, just let us know via live chat.