1. Home
  2. Docs
  3. Addons
  4. Simple Popups

Simple Popups

Documentation for 7.0 version of plugins is available at QSM 7.0 Documentation

The Simple Popups Addon allows you to create popups that contain your quiz or survey. You can configure the popup to open by clicking a Shortcode link or by clicking on a chat-style widget floating on the bottom of the window.

INSTALLATION/SETUP

Once you have purchased the addon, you will have access to download the addon. To install, upload the addon as a normal WordPress plugin. To do so, go to the Plugins page and click Add New. Then, click Upload.

From there, upload the zip file that you downloaded when downloading the addon. Once the addon has uploaded, you should now have the plugin QSM – Simple Popups listed in your list of plugins. Activate that plugin. Once activated, the addon will add a new tab in the Addon Settings labeled “Simple Popups”.

SETTINGS/CONFIGURE

Addon Settings For Flashcards Addon

First, enter your license key from your account into the “Addon License Key” field on the “Simple Popups” tab of the “Addon Settings”. Be sure to click “Save Changes”.

There are two ways of using the Pop-up plugin

  • First is by pasting a Shortcode to the desired page/post and using it as a HyperLink, which once clicked opens up a Window with the chosen Quiz/Survey
  • Second is by pasting the pop-up script in your post/page which sets a floating widget icon at the corner of the browser window which once clicked open up the Quiz/Survey in a separate popup window.

You can find both the ways of configuring the addon in the coming paragraphs.

Method #1 – Popup using the Shortcode

To get started, look for the “Popups” page in your WordPress admin menu. Click on that link to get to the “Simple Popups” page shown in the image below.

Simple popups Plugin Installation

Click the “Add New” button at the top of this page to create your first popup. This will open a new popup where we can customize our popup like in the image below.

Simple popups Plugin Configuration

The “Headline” is shown at the top of the popup. Fill this in with any text you want the user to see.

Then, select an existing quiz or survey from the “Quiz or survey to show in popup” list

Filling in options to create the popup

With your popup configured, click the “Save Popup” button to create your new popup.

Simple popups Plugin after Configuration

Once created, you can click on the popup’s name in the table to edit the popup again. To delete the popup, you can click the trash can icon on the far right of the table.

Let’s click the popup’s name so we can see the popup’s options and the shortcode to use the popup.

Edit Popup Shortcode

We can now copy the shortcode shown for our popup and paste it into an editor as shown in the image below.

You can change the text “Click here” that is inside the shortcode to make your link have other text.

Popup Plugin Example 1

Once you paste your shortcode into an editor for a post, page, widget, or other elements, be sure to save your changes. Now, you can go view your changes.

Popup Plugin Example

You will see the text between the shortcodes displayed as a link. If you click on this link, you will see your new popup.

Simple Popups Addon Demo

Your popup is now configured and ready to be used!

Method #2 – Popup using the Embed Code (Widget)

In this method after you have configured the Popup Headline, Chosen the appropriate Quiz or Survey, chosen when to open the popup, and saved it. Now you need to configure the embed widget.

For this, you need to click on the Embed Code icon as shown in the below image

Simple popups Plugin Embed Code Configuration

After clicking on the Embed Code Icon a window opens up with all the options needed for configuring the Embed Widget Popup.

You will see the following options as shown in the below image

Embed Widget Configuration

  • Widget Icon URL:  Here you need to specify the path of the Icon which needs to be displayed to the user as the popup widget icon that will float at the bottom right of the browser window. That will look somewhat as shown in the below image.

Popup widget Icon

To display your own custom icon you can upload the icon to your WordPress Media Library by going to Media > Add New. Then Hit the Select Files button and open the desired icon and upload it.

After uploading the icon you can see the icon in the Media items list. Now click on the newly uploaded icon and this opens up Attachment Details as seen in the below image.

Copy Attachment Link

Now you need to copy the uploaded icon’s link as shown in the below image and paste the copied link in the Widget Icon URL Field of the Embed Widget Window.

  • Widget Title: Here you can name the Title you want to see on the Widget, here I’m naming it  Amazing Quizzes Popup Demo
  • Widget Background Color: Select the color scheme of the Widget background by opening the Color Palette. You can also add a hex color code to get the specified color.
  • Widget Title Color: Just as the Background color, with this option, you can color the Widget Title and match it with your website’s color scheme.
  • Widget Width: Here you need to specify the width of the Quiz/Survey that will open up after the user clicks on the Widget Icon. You can specify the width in px and %. Example: 500px or 45%
  • Widget Height: Here you need to specify the height of the Quiz/Survey that will open up after the user clicks on the Widget Icon. You can specify the height in px and %. Example: 800px or 75%
  • Embed Code: Here you can see a really long script that is generated after you have specified all the above details and have saved the configurations. If you are unable to see the code then you need the save the changes made and once again open the Embed Widget Window.

After you see the code, you need to copy the generated code by hitting the copy icon or manually selecting and copying the code and pasting it to he page or post where you need the Widget Icon to be displayed. As shown in the below image.

Widget Script Pasting

Note: Paste the code in HTML Style Block to get it working

After Pasting the code, Update the Post or Page and View the Updated Post or Page. If all goes well You will see the Widget Icon Floating at the bottom right corner of the browser window. As shown in the below Image.

Widget Icon Final

After Clicking on the Icon, the below window pops up.

Floating Popup Widget

This is how you set up and configure Simple Popups Addon.