Popup Box

Popup Box

The LeadsWithDemos Popup Box is a pop-up box that overlays the webpage content in the center, top-right, top-left, bottom-right, or bottom-left positions. It’s perfect for prompting potential leads to access your unique lead magnet.

To change the position of the popup box from the center to options such as top-right, top-left, bottom-right, or bottom-left, you can do so directly from the popup builder by clicking on the Design option.

Settings for the popup box includes:

“Design” Settings for Popup Box:

Animation

Provides a selection of animations for the popup’s entrance. Available animations include:

• None
• Back in up
• Back in down
• Bounce in
• Bounce in up
• Bounce in down
• Fade in up
• Fade in down
• Flip
• Jack in the box
• Rubber band
• Slide in up
• Slide in down
• Swing
• Tada
• Wobble
• Zoom in
• Zoom out

Allow Closing

This is an on or off toggle that allows you to add a close button to the pop-up box, enabling users to dismiss it if they choose. You can personalize the look and feel of this button.

Hide Duration

Determines the duration, in days, for which the pop-up box should stay hidden after a user closes it.

Close button

Customization options for the close button include background color, hover background color, icon color, hover icon color, position, shape, size, weight, padding, and margin.

• Background color: Enables you to modify the popup close button’s background color.
• Icon color: Allows you to change the color of the popup close button icon.
• Hover background color: Lets you alter the popup close button’s background color when hovered over.
• Hover icon color: Permits changes to the color of the popup close button icon when hovered over.
• Position: Provides options to position the close button at the top-right, top-left, bottom-right, or bottom-left of the popup.
• Shape: Enables you to choose the shape of the popup close button, whether circular or squared.
• Size: This feature allows you to customize the size of the popup close button, with options available in small (S), medium (M), large (L), and extra-large (XL).
• Weight: Enables you to set the icon’s weight.
• Padding: Allows you to add padding around the close button.
• Margin: Permits the addition of margin around the close button.

Floating Button

The Floating Button feature allows you to add a sticky button to your main website, LeadsWithDemos landing pages, or your WordPress product demos, which can trigger the popup box.

This feature includes an on/off toggle. When activated, the floating button will be displayed, and the popup box will only appear when the user clicks on it. This approach is ideal, as it ensures that the popup box is triggered only on click, minimizing disruption to the user experience on your website.

Floating button customization settings:

• Button Text: This field allows you to specify the text that will appear on the floating button. It should clearly state the action you want users to take or any short call-to-action (CTA) you wish to include, such as “Ask Me Now”.
• Font Family: This dropdown list lets you choose the font style for the text on the floating button. You can select from various font options set in the Font Family settings.
• Background Color: This setting allows you to define the background color of the floating button.
• Text Color: Here, you can choose the color of the text displayed on the button. Selecting a color that contrasts well with the background will enhance readability and visibility.
• Background Image: This option lets you upload an image to be used as the background for the floating button. You can click “Click to Upload Image” to select a file from your computer, adding a more personalized touch to the button’s design.
• Style: This setting allows you to choose the shape of the floating button. You can select from different styles, including triangle, rectangle, circle, and semi-circle.
  For each floating button shape, you can position it in various places. For example, the triangle or circle shapes can be placed at the top-right, top-left, bottom-left, or bottom-right. The rectangle and semi-circle shapes can be positioned at the top, right, bottom, or left.

Box Shadow

You can add a shadow effect around the popup box, enhancing its depth and visual appeal. This feature allows for the customization of various parameters that define the shadow’s appearance, giving the pop-up a three-dimensional look without altering its original shape.

You have the option to either not add a shadow effect to the pop-up or select a pre-defined shadow by choosing your preferred option. Alternatively, you can select a preferred option and adjust its settings to achieve your desired look.

Box shadow key parameters:

• Popup Shadow Horizontal Position: Determines the horizontal offset of the shadow from the element. A positive pixel (px) value will shift the shadow to the right, while a negative pixel (px) value will shift it to the left.
• Popup Shadow Vertical Position: Controls the vertical offset of the shadow from the element. A positive pixel (px) value will move the shadow downward, and a negative pixel (px) value will move it upward.
• Popup Shadow Blur Strength: Specifies the amount of blur applied to the shadow. A higher pixel (px) value creates a softer, more diffuse shadow, while a lower pixel (px) value results in a sharper shadow.
• Popup Shadow Spread Strength: Adjusts the size of the shadow. A positive pixel (px) value will increase the shadow size, while a negative pixel (px) value will decrease it, effectively making the shadow sharper or more pronounced.
• Shadow Color: Defines the color of the shadow, allowing for customization to match the overall design of the popup and website.
• Popup Shadow Position: Offers the option to apply either an outer shadow (surrounding the popup) or an inner shadow (inside the popup), impacting the visual effect and depth perception.

This combination of parameters allows for flexible and aesthetically pleasing designs that enhance the user interface of the pop-up.

“Targeting” Settings for Popup Box

These settings enable you to determine when, where, to whom, how often, and on which devices your Popup box will appear—whether on your website, LeadsWithDemos landing pages, or WordPress product demos.

When to Display It?

Allows you to set triggers based on trigger on button click, scroll percentage, exit intent, loading delay, or inactivity.

• Trigger on button click: This functionality is unique to the LeadsWithDemos popup box, allowing it to be displayed when a potential lead clicks a specified button where you placed the snippet code.
  By configuring this setting, you can create a direct interaction point for your potential leads; ensuring that the popup box appears only in response to their action. This helps engage your users effectively and allows for a more controlled user experience. You can implement this feature by using the provided code snippet.

• Trigger on page scroll: An on/off toggle that activates the popup based on how far the user scrolls down the page. When enabled, you can set the scroll percentage at which the popup will appear.
• Trigger on exit intent: An on/off toggle that displays the popup when the system detects the user is about to leave your website, the landing page or your WordPress product demo.
• Trigger after loading delay: An on/off toggle that shows the popup after a specified duration that the user has spent on the page. When enabled, you can set the delay time in seconds.
• Trigger after inactivity: An on/off toggle that displays the popup after a certain period of user inactivity on the page. When enabled, you can define the inactivity duration in seconds before the popup appears.

Where to Display It?

This setting determines the specific URLs where the popup should be triggered or excluded. You can configure the popup to display on all pages, match a specific URL, contain part of a URL, begin with a certain string, or match a pattern using a wildcard.

Where not to Display It?

This setting determines the specific URLs where the popup should not appear or be triggered.

+ Add Rule for Where to Display It and Where Not to Display It:

The “+ Add Rule for Where to Display It and Where Not to Display It” feature allows you to create custom conditions for displaying popups on specific web pages. By clicking this option, you can define criteria such as specific website URLs or parts of website URLs where the popup should appear. Define the exact conditions under which the popup will be shown based on the URLs of your website, landing page or WordPress product demo. When a new rule is added, the condition defaults to OR, meaning the popup will display if any of the specified criteria are met.

For both ‘Where to Display’ and ‘Where Not to Display,’ here are the rules that will be available once you click on ‘+ Add Rule’:

• Is:

Behavior: The popup shows only on pages with URLs exactly matching the specified rule.
Example: Setting Website URL is “https://leadwithdemos.com” displays the popup on leadwithdemos.com but not on https://leadswithdemos.com/features/sandbox-creation/.

• Contains:

Behavior: The popup appears on any page with a URL that includes the specified value.
Example: If the rule contains “/features/”, the popup will be shown on pages with URLs like
https://leadswithdemos.com/features/sandbox-creation/ and
https://leadswithdemos.com/features/lead-capturing/ but not on
https://leadswithdemos.com/wordpress-sandbox/.

• Begins with:

Behavior: The popup appears on pages where the URL starts with the specified value.
Example: A rule beginning with “https://leadswithdemos.com/” will display the popup on various feature pages but not on https://app.leadswithdemos.com/.

• Ends with:

Behavior: The popup appears on pages where the URL ends with the specified value.
Example: A rule that ends with “/lead-capturing/” will display the popup on any page ending with “/lead-capturing/”.

• Matches wildcard:

Behavior: The popup appears on pages where the URL fits a specified pattern, with * serving as a wildcard.
Example: Using “leadswithdemos.com/*/lead” will show the popup on pages like
https://leadswithdemos.com/features/lead-capturing/ and
https://leadswithdemos.com/features/lead-management/, but not on
https://leadswithdemos.com/features/popups-forms/.

Who to Display It to?

Here, you can decide whether to exclude first-time visitors from seeing the popup. You have the option to show the popup to all visitors or only to specific visitors (Filtered Visitors).

Additionally, when you select “Filtered Visitors” within “Who to Display It To”, you have the option to add a “Filter Group” to further refine the selection of specific visitors who will see the popup. These filters use the same AND and OR logic as the advanced filters in LeadsWithDemos. If you click “+Add Rule” within a filter group, the applicable logic will be “AND,” meaning that all specified criteria must be met for a visitor to be included in the results. The logic between filter groups, however, is “OR,” allowing for broader filtering of who the LeadsWithDemos popup will appear to.

You can tailor your popup visibility to specific visitors based on the following criteria:

• Audience Lists: If the visitor is a tracked lead in your LeadsWithDemos database belonging to a specific audience list.

• Visitor: Whether the visitor is a tracked lead in your LeadsWithDemos database or an unidentified visitor.

• Browser Language:  The browser language setting of the visitor.

• Country:  The visitor’s country, determined by their IP address. 

• Days Since Last Visit:  The time elapsed since the visitor’s last visit to your site. When using the “less than” filter, first-time visitors are considered to have a “days since [action]” value of 0. This includes both new visitors and returning visitors without an existing cookie. For instance, applying a filter for “Last page visits less than 7 days ago” will include new visitors since their “days since [action]” is 0, which is less than 7.

• Popup Viewed: Whether the visitor has previously encountered a specific popup.

• Session Count: The total number of analytics sessions recorded for the visitor on your site.

• Page Visited: If the visitor has been to a specific page URL before.

• Referral URL: If the visitor arrived at your site through a specific referral URL.

How Often to Display It?

Controls the frequency of the popup’s appearance.

Frequency

Which Devices to Display It?

Sets the popup to show on desktops, tablets, or mobile devices.

“Advanced” Settings for Popup box

Custom JavaScript

This setting allows you to add personalized JavaScript code to your popup or form, enhancing its functionality.