producthunt-example-demo

Greet Visitors From ProductHunt

Please note that creating this popup requires our Advanced Targeting Conditions premium feature.

Want to set a unique message to get shown only to visitors from a certain site? Maybe you want to welcome people from Facebook or provide a discount only to visitors from a certain affiliate.

Use this 5-step guide to create your popup!

Step 1: Creating Your Content

Let’s create a new popup. To get started, log into your WordPress Admin area and click the “Add Popup” link in the “Popup Maker” menu. Alternatively, you can click the “Add New Popup” button on the “All Popups” page.

Popup Maker dashboard showing no popups. Shows arrows pointing to "Add New Popup"

On the new popup page, enter the name for the popup. The name is for internal use only so that you can find the popup in the list of popups. No site visitor will see this name.

Then, enter the title, which will be the main headline in the popup. You can leave this blank if you do not need a headline.

Next, enter the content of the popup.

Content for our popup with name, title, and content filled in.

Step 2: Adding Triggers and Cookies

Now that we have our content added, it’s time for us to set up our triggers and cookies. The triggers are what causes the popup to open. For this popup, we want it to open automatically.

By default, the popup will open for the site visitor every time they load the page, forever. We probably don’t want that. We may only want to show the popup until the site visitor takes some action, such as closes the popup, and then prevent the popup from opening again. To do this, we use cookies.

First, click the “Add New Trigger” button in the “Targeting” section of the popup settings.

Popup Settings with the "Trigger" settings selected. There is an arrow pointing to the "Add New Trigger" button.

In the popup that opens, choose “Time Delay / Auto Open” as the trigger. Click the “Would you like to set up a cookie as well?” option.

Upon clicking that option, a new dropdown will appear where you can select when the cookie is set. If you choose “On Popup Close,” the popup will continue to open until the site visitor closes it. Once that action is taken, the popup will not open again. For this popup, we will leave the default of “On Popup Close.”

Trigger popup asking which trigger to use. The "Time Delay" option is selected.

Then, click the “Add” button.

On the next screen, you will see a setting to adjust the time delay. This is how long Popup Maker should wait until showing the popup.

Time delay settings with the delay set to 500ms.

Since we want this to display right after the page loads, we will leave this as 500 milliseconds. So, click the “Add” button.

Trigger settings showing one time delay trigger and one cookie.

Our trigger and cookie are now set up!

Step 3: Set Targeting

By default, Popup Maker will open our popup on all pages, posts, products, and everywhere else and to all visitors. To adjust where the popup opens, we use the “Targeting” settings. For this announcement, we want to target only visitors that come from ProductHunt.

Switch to the “Targeting” tab of the popup settings. Click on the “Choose a condition” dropdown.

Popup Maker's "targeting" tab. Contains a dropdown for a variety of conditions.

There are many conditions you can choose from, including targeting the home page, only posts, only pages, or specific pages. For this popup, I am just going to select the “Referrer URL Contains” option. For the value, I am putting “producthunt.com.”

Targeting settings with the condition to set "Referrer URL Contains" with the value of "producthunt.com".

Once selected, new “And” and “Or” options will appear. You can use these to target multiple areas of your website with the same popup. For this popup, I will not use those since I am only targeting visitors from ProductHunt.

Show Popup To Visitors From Quora Instead

If you want to show popups only to visitors from Google instead of ProductHunt, you can use the “Referrer URL Contains” still but set the value to “quora.com.”

Show Popup To Visitors From Another Site Instead

If you want to show popups only to visitors from some other site instead of ProductHunt, you can use the “Referrer URL Contains” still but set the value to the site you want to show the popup to visitors from.

Step 4: Adjust Display Settings

Now that we have a way for the popup to open (triggers) and we have told the popup what pages to load on (targeting), we can adjust what the popup looks like using the “Display” settings.

Popup Maker provides many granular settings so you can fine-tune your popup. For this popup, we want a simple popup that appears in the middle of the screen.

Now, go to the “Display” settings tab. You will see “Display Presets” first. Along the top will be links for other display settings, including size, animation, and position.

For this popup, I am going to use a small right-site slide-in, so it is less intrusive. To help us get started, we will click on the “Right Bottom Slide-in” display preset.

Display presets with a variety of options shown including the "Right Bottom Slide-In."

Once clicked, a message will appear saying the display settings have been updated.

All that is left is to click the “Appearance” link. This will let us select the “theme” for the popup. Popup Maker comes with several built-in themes, and you can also create your own themes that match your site.

For this popup, I am going to choose the “Enterprise Blue” theme.

Appearance settings showing a "Popup Theme" setting set to "Enterprise Blue."

Step 5: Publish

Now that we have our popup set up, it’s time to publish and check it out. First, click publish to save your popup.

Next, go to the page you are targeting with your popup. In our case, it’s any page on the site. However, since we are only targeting people from another site, it will not automatically appear for us.

This may make it difficult to view changes to your popup. If you go to the page you are targeting, you can use Popup Maker’s admin menu to open the popup.

The admin bar appears when you view a page when you are logged into WordPress. One of the options will be "Popup Maker" which has a menu for opening popups.

If you click to open the popup, you should now see your ready-to-go greeting popup!

Our fully finished popup shown as a small popup sliding in at the bottom right corner.

Get Notified

Get notified when we post new guides, articles, and new Popup Maker versions.