Creating a Custom Popup Takeover in the Soapbox administrator

With the Popups app, you can easily create and control popups that appear on your main website from within the Soapbox administrator. There are two different types of Popups that you can create: a Custom Popup Takeover and a Donations Popup Takeover. The Custom Popup Takeover allows you to define a hero image, a title, a description and one or more action buttons.

An example of a Custom Popup Takeover can be seen here:

To use either, tour first step is to add the Popups code to your main website.

After the code has been added, you can create Popups in the Soapbox administrator that will appear on your main website.

To create a Custom Popup Takeover in the Soapbox administrator:

Define the contents of the Popup

1. Go to the Popups Manager
2. Click New
3. In the modal, click Custom Popup Takeover
4. For Name, enter a name for the popup to be used in the administrator to identify it
5. For Published, select whether you wish the Popup to be published. Published Popups are displayed on a website with the Popups code included when the conditions of a Popup are met. Unpublished Popups no longer appear on a website with the Popups code included even if the conditions of a Popup are met.
6. For Title, enter the text you wish to appear to visitors at the top of the Popup
7. For Description, enter the text you wish to appear to visitors under the Title at the top of the Popup
8. For Upload Image, click Upload File and select an image from your computer that you wish to use in the Popup. The optimal dimension for the image is 464 px wide x 193 px high.
9. For Select Image, if you have uploaded an image earlier, you may select it from the dropdown
10. Click Apply. By clicking apply, your Popup will be saved and the additional tabs in the add/edit view will become active.

Define the Action and Cancel Buttons

A Popup can have one or more action buttons that you define as well as a cancel button that allows the visitor to easily close the Popup.

1. Click the Buttons tab
2. If you wish to display one or more action buttons in the Popup, click New
3. For Button Text in the modal popup, enter the text you wish to appear in the button to the visitor
4. For Destination URL, enter the URL to which you wish to send the user if they click the button. This may be either a full URL for another page or website (e.g., https://www.example.com/give), an anchor tag for a Donations modal popup on the current page (e.g., #donate), or the full URL for another page that includes an anchor tag for a Donations modal popup (e.g., https://www.example.com/give#donate)
5. Click Save
6. Repeat for each action button you wish to add
7. For Display Cancel Button in the Cancel Button Options section, choose whether you wish to show a cancel option
8. For Cancel Button Text, enter the text you wish to display to the visitor
9. For Cancel Button Type, choose to display but cancel option as text or as a button

Define the Trigger or Triggers that open the Popup

There are three types of triggers that can open a Popup. You can use one, two or all three to open the popup - though it is customary to have only one trigger per popup.

1. Click the Triggers tab
2. Click New
3. For Type, select one of the following:
   1. On Exit-Intent: This fires when the visitor's mouse moves out of the browser window;
   2. After X Percent Scrolling: This fires when the visitor moves down the percentage of the page you define;
   3. After X Seconds: This fires after the visitor has been on the page for the number of seconds you define.
4. For Type Details:
   1. If you selected Exit-Intent for Type, the Type Details parameter will not be shown
   2. if you selected "After X Percent Scrolling" for Type, enter the percentage you wish to use to fire the event
   3. If you selected "After X Seconds" for Type, enter the number of seconds after which you wish the event to fire
5. Click Save
6. Repeat if you wish to add another type of trigger to the Popup

Define the Audience Segment or Segments that determine which visitors see the Popup

There are two types of Audience Segments that can define who sees a Popup. One is based on the current URL of the visitor. The other is based on whether the Popup has already appeared to the visitor. Both types of Audience Segments can be used at the same time.

1. Click the Audience Segment tab
2. Click New
3. For Type, select one of the following:
   1. Frequency
   2. Current URL
4. For Type Detail:
   1. If you selected Frequency for Type, enter values for a) the maximum number of time(s) the Popup will appear per visitor and b) the minimum amount of time between two appearances in seconds, minutes, hours or days.
      
      As an example, you may wish to have the Popup appear to a visitor a maximum of 4 times with a minimum of 1 day between appearances.
      
      
   2. If you selected Current URL for Type, enter the logical operator and the text used to evaluate the URL. If you wish, you may add multiple Current URLs by clicking Add Additional URL. If multiple URLs are added, the Popup will be displayed when any of the conditions are met - not when all of the conditions are met.
      
      As an example, you could choose to have the Popup appear on all pages of your main website but selecting "contains" and entering all of or a portion of your domain.
      
      You could choose to have the Popup appear on only one page by selecting "equals"and entering the exact URL of the page where you wish the Popup to appear.
      
      You could choose to have the Popup appear on three specific pages by selecting "equals"and entering the exact URL of the one of the pages page where you wish the Popup to appear and then clicking the Add Additional URL link to repeat the process two more times.
5. Click Save
6. Repeat if you wish to add another Audience Segment

After you are finished, click Save to commit your changes and exit the add/edit Popup view.