Full screen homepage takeover

Design help Custom code
1

Hey All,
I’m trying to set up a homepage takeover for a church website where a full-screen pop-up/modal takes over the regular homepage at scheduled times each week. It’s for their weekly church service live streams from vimeo. It’s something that’s fairly easy to set up in Wordpress using the WP Page Takeover plugin But I haven’t found any resources on how to do something similar with Webflow. I’m open to custom code solutions, paid plugins, or hopefully a creative native solution. Any help would be massively appreciated!

Here is my site Read-Only: Read Only Site Link - Holy Innocents

2

HI @Bemi_Ojo I do not see anything special about this Modal as it doesn’t have any special functionality and IMO its doable in WF with bit of custom code (JS and Local Storage ).

3

@Bemi_Ojo As I understood you want the takeover to happen on a specific date and time that you will set.

You can do it with this custom code:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () {
    // Set the date for takeover using this format (YYYY-MM-DDTHH:MM:SS)
    // Use +HH:MM or -HH:MM to select the timezone using GMT
    var takeoverDate = new Date("2021-02-22T21:48:00+02:00").getTime();

    var currentDate = new Date().getTime();
    var timeLeft = takeoverDate - currentDate;

    function homepageTakeover() {
      // Either give your takeover modal a class name "modal" or replace with correct name below
      document.querySelector(".modal").style.display = "block"; // For flexbox change "block" to "flex"
    }

    setTimeout(homepageTakeover, timeLeft);
  });
</script>

Here’s how it works:

  1. You’ll build the modal within Webflow on all pages where you want takeover to happen. I’m assuming you know how to do this. It’s quite simple. Something like shown in this video. But don’t apply any interactions. To have the modal on all pages, use Symbols.

  2. Once you have your modal with all the elements inside. Set the display to none on the modal. This way it doesn’t show until the event time.

  3. Paste the above code in the body tag of either the page settings (if the modal is only on some of the pages) or body tag of the site settings (if the modal is on all pages across the site). Read the grey comments inside the code for instructions on what you need to update. The date you need to set is in red.

  4. When the time comes, the script will change the display to block on the modal. The hidden modal will appear and if you have set it fixed and to cover the entire visible screen then it will takeover the page user is on. Probably it’s a good idea to have a close button on the modal so the user has an option to exit the modal and continue with their task. This close button interaction you can set up within Webflow. It’s shown in that YouTube video I’ve linked.

  5. Once the event is done, remove this code. Or update the takeover date to a new date.

That’s all. I haven’t tested this code on all browsers. Should be fine but just test it on different browsers and mobile devices.

Any questions, let me know.

1 Like
4

:raised_hands: Thanks again Vako! You’re amazing. I’ll implement it and let you know if I run into any issues. Thanks so much.

1 Like