Custom Popups

GatorPopup enables you to interact with your site users in numerous ways. By promoting a page, capturing form data, or notifying users of something important. However, sometimes you may want to use a custom solution for these interactions or provide a functionality altogether different. This is where the Custom Popup type comes in. This type allows you to take control and build any interaction you want.

Creating the popup

To get started, create a new Custom Popup in GatorPopup.

Instead of using simple text as the popup content, you can use HTML to build whatever content you need. Please note <script> and <style> tags will be stripped out to avoid security issues. If you intend to use custom scripts or styling, add them directly to the site where the popup will show up.

To make use of the Popup’s styling, we have added some pre-set CSS classes that can be added to common HTML elements, such as form inputs, labels, and buttons.

All available pre-set CSS classes are listed below

.glp-input
.glp-select
.glp-textarea
.glp-label
.glp-button
Click to copy

Using the popup

When a user is shown the custom popup, GatorPopup will automatically update the results with a view, but it will not be able to tell when a user has interacted with or actioned the popup.

Call the JavaScript function below from your site code to tell GatorPopup this popup has been actioned. This function requires the popup id (you can find this where you added your custom HTML to the popup).

_gl.p.actionPopup(popupId); // replace popupId with the id number
Click to copy

This function will close the popup once called. If you want to keep the popup open after actioning it, call the below function instead:

_gl.p.actionPopupAndStayOpen(popupId); // replace popupId with the id number
Click to copy

When the popup should finally be closed, use the function below to do so:

_gl.p.hidePopup(popupId); // replace popupId with the id number
Click to copy

Once you've set up your own site to use these functions, your custom popup is ready to go.

Refer to the API reference for more information on the Popup JS API by clicking here