A PopUp is a great way to show a call to action. In this tutorial we will show you how to link the PopUp to open when a button or image is clicked.


* If you need to know how to create a PopUp you can read this article


This tutorial has two main steps:


  1. Enable Site-wide PopUp Linking Settings
  2. Enable Link Settings on a PopUp
  3. Add class to an image to make it clickable
  4. IMPORTANT for Making Clickable PopUps Work for iOS Devices


Enable Site-wide PopUp Linking Settings


This step will allow your PopUps to be opened by clicking a link. Once you complete this for your site it will enable the settings for all PopUps, it only needs to be done once.


  1. Go to PopUp > Settings.

    Screen_Recording_2018-06-20_at_12.05.53.42_PM.gif

  2. On the Settings Page:
    1. Click the "Load PopUp using" dropdown and set to Page Footer
    2. Scroll down a little bit and check "JavaScript Events"
    3. Click "Save" at the bottom of the page

      Screen_Recording_2018-06-20_at_12.11.23.81_PM.gif

Enable Link Settings on a PopUp


  1. Create a PopUp or edit an existing one.
    * If you need to know how to create a PopUp you can read this article

  2. When editing a PopUp, scroll to the "Behavior" section on the right-hand side.
    1. Click the "Appear when user clicks on a CSS selector" option
    2. In the text field, type a new class name to use as a trigger. Use unique name and don’t add spaces or special characters. It should be formatted with a period, then a unique name. Example: .PopUp1
    3. Check the "Repeated" box next to it so users can click it multiple times

      Screen_Recording_2018-06-20_at_12.51.53.61_PM.gif

  3. Make sure your PopUP is "Active" and click "Save"

Add Class to an Image to Make it Clickable


  1. Edit a page or blog post
  2. Find an image you want to link to a pop up
    1. Click on the image
    2. Click on the "Edit" pencil that appears
    3. In the Edit area, click "Advanced Options"
    4. In the "Image CSS Class" field, add the class you created in the PopUp you want to link to.
      IMPORTANT: DO NOT add the period here. Make sure the capitalization and spelling matches exactly to what you added in your PopUp settings.

      Screen_Recording_2018-06-28_at_12.42_PM.gif

  3. Save the Page or Post you are editing

  4. Go to the page to preview/test that the PopUp is working when the image is clicked.
    Screen_Recording_2018-06-28_at_12.52_PM.gif



IMPORTANT for Making Clickable PopUps Work for iOS Devices


There is an issue with iOS not registering click/touch events bound to elements. In other words, there is another step needed to make the PopUps work properly for Mobile iOS devices


  1. Edit the PopUp you want to open on click
  2. Copy the class you added from Step 3
  3. Scroll to the bottom of the edit page and find the "Custom CSS" section
  4. In that section, paste the class you used and add {cursor: pointer;} after it.

    It should look something like this:
    .yourClassName {cursor: pointer;}

    Screen_Recording_2018-07-11_at_02.41_PM.gif

  5. Save the PopUp and it should start working on iOS