PopupKit offers a variety of Floating Bar Campaign Templates to enhance user engagement. Floating Bars popup at the top or bottom of your screen, helping your audiences notice and click important CTAs, notifications, or other messages as they scroll around a page.

Learn how to use PopupKit to select and design a Floating Bar template that drives users into accessing your campaigns.

Selecting and Using Floating Bar Templates #

First things first. To try PopupKit, you need to have WordPress 6.1 or higher set up and the plugin installed. And activated.

If you need to learn how to do it, check out How to Get Started with PopupKit para más detalles.

Step 1: PopupKit Templates #

• Navigate to PopupKit from your WordPress dashboard
• Click on Templates

From there, your selection process starts.

1. First, you will select the “Floating Bar” campaign under Select a Campaign Type
2. Select the Type of template from the left of your screen
3. Choose from the Seasonal options if you have any choice
4. Finally, select a template

Using the Floating Bar Template #

There is a button to see a preview of your chosen template. To use the template:

• Clickea en el ‘Use Template’ botón

• Then, you’ll see What is your campaign name? ➡️Write a name in the field

• Click on the ‘Import’ button. It’ll go to the editor, and you can work accordingly.

Floating Bar Template Customization #

When you are at the Floating Bar WordPress Editor, you have numerous editing options.

To the right of your screen, you’ll find the Block menu, with Contenido y Estilo tabs. We’ll explore these in detail now.

Customizing through the Content Tab #

Display Options #

• Campaign Type: Set to Floating Bar, determines the style/format of the popup campaign.
• Use As Top Bar: When enabled, the bar sticks to the top of the page and pushes content downward.
• Evento abierto: Set to On page load, the bar appears automatically when the page loads.
• Open Delay (S): Set to 1 second, adds a short wait before the bar appears after the trigger event.
• Animación de entrada: Set to Slide In Up, the bar slides upward into view when appearing.
• Animación de salida: Set to Slide Out Down, the bar slides downward when closing.
• Animation Duration (S): Set to 0.5 seconds, controls how fast the entrance/exit animations play.
• Botón cerrar: When enabled, shows an X button so visitors can manually dismiss the bar.
• Hide PopupKit Badge: When enabled, removes the “Built with PopupKit” branding badge from the campaign.

Condiciones de visualización #

Manage Display Conditions: Click this button to specify one or more conditions to trigger the popup and control where it appears on your site.

Next, you’ll see the Display Conditions window.

Condition Type dropdown has 2 options:

• Include: Show the bar on the selected pages.
• Exclude: Hide the bar from the selected pages.

The General dropdown has 6 options:

• Sitio completo: Apply the condition across all pages of the website.
• Singular: Target individual posts, pages, or custom post types.
• Archivo: Date Archives, Author Archives, Post categories, etc.
• WooCommerce: Target WooCommerce-specific pages like shop, cart, or checkout.
• Descargas digitales fáciles: Target EDD-specific pages for digital product stores.
• URL personalizada: Apply the condition to a specific URL you manually enter.

Also, you can add conditions based on your needs by clicking the “+ Add Condition”.

Display Visibility #

Here, you can choose which devices the popup will show up.

Schedule Date and Time #

It lets you enable the scheduling for the floating bar.

Frequency Settings #

Display to Visitors: It lets you set which type of visitors will see the floating bar. You can choose from Everyone, Return, New, etc.

Display Frequency: You can control how often the floating bar appears to a visitor. Options include once a day, Every Visit, Every Session, etc.

Finally you have the IP Blocking, which lets you choose IPs you don’t want the popup to show.

Y Visitor Information, which lets you collect user information based on your selected parameter.

Customizing through the Style Tab #

El Estilo tab lets you customize your Floating Bar with the Container, Container Overlay, and Close Button options.

El Container part lets you customize the Floating Bar’s width, height, position, and margins. Here, the parameters are marked in red.

Scroll further below, you have the options to edit the Image in the background of the popup.

Moving on to the Container Overlay, you can keep the overlay “Normal” or make it “Hover” with customized transition speed.

You can also edit the Close Button with PopupKit. It lets you select the Icon, Size, Position, Color, Border, Background, etc. to add a Close button of your choice.

Finally, by adding “blocks” using the “+” sign on the floating bar, you can customize at will.

Now that you have learned how to create a floating bar campaign via PopupKit, give it a shot and try it today for optimal popup experience!