How to Create a Popup in WordPress

Step 1: Installing Popup by Supsystic

In WordPress, navigate to Plugins > Add New. Search for “Popup by Supsystic” and click install. When the installation has completed click “Activate Plugin”. You will have a new admin menu item titled “Popup by Supsystic”.

Installing Popup by Supsystic PRO

In your personal account on the supsystic.com, you will find a unique download link after purchase. After downloading the file (supsystic_popup_pro.zip), navigate to Plugins > Add New > Upload and upload the file. When the installation has completed, click “Activate Plugin”.

After activation the PRO version, you need to enter license key (you can find it in your personal account on our site). To do this follow next steps:

  1. Go to the Popup by Supsystic in WordPress navigation menu.
  2. Click License tab on left navigation menu of plugin.
  3. Enter your email and license key.
  4. Click “Check” button.

With Popup by Supsystic PRO you have such possibilities as –

  • More possible ways of opening and closing popup
  • Set font styles and colors for popup text
  • Subscribe to your newsletter via Facebook and add custom subscription fields
  • Add login and registration forms to the popup
  • Choose the layered style for showing popup on the screen
  • Determine which popup design is more preferred to users by using the A / B testing feature

Step 2: Creating Popup by Supsystic

  1. On the left navigation menu click “Add New Popup”.
  2. Enter the name of popup.
  3. Choose popup template. You have a huge variety of amazing templates.
  4. Click “OK” button.

During the next steps you can change the popup template.

Step3: Setting configuration of Popup plugin

1. Main tab

Main tab of WordPress Popup plugin

Here you can set –

  • When to show PopUp:
    • when page loads and set the delay in seconds, as well as choose count time from the first site load;
    • when user clicks on the page;
    • when user clicks on certain link / button / other element
    • when user scrolls window;
    • on exit from site – Pro feature;
    • bottom of the page – Pro feature;
    • after inactivity – Pro feature;
    • after user comment – Pro feature;
    • after purchasing (checkout) – Pro feature;
    • on link follow – Pro feature;
    • build-in page – Pro feature.
  • When to close PopUp:
    • after user closes it;
    • click outside PopUp;
    • only after action (Subscribe / Share / Like) – Pro feature;
    • after time passed – Pro feature.
  • Whom to show:
    • everyone;
    • for the first-time visitors;
    • until user makes an action;
    • only for not logged-in site visitors;
    • only for Post Types;
    • also you can choose devices for each you want to hide popup;
    • hide only for IP you select;
    • hide only for countries you select;
    • hide only for languages you select;
    • hide only for Search Engines or Social Media – Pro feature;
    • hide only for URL match – Pro feature.
  • Show on next pages:
    • all pages;
    • select pages on which to show popup;
    • select pages on which don’t show popup.
  • Time display settings:
    • Set display time
  • Date display settings:
    • Set display date

2. Design tab

This tab allows you to –

  • Change appearance of your popup:

    Design tab in WordPress Popup plugin

    • set the width of popup – in pixels or percents;
    • specify the background overlay opacity of popup;
    • set image or color for backgrounds of blocks in popup;
    • set label font style – Pro feature;
    • set text font style – Pro feature;
    • set footer font style – Pro feature;
    • set responsive mode type;
    • choose close button – includes a wide range of buttons;
    • choose bullets for text blocks of popup.
  • Popup Location tab

    Popup location tab in WordPress Popup plugin

    Here you can enable layered popup style (PRO feature).
    By default all PopUps – have modal style: it appears on user screen over the whole site. Layered style allows you to show your PopUp – on selected position: top, bottom, etc. and not over your site – but right near your content.

  • Texts tab

    Texts tab in WordPress Popup plugin by Supsystic

    On this tab you have the ability to disable or edit blocks of popup – header, text block and foot note.

  • Social tab – here you need to enable social buttons:

    Social tab in WordPress Popup Plugin

      Here you can:

    • activate facebook, google+ and twitter buttons
    • choose social links design
    • connect around 20 social networks to your PopUp, with various lists of design settings, using our plugin Social Share Buttons by Supsystic
  • Popup Opening Animation tab:
    • there is a huge variety of animated effects of popup
    • here you can set animation duration in miliseconds

3. Subscribe tab

Here you can enable Subscription.

Subscribe tab in WordPress Popup plugin

At first choose where to subscribe – WordPress, Aweber, MailChimp, MailPoet, Jetpack; and for PRO version: Constant Contact, Campaign Monitor, Vertical Response, SendGrid, Get Response, iContact, Active Campaign, Mailrelay, arpReach, SG Autorepondeur, Benchmark, InfusionSoft, SalesForce – Web-to-Lead, ConvertKit.

  • If you select subscription to WordPress, you have the ability to create users after subscribe with special roles – Subscriber, Author, Contributor.
  • In order to subscribe to Aweber you need to enter unique list id –  check this page for more details.
  • To subscribe to MailChimp you need enter your MailChimp API key and name of list for subscribe. To find your MailChimp API key – follow this instructions.
  • To subscribe to MailPoet you must have MailPoet plugin installed on your site.
  • To subscribe to Constant Contact you must have authorize in Constant Contact.
  • To subscribe to Campaing Monitor you must have authorize in Campaing Monitor.
  • To subscribe to SendGrid you need enter your SendGrid Username and SendGrid Password.
  • To subscribe to Vertical Response you must have authorize in Vertical Response.
  • To subscribe to arpReach you need enter your arpReach intake form Action URL.
  • To subscribe to SG Autorepondeur you need enter your SG Autorepondeur User ID, SG Autorepondeur List ID, SG Client Activation Code.
  • To subscribe to GetResponse you need enter your GetResponse API key
  • To subscribe to Active Campaign you need enter your Active Campaign API URL, API key
  • To subscribe to InfusionSoft you must have authorize in InfusionSoft.

Also here you can:

  • Activate subscription fields – email and name. Email field is mandatory for most of subscribe engines – so it should be always enabled.
  • Set the “Confirmation email was sent” message – this will be message, that user will see after subscribe – that email with confirmation link sent.
  • Set the subscribe success message – right after subscriber will be created and confirmed – this message will be shown.
  • Set the email error message – if email, that was entered by user, is invalid – user will see this message.
  • Enable redirection after subscription, just enter URL that you want to redirect to after subscribe – and user will be redirected there. If you don’t need this feature – just leave field empty.
  • Change submit button name.

4. Login/Registration tabPro feature

Here you can enable Login form or Registration form, or enable both forms at the same time.

Login Registration tab in WordPress Popup plugin

On this tab you can add new fields, change button name, choose role for user after registration, export users list, change text for error message, success message and many others.

5. A/B Testing tab

A/B testing (PRO feature) is one of the easiest ways to increase conversion rates and learn more about your audience, but it is still underutilized by many otherwise very switched on, online marketing professionals.

A/B test in Popup plugin involves testing two or more versions of a popup window — an A version (original) and a B versions (the variation) — with live traffic and measuring the effect each version has on your conversion rate.

Simply click “Add New Test” button, enter the name of test popup and click OK. On this tab will appear list with test popup. Here you will be able to edit test popups and monitor all the views, actions and conversion rate of test popups.

More detail about A/B testing you can find here.

6. Statistics tab

Here you can find graphs with –

  • Main PopUp Usage Statistics
  • Ratio of All Actions
  • Ratio of All Social Share

Popup plugin by Supsystic gives you the opportunity to –

  • monitor the Main PopUp Usage Statistics in the form of line graph or bar graph
  • select specific time frame for viewing statistics
  • export statistics to cvs file
  • monitor the table views of popup on the Statistics tab

7. CSS/HTML Code tab

CSS HTML Code tab in WordPress popup plugin

Popup by Supsystic allows you edit code of popup – ONLY if you know basics of HTML, CSS and have been acquainted with the rules of template editing described here.

Important! After changing the settings of popup don’t forget to click “Save” button.

Also you have the ability to –

  • Clone popup – click on the “Clone” button on the top, enter the name and click OK. On the “Show All Popups” tab in left navigation menu will appear copy of popup in the popups list and you will be redirected to this copy of popup.
  • Disable popups (not delete, but just disable) – click “Turn Off” on the top and popup will disable. To enable it again – simply click “Turn On”.

Step 4: Preview settings

After you change some settings – with popup plugin, you can immediately see the result in a live preview at the bottom of the page or click Preview button.

Back to main page of Popup WordPress plugin

Get plugins bundle today and save over 80%