Note: This guide requires basic to advanced knowledge of HTML and web browser Inspection tools.

In some cases, you may want to have a page block delayed from showing up on the page until a certain amount of time has passed. For example, if you have a video that educates someone and tells a good story and then leads into a sales pitch (like our sales webinars at Smart Marketer) -- you don't want the call to action to show up before the pitch starts. 

Using the information in this article, you can setup any block on your ZP page to show only after a specified amount of time has elapsed once the page is landed on. 

Finding the Block ID

The first thing you need to do is find the "Block ID" of the block you want to delay from showing on the page. In order to find the needed Block ID, follow the instructions below:

  • Open your browser's Developer Console while in the ZP Page builder by right-clicking anywhere in the Builder and selecting Inspect
  • Click on the "Select an element in the page to inspect it" icon: 
  • Place your cursor over the block you'd like to delay from appearing and left-click on it: 
  • The block's code will be highlighted in the Elements tab of the Inspector. Copy the "id" value from there for use in the custom script gone over below: 

Adding the Block Delay Script

To delay the display of a block on a Zipify page, this can be done through custom Script usage. Just follow the steps below to set this up: 

1. Open the </> Scripts section of the Page Builder: 

2. Switch to the Footer Scripts tab:

3. Select the "Use local scripts only" or the "Use both global and local scripts" option (if you have other Global scripts you want used) from the "Manage Scripts" dropdown:

4. Set the desired Title for the script in "Script title" field. It can be any title you want used for your script I.e. "Delay Block".

5. Paste the script code below into the "Paste Script Here..." area:

<script>
function showBlockAfterTimer(time, blockId) {
 var block = document.getElementById(blockId);
 if(!block) {
   console.error('Block not found!');
 }
 var msTable = {
   min: 1000 * 60,
   sec: 1000
 };
 var unit = time.replace(/\d/g,'')
 if (!msTable[unit]) {
   console.error('Unit not supported!');
 }

 var ms = time.replace(unit, '') * msTable[unit] ;

 setTimeout(function() {
   block.classList.remove('zpa-hidden-xs', 'zpa-hidden-sm', 'zpa-hidden-md', 'zpa-hidden-lg');
 }, ms)
}

showBlockAfterTimer('10sec', Block_ID_Here)
</script>

The following line of the script needs to be modified to replace the '10sec' placeholder with the desired value of the block delay (allowed format is: Xsec or Xmin for X seconds and X minutes respectively) and the Block_ID_Here placeholder with the actual ID of the block you want to add this functionality to:
showBlockAfterTimer('10sec', Block_ID_Here) 

Note: If you need an exact time delay set for the block, convert minutes into seconds and use the seconds option I.e. for 2 minutes and 27 seconds = (2 x 60) + 27 = 147sec

Finalizing the Block Delay Script

Once you have added the desired block delay time and the specific Block ID, the script can be finalized and added to the page:

6. Click on the "Add Script" button and then on the "Save" button: 

7. Hide the block you want delayed on all devices by going into the block's General settings and selecting all icons under the "Hide on" section: 


8. Publish or Update the page for the script to be applied live: 

Did this answer your question?