Popup Builder - Setup

Breadcrumb path: Popups / Popup Builders

You can access this module by clicking on Popups from the General menu, and Popup Builders from the dropdown menu. You will see two Popup Builders to choose from in this section: Info-Popup Builder and Form-Popup Builder. 

Popup Builders Setup Fundamental

In this section, you will learn how to use the Popup Builders module. This is our versatile, content-building software that allows you to easily and efficiently create your own Popups.

Here is an example of a finished Popup built using this module:

Now that you have learned the fundamental idea and seen an example of the end result, this guide will walk you through the process of using the Popup Builder - Setup module. Because there are two Popup Builders currently offered, this article will cover both the Info-Popup Builder and the Form-Popup Builder. These two Popup Builders will be split into the following sections:

1. 1. Info-Popup Builder

1. a. Add Popup

2. b. Main Screen

3. c. General Information

4. d. Popup Analytics

2. Form-Popup Builder

5. a. Add Popup

6. b. Main Screen

7. c. General Information

8. d. Popup Analytics

9. e. Client Auto Email Notification

10. f. Internal Auto Email Notification

11. g. Form Submission Confirmation Popup

This guide will continue walking you through the next section covering Info-Popup Builder - Add Popup.

(1a) Info-Popup Builder - Add Popup

• ● 1 Info-Popup Builder. This module allows you to build an Info-Popup using our custom interface.

• ● 2 Name. In this field, enter a Name for the Info-Popup you would like to build using the Info-Popup Builder.

• ● 3 Add Popup. Click here when you are ready to begin. The following dialog box will appear.

• ● 1 Manage Popup. Click here to open the Info-Popup Builder application and continue with the process of creating your Popup.

(1b) Info-Popup Builder - Main

• ● At the top of the Popup Builder landing page, the title you entered in the previous window will be displayed as Edit - Title.

The Popup Builder Setup process includes three sections:

• ● 1 In this area, you will find the following Popup-specific buttons:

• [On | Off]. This setting controls whether or not the Popup is active.

• View Popup. This button enables you to see how the Popup looks in its current state.

• Save. This button saves and updates the Popup in its current state.

• Publish. This button publishes the Popup in its current state and activates it live on your site.

• ● 2 Editor. This enables you to design your own Popup. This is covered in detail in another section (Popup Builder - Editor).

Once you have finished with these two sections, please continue to the next section of this article, which covers General Information.

(1c) Info-Popup Builder - General Information

In this section, you will enter important General Information that applies to your Info-Popup.

1. (1) General Information. In the following fields, enter General Information about your Info-Popup.

• ● Name *. In this field, you can enter a descriptive Name for your  Info-Popup.

• Duration (sec). In this field, you can enter the Duration in seconds for your  Info-Popup. If the number is greater than 0, the  Info-Popupwill appear for that length of time, and then disappear. If the number is 0, then the  Info-Popupwill display indefinitely.

• Delay Time (sec). In this field, you can enter the Delay Time, which is the time that will elapse before the  Info-Popupappears, after the landing Page has loaded. You will need to turn this setting On in order to enter the Delay Time.

• Open After Scroll (pixels).  In this field, you can enter the Delay Time, which is the time that will elapse before the  Info-Popupappears, after the landing Page has loaded. You will need to turn this setting On in order to enter the Delay Time.

• Start Date. In this field, you can enter a Start Date for your Info-Popup. This is useful, for example, when considering time-specific pages like Holiday Specials.

• End Date. In this field, you can enter an End Date for your Info-Popup. This is useful, for example, when considering time-specific pages like Holiday Specials.

• Include in Pages (if empty included in all pages). Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the  Info-Popup to be included. If you leave this field empty, then the Popup will be included on all pages.

• Exclude From Pages. Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the  Info-Popup to be included.

• Include in Pages Types (if empty included all page types). Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the Info-Popup to be included.

• Exclude From Page Types. Clicking in this field will open a dropdown displaying all Page Types currently in the system. You can add them one by one, choosing the Page Types in which you want the  Info-Popup to be included.

• ● Reminder: be sure to click on the Save button after making final changes, before you continue.

Now that you have entered the desired values into General Information, you can move on to the next section (Info-Popup - Popup Analytics).

(1d) Info-Popup - Popup Analytics

This section displays Popup Analytics information about the Page. This includes the number of Visitors and Visits to each Popup included.

• ● 2 Popup Analytics. The fields in this section provide information about Site Visitors.

• Page. This column displays the Page name for these Analytics.

• Visitors. This column displays the number of Visits.

• Unique. This column displays the number of Unique Visitors to view your Popup.

Now that you have entered the desired values into General Information, you can move on to the next section (Form-Popup Builder).

(2a) Form-Popup Builder - Add Popup

• ● 1 Form-Popup Builder. This module allows you to build an Form-Popup using our custom interface.

• ● 2 Name. In this field, enter a Name for the Form-Popup you would like to build using the Form-Popup Builder.

• ● 3 Add Popup. Click here when you are ready to begin. The following dialog box will appear.

• ● 1 Manage Popup. Click here to open the Form-Popup Builder application and continue with the process of creating your Popup.

Now that you have learned Popup Builder - Setup. That completes this section of the help guide.

(2b) Form-Popup Builder - Main

• ● At the top of the Form-Popup Builder landing page, the title you entered in the previous window will be displayed as Edit - Title.

The Popup Builder Setup process includes three sections:

• ● 1 In this area, you will find the following Form-Popup Builder-specific buttons:

• [On | Off]. This setting controls whether or not the Form-Popup is active.

• View Popup. This button enables you to see how the Form-Popup looks in its current state.

• Save. This button saves and updates the Form-Popup in its current state.

• Publish. This button publishes the Form-Popup in its current state and activates it live on your site.

• ● 2 Editor. This enables you to design your own Form-Popup. This is covered in detail in another section (Popup Builder - Editor).

Once you have finished with these two sections, please continue to the next section of this article, which covers Form-Popup - General Information.

(2c) Form-Popup Builder - General Information

• ● 1 General Information. In the following fields, enter General Information about your Form-Popup.

• ● Name *. In this field, you can enter a descriptive Name for your Form-Popup.

• Duration (sec). In this field, you can enter the Duration in seconds for your  Form-Popup. If the number is greater than 0, the Form-Popup will appear for that length of time, and then disappear. If the number is 0, then the Form-Popup will display indefinitely.

• Delay Time (sec). In this field, you can enter the Delay Time, which is the time that will elapse before the Form-Popup appears, after the landing Page has loaded. You will need to turn this setting On in order to enter the Delay Time.

• Open After Scroll (pixels).  In this field, you can enter the Delay Time, which is the time that will elapse before the  Form-Popup appears, after the landing Page has loaded. You will need to turn this setting On in order to enter the Delay Time.

• Start Date. In this field, you can enter a Start Date for your Form-Popup. This is useful, for example, when considering time-specific pages like Holiday Specials.

• End Date. In this field, you can enter an End Date for your Form-Popup. This is useful, for example, when considering time-specific pages like Holiday Specials.

• Include in Pages (if empty included in all pages). Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the Form-Popup to be included. If you leave this field empty, then the Popup will be included on all pages.

• Exclude From Pages. Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the Form-Popup to be included.

• Include in Pages Types (if empty included all page types). Clicking in this field will open a dropdown displaying all Pages currently in the system. You can add them one by one, choosing the Pages in which you want the Form-Popup to be included.

• Exclude From Page Types. Clicking in this field will open a dropdown displaying all Page Types currently in the system. You can add them one by one, choosing the Page Types in which you want the Form-Popup to be included.

• ● Reminder: be sure to click on the Save button after making final changes, before you continue.

Now that you have entered the desired values into General Information, you can move on to the next section (Form-Popup - Popup Analytics).

(2d) Form-Popup - Popup Analytics

This section displays Popup Analytics information about the Page. This includes the number of Visitors and Visits to each Popup included.

• ● 2 Popup Analytics. The fields in this section provide information about Site Visitors.

• Page. This column displays the Page name for these Analytics.

• Visitors. This column displays the number of Visits.

• Unique. This column displays the number of Unique Visitors to view your Popup.

Now that you have learned about Popup Analytics, you can move on to the next section (Form-Popup Builder - Client Auto Email Notification).

(2e) Form-Popup Builder - Client Auto Email Notification

This section allows you to create and edit a Confirmation Email to be sent automatically upon completion of the Form-Popup. This copy of the Email is sent to the Client.

• ● 1 [On | Off]. This settings controls the on-off status for the Confirmation Email. 

• ● 2 In this area you will find the following buttons:

• View Email. This enables you to view the email in its current edition.

• Email Header and Footer Settings. This controls the Header and Footer Settings that will be covered in another section.

• Short Codes. Click this button to open the Email Template Short Code Manual (shown below).

• ● 3 In this area you will find the following:

• From Address. An entry in this field will reveal to the client the address that the email is being sent from.

• ● 4 Subject. This field determines the email’s subject line.

• Show fields on Client email [Yes | No]. This setting controls whether or not the above fields will be displayed on the email sent out to the client.

• Show fields on BCC email [Yes | No]. This setting controls whether or not the above fields will be displayed on the email sent out to any other recipients added in BCC above.

• ● 5 Email Body. This editor enables you to draft the email that will be sent to the client upon completion of the form. You can use any of the Short Codes to automatically insert the corresponding information that has been collected from the client in the form.

• ● 6 Reminder: be sure to click on the Save Email Template button after making final changes, before you continue.

Now that you have completed your Confirmation Email, you can move on to the next section of the screen (Form-Popup Builder - Internal Auto Email Notification).

(2f) Form-Popup Builder - Internal Auto Email Notification

This section allows you to create and edit a Confirmation Email to be sent automatically upon completion of the Form-Popup. This copy of the Email is sent to Internally, which means that it will be sent to you for recording or accounting purposes, to an Email address you have specified.

• ● 1 [On | Off]. This settings controls the on-off status for the Confirmation Email. 

• ● 2 In this area you will find the following buttons:

• View Email. This enables you to view the email in its current edition.

• Email Header and Footer Settings. This controls the Header and Footer Settings that will be covered in another section.

• Short Codes. Click this button to open the Email Template Short Code Manual (shown below).

• ● 3 In this area you will find the following fields:

• From Address. An entry in this field will reveal to the client the address that the email is being sent from.

• To Address. An entry in this field will reveal to the client the address that the email is being sent from.

• ● 4 BCC. The Blind Carbon Copy field allows you to add other recipients, invisible to the automated recipient.

• ● 5 Subject. This field determines the email’s Subject line.

• ● 6 Email Body. This editor enables you to draft the email that will be sent to the client upon completion of the form. You can use any of the Short Codes to automatically insert the corresponding information that has been collected from the client in the form.

• ● 7 Reminder: be sure to click on the Save Email Template button after making final changes, before you continue.

Now that you have completed your Confirmation Email, you can move on to the next section of the screen (Form-Popup Builder - Form Submission Confirmation Popup).

(2g) Form-Popup Builder - Form Submission Confirmation Popup

This section enables you to create a Confirmation Popup that will appear when a Form Submission is complete.

• ● 1 [On | Off]. This setting controls whether or not the Form Submission Confirmation Popup is turned on.

• ● 2 Popup Title. In this field, you can enter a descriptive title for your Form-Popup. For example: “Thank You For Ordering This Item”.

• ● 3 Conversion Code. This code is used in case you want to track when this Form-Popup is completed. The Conversion Code is obtained directly from Google and inserted into this field.

• ● 4 Page Content. With this editor, you can create and edit the exact page that will be displayed as a popup upon completion of the Form-Popup.

• ● 5 Reminder: be sure to click on the Save Template button after making final changes, before you continue.

Now that you have completed the Form-Popup - Form Submission Confirmation Popup, that completes the section of the user manual covering Popup Builder - Setup.