Home » KB Articles » Installation & Setup » How to Create a Click To Open Popup in PopupAlly

How to Create a Click To Open Popup in PopupAlly

With PopupAlly Pro, you can create a click-to-open popup that appears when someone clicks on a text link or an image.

How Click-To-Open Popup Works

Create a click to open popup so when someone lands on the page and clicks the linked text or linked image, a popup will appear.

Video Tutorial of Click-To-Open Popup

Written Tutorial

Step 1: Configure the Display Settings

Go to: PopupAlly Pro > select the popup > Display Settings > Check the box to enable the “Is this a click-to-open popup?” setting

GIF showing click to popup setting in PopupAlly Pro

Step 2: Set the Click To Open Setting

There are two main options: a link or HTML class.

Option 1 (recommended): A link point to
Select “a link pointing to” option from the dropdown menu, then copy the code from the blue box and move to Step 3 in this tutorial.

Screenshot from PopupAlly showing a link pointing to setting

Option 2: an element with HTML class
This is a more advanced option and you need a basic understanding of HTML code to implement.

Select “an element with HTML class” option from the dropdown menu, then select the class code from the blue box.

Screenshot from AccessAlly showing an HTML class setting

Note: You must select either Option 1 (recommended) or Option 2. You cannot use both options.

Step 3: Configure the Page Display Settings

Since the popup will only show when the special link or class is used, set the Page Display Settings to all pages and posts with no exclusions.

Check the box for “Show this popup on which posts/pages?” setting

Screenshot from PopupAlly pro showing page settings

Step 4: Add your link to a page

Create a new page or navigate to the page you want to add the click to open popup.

Option 1 (recommended): A link point to

Copy the code from the blue box in Step 2. There are two options for your link: text or image.

Text

  1. Add the desired copy to your page
  2. From the text editor, click the link button
  3. Add the link copied from the blue box for this text
  4. Publish changes
GIF showing adding a click to open popup link to text

Image

    1. From the text editor, add the link copied from the blue box to your link box for this image
    2. Add the desired image to your page from the media library between the link open and close tags

Note: Under the Attachment Display Settings, you must leave the Link To setting set to None
screenshot from PopupAlly Pro showing link settings

  • Publish changes

 

GIF showing adding a link to an image for a click to open popup
Option 2: an element with HTML class

Note: this setting can only be used for linking an image.

  1. Add an image from the media library or upload a new image to your page
  2. Edit the HTML code in the text editor by adding the class copied from the blue box in Step 2
  3. Publish changes
GIF showing class settings for a click to popup setting

Test

  1. View your page on an incognito or private browser.
  2. Test your text link or image by clicking on it and seeing the popup.
  3. Be sure to opt-in and test the process all the way through.

Troubleshooting

  • If you don’t see the popup, double-check the link you copied from the blue box.
  • If you’re using Option 2: an element with HTML class and you don’t see the popup, double-check you’ve pasted the class code in the correct location.
  • If you have additional trouble with Option 2: an element with HTML class, try configuring the click to popup setting using Option 1.
  • Always test on an incognito or private browser.

Want to create a click-to-open popup that is triggered when someone clicks on an image? See this tutorial: How to Create a Click-to-Open Popup (Image-trigger).

Frequently Asked Questions

Related Posts:

Table of Contents

Contact Support

Our hours of operation are 9am-7pm EST, Monday through Friday.

Technical Support