The Popup Block

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here.

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

The Popup block is a notice that appears suddenly on the screen, over another window or display. The popup can contain anything. To edit the content that will be displayed, click on the block and add one of the blocks from the list:

📝Note: The settings of the added block are specific; you have to check their options.

📐 Layouts

After adding the block, you will notice three layout options: start from scratch, which allows you to build it without further settings, text and image, and popup with form.

Popup with Form

Text and Image Popup

⚙️ Settings Tab

Inside the settings tab, the most important option is the open trigger. This will also influence other settings because every trigger has different customizations. We will present this in detail in the lines below:

On Load

As the name suggests, this will appear once the page is loaded. For it, you can configure a trigger delay so that the visitor gets the chance to take a look at the page before loading the popup.

In the example below, we have created an on load popup that appears when the visitor reaches to the checkout page.

On Anchor Click

This one is a bit more interesting because it empowers the visitor to decide when and whether he wants to see that info. This kind of popup is very useful for links or call-to-action, like subscribe links or click to download a file.

For it, you have to configure an anchor under the Frequency & Close Settings, so that when the anchor is clicked, the popup will appear.

In the example below, we have created a download Popup, that is triggered when the user clicks on the Download button. For this, we have created a button with the #download anchor ( link ):

Then we have added the popup block, selected the On Anchor Click open trigger, opened the Frequency & Close Settings and added there the previously created anchor ( download ):

💡Result - how it appears on the frontend

📝 Note: Check this video about the Popup on Anchor Click.

On Scroll

This popup appears while the page is scrolled. For example, on the home page, you can have multiple sections. If a user scrolls until the teaser of the shop page that you have, you can add a popup that contains the link to the actual shop page.

For this popup, you can adjust the scroll distance ( percentage ), under the Frequency & Close Settings. so that the popup will appear when that percentage has been scrolled.

In the example below, we have set the percentage so that when the Home page is scrolled until the Featured Products, a Popup with a link to the shop page will appear.

On Exit

This kind of popup appears when a user tries to exit the page, which means you got an extra chance to keep him on your website. This is useful for promoting a discount, announcing that a product ran or will run out of stock, let him know he didn't finish a purchase.

In the example below, we have created an on exit popup for the cart page, so that the user will be notified if we forgets to proceed with the checkout and exits the cart page.

For each of the popup types, you can disable the page scrolling or decide to display it on mobile or not.

Besides the behavior itself, you can control the frequency and close settings, such as enabling the close button, closing when clicking outside the popup, closing on anchor click ( the anchor must be configured ) - pro, or to dismiss the popup for the recurring visitors, after a certain number of days has been achieved - pro.

More than that, under the Popup Position accordion, you can manage where the popup will appear, and even adjust it for each device.

🖌 Style Tab

Under the style tab, you can adjust its dimensions for different devices ( width ), height, and padding. Also, color options for the background, close button, overlay, and border can be found here.

Other available settings include adjusting overlay opacity, enabling the close button and setting its position (inside and outside), and controlling border width, radius, and shadows.

As with any other Otter block, this one can be customized using Custom CSS and displayed under certain conditions, using Visibility Conditions.

📝 Note: The Animations can be applied only to the block you have added inside the Popup, not directly to the popup.