How to create a Widget in Poper from Scratch?

How to create a Widget in Poper from Scratch?

Teasers, also known as nudges, are small, non-intrusive popups that encourage users to interact without disrupting their experience. Follow this guide to add and configure teasers in your Poper popups.

Steps to Add Teasers/Nudges to Popups

Step 1: Access Your Dashboard

Open your web browser and go to the Poper website.
Login to your Poper account using your credentials.

Step 2: Open or Create a Popup

Once logged in, you will be taken to your Poper dashboard.

Find the popup you want to edit from the list of popups and click on it to open the editor.
If you want to create a new popup, click on "Add New" to open the popup editor.

Step 3: Create a Teaser


In the Popup Editor window, use the drag and drop feature to create your teaser.

Place your teaser at a specific location on the screen. It is recommended to position it in the bottom left or bottom right corner for optimal visibility without obstructing the main content.

Step 4: Configure Global Settings

In the settings panel on the right-hand side, locate the "Global Settings" section.
Scroll down and find the "Remove Background" option.

Turn this setting on to remove the background overlay, making your teaser float and allowing users to interact with other elements on your website.

In the same "Global Settings" section, turn on the "Clickable" option.
This will make the entire teaser clickable.

Step 5: Set Click Action


After enabling the "Clickable" option, configure the action to take place when the teaser is clicked.
Select "Go To Step" from the action options.
Choose the specific popup step you want to display once a user clicks on the teaser. You'll have to create the Step before you can select here.

Step 6: Save and Test Your Teaser

Click on the "Save" button to apply all your settings to the popup.
Open your website where the popup is integrated.

Ensure the teaser appears at the specified location and that clicking on it opens the desired popup step.
Confirm that closing the teaser works correctly and that closing the steps opened by the teaser brings the teaser back into view.

Additional Notes

When a user tries to close the teaser, it will close. However, if they try to close the steps opened by the teaser, the teaser will reappear instead of closing the entire popup. This ensures the teaser remains visible to encourage further interaction.


By following these steps, you can effectively add teasers to your popups in Poper, enhancing user engagement without being intrusive. Make sure to thoroughly test your teasers to ensure they function as expected and provide a seamless user experience.

    • Related Articles

    • How to Add a Spin Wheel in Poper Popups (Gamified) from Scratch

      While using Spin Wheel templates is recommended for ease, you can also create Spin Wheel popups from scratch in Poper. Follow these steps to set up a Spin Wheel popup. Steps to Add a Spin Wheel in Poper Popups Step 1: Access Your Dashboard Open your ...

    • How to create a new Campaign

      Poper empowers you to create and manage multiple campaigns for your website. This guide will walk you through the process of creating a new campaign and adding various elements like popups, widgets, and videos. Creating a New Campaign: There are two ...

    • How to rename Popup / Widget

      Access Your Poper Dashboard: Log in to your Poper account and navigate to the main dashboard. Open the "Campaigns" Tab: Click on the "Campaigns" tab on the left-hand side of your dashboard. This will display a list of all your created campaigns. ...

    • How to create Multi Steps in Poper

      Poper empowers you to create captivating popups with a multi-step format, keeping your visitors engaged and maximizing conversions. This guide will walk you through the process of building a two-step popup, capturing both email and name from your ...

    • How to create Embed (In Page) Campaigns in Poper

      Poper's embed feature allows you to strategically place popups or widgets within specific sections of your web pages. This guide will walk you through the process of creating embeds and customizing their placement. Steps to Create an Embed: Access ...