How to Create a Gamified Popup in WordPress

How to create gamified popup in WordPress

Showing popup on your website can irritate your visitors if it’s not done in the right way. Gamified, Inline, SlideIn, Floating bar, etc. can solve this problem by adding interactive popups.

In this blog, we’ll talk about one of the important popups in WordPress called gamified popups. It’s a game-like popup that lets you run spin-to-win wheel, scratch cards, etc., exciting activities on your website. This not only boosts engagement but also improves SEO, conversions, and sales.

So, let’s learn why gamified popups are important and how to create a gamified popup in WordPress using the best WordPress popup plugin, PopupKit.

Why your WordPress website needs a gamified popup?

Wondering why you need a unique gamified popup for your site? Here are all the possible reasons to integrate a gamified popup on WordPress:

  • It helps to create interactive popups with gamification.
  • Gamified popups boost engagement and lead collection.
  • Your site’s SEO will improve as the average time on site increases.
  • More visitors will interact with your site.
  • Gamification in popups will boost the conversion rate by creating a sense of urgency.
  • Gamified websites are more attractive than a general one.
  • Customers will be more convinced to buy from you.

👉 Learn how to use popup for lead generation.

How to Create a Gamified Popup in WordPress

Here, we’ll demonstrate two methods to create a gamified popup. One is created with popup templates, and another is from scratch. We’ll use PopupKit for both methods. This is a WordPress popup plugin that comes with blocks and templates for smooth popup creation.

First, you need to install and activate PopupKit. Then, follow either of the two methods described below. Here are the methods on how to create a gamified popup in WordPress with PopupKit:

Create a Gamified popup with a template

PopupKit has pre-built gamified templates. Since these are the premium templates, you need to get the paid version of PopupKit. After getting the paid version, follow the four-step tutorial below:

Step 1: Select and import a popup template

In the first step, you need to navigate to the PopupKit’s gamified templates and choose a suitable template for your popup campaign. For that, navigate to PopupKit >> Templates and select “Gamified” as a campaign type.

Then, scroll down and select a gamified popup template.

How to Create a Gamified Popup in WordPress with PopupKit

You will get to see a tab after selecting a popup template. This popup will ask you to set a title or name for your marketing campaign. After setting the name, press the “Import” button. This will import the template and redirect you to the Gutenberg editor, from where you can do further customization.

Create gamified popup with templates provided by PopupKit

Step 2: Configure the content of the gamified popup

In the second step, turn on the toggle button and activate your imported gamified popup. Then, do the following content customization for your gamified popup:

  • Campaign Type: Choose a campaign type from the dropdown option.
  • Open Event: Select event type from on page load, after inactivity, page scrolled, on page exit intent, and custom selector click.
  • Open Delay: Set the delay time for your popup display.
  • Entrance Animation: Select entrance animation.
  • Exit Animation: Choose exit animation from the dropdown option.
  • Animation Duration: Enter the duration of your gamified popup activity.
  • Close Button: Enable this toggle to close the button.
  • Close on Clicking Outside: Turn on the toggle button to close the gamified popup whenever someone clicks outside the popup.
  • Hide PopupKit Badge: Enable it to hide the PopupKit badge.
Custom popups with PopupKit's gamified template

Also, you can set a display condition by extending the “Display Conditions” tab. For example, set an include and exclude condition. You can set where you want to show popup by setting an include condition and avoid displaying popups with an exclude condition.

Further, you can add more conditions by pressing the “+ Add Condition” option.

Set display condition for PopupKit's gamified popup

You can also control which device you would like to display your gamified popup by turning on the toggle button.

Device visibility for popupkit's gamified popup

Now, schedule your popup by setting the Timezone, Start Date & Time, and End Date & Time for your gamified popup display.

Schedule popup templates with PopupKit

Again, you can set the frequency for popup activity by adjusting:

  • Display to visitors: You can show this popup to everyone, new or returning visitors.
  • Display frequency: Set the frequency for displaying your popup.

Turn on the toggle button to disable showing the gamified popup to converted visitors.

Custom popups with PopupKit's gamified template

Then, expand the “Geolocation Target” to add the location you want to display popup. For that, press the “+ Add Group” and enter the location for your gamified popup display.

Custom popups with PopupKit's gamified template

You can also block a specific IP or IP range. Expand the “IP Blocking” tab for that and turn on the “Enable IP blocking” toggle. Then, add an IP range or a selective IP by clicking the respective buttons.

Custom popups with PopupKit's gamified template

Step 3: Style customization of the WordPress gamified popup

Next to the content customization, navigate to the “Style” tab and customize width, height, content position, position, margin, background, image, image size, etc. for your container, container overlay, and close button.

Style customization of the WordPress gamified popup with PopupKit

Step 4: Live gamified popup in WordPress

Finally, after completing all the style customization, hit the “Save” button to make the gamified popup live.

Publish Gamified popup with PopupKit

Build a Gamified popup from scratch with blocks

Apart from using the built-in templates, you can also create a gamified popup campaign from scratch with PopupKit’s blocks. For that, navigate to PopupKit >> Campaigns and press the “Add New Campaign” button.

Build a Gamified popup from scratch with PopupKit's blocks

This will redirect you to the Gutenberg editor, from where you need to hit the “+” icon and drag-and-drop the PopupKit’s blocks you need to create a campaign. Also, you need to customize Form Fields, Buttons, and Integrations of your gamified popup. Further, make style customization and press the “Save” button to make it live.

Build a Gamified popup from scratch with PopupKit's blocks

How to set the winning percentage for the gamified popup?

You can also set win percentages for your gamified popup with PopupKit and provide them with selected coupons along with those. To do that, navigate to “Wheel” and click the “Manage Wheel Sections” button.

Set win percentages for gamification website with PopupKit

This will redirect you to a new tab, from where you can set winning chances, add coupon codes, change background colors, and also make settings for preventing visitors from winning.

Set gamified win percentage with PopupKit

FAQs

Which plugin is best for gamified popups?

The best solution can be defined as the one that is beginner-friendly and lightweight. Since PopupKit is a lightly coded and friendly popup builder, you can use this plugin to create gamified popups.

Do you need to code for creating gamified popups?

No, if you’re using a no-code solution or WordPress plugin, you won’t need coding. These plugins will provide built-in templates or blocks to create popups like PopupKit.

Wrapping up

So, which one did you like: the method with a template or without template using blocks?

No matter what you adopt, both methods will let you build a fully customized gamified popups that reflects your brand and serves your goal. So, run your gamified popup with PopupKit and make your site more attractive to give visitors a fun and memorable reason to connect with your brand.

Leave a Reply

Your email address will not be published. Required fields are marked *