Create an unlimited number of a Modal Popup that will be displayed under certain conditions. The popup trigger can be set to different actions, such as page loading or scrolling, click or hover elements, browser tab switching, site exit, or even custom JS. You can also set up a chain of popups to call the user to action. Each of the windows has individual style settings for each element, which allows you to add uniqueness to your site. Nearly all ideas concerning a modal popup window can be implemented using the plugin.
To create a new modal popup, go to Snitcher>Add New and manage all the available settings:
Popup
Content type
Select the type of content to be used to create Modal Popup.
- Editor – provides a classic WordPress editor where you can add any text or images.
- Page – provides the list of pages to display one of them in the content. The pages created by the class editor, Gutenberg, or Elementor are added to the list
- Elementor Section Template – provides the list of Elementor Section Template to display one of them in the content. You can add the new section via the Templates item of the WordPress Sidebar menu.
Position
Choose one of the 12 available display positions when creating a modal popup: Top Left, Top Center, Top Right, Left Center, Center, Right Center, Bottom Left, Bottom Center, Bottom Right, Page start, Page end, Inline.
Fullscreen on mobile
The option allows displaying a fullwidth popup on mobile devices, regardless of the set width in the popup settings.
Overlay
The option allows you to disable the overlay to keep the page content active.
Please note: with overlay disable, do not use percentages as units for the popup width and height as this is a relative value and may not work as you expect. You can select percentages for width and px(for example) for height or use any other units for both values.
Display Snitch Title
The toggle to enable/disable the title display at the top of the popup. When the option is enabled, additional settings are available:
- Title tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Title alignment – manage the title alignment (left, center, right) for desktop, tablet or mobile.
Vertical Offset
Specify the value of the popup offset along the Y-axis in different units: px, %, em, vh, vw.
Horizontal Offset
Specify the value of the popup offset along the X-axis in different units: px, %, em, vh, vw.
Width
Specify the popup width using the slider in different units: px, %, em, vh, vw.
Height
Specify the popup height using the slider in different units: px, %, em, vh, vw.
Margin
- The setting allows managing the margin of the current element in different units: px, %, em, vh, vw.
Padding
The setting allows managing the padding of the current element in different units: px, %, em, vh, vw.
Border radius
The setting allows managing the border radius of the popup in different units: px, %, em, vh, vw.
Background type
Select the background type of content for the popup:
- Color – specify the background color and opacity of the popup box using the color picker.
- Image – the option allows you to specify the image URL, background position(center Left, Center Center, Top Left, Top Center, Top Right, Center Left, Center Right, Bottom Left, Bottom Center, Bottom Right), Background repeat(No Repeat, Repeat X, Repeat Y, Repeat), Background size(Auto, Cover, Contain).
- None – select to remove the popup background.
Border Style
Select the border style of the popup box. The following types are available: Dotted, Dashed, Solid, Double, Grooved, Ridged, Inset, Outset. Choose “None” to remove the border. Each of the border types has additional settings for Border width and color.
Box Shadow
Specify the shadow type for the popup box: Inset, Outset. Choose “None” to disable the shadow. The option has additional settings for the shadow offset along the X/Y axis, Blur, Spread, Box-Shadow.
Overlay
- Width – specify the overlay width using the slider in different units: px, %, em, vh, vw.
- Height – specify the overlay height using the slider in different units: px, %, em, vh, vw.
- Padding – the setting allows managing the padding of the current element in different units: px, %, em, vh, vw.
- Margin – the setting allows managing the margin of the current element in different units: px, %, em, vh, vw.
- Border radius – the setting allows managing the border radius of the overlay in different units: px, %, em, vh, vw.
Background type
Select the background type of the popup overlay:
- Color – specify the background color and opacity of the popup overlay using the color picker.
- Image – the option allows you to specify the background image URL, background position(center Left, Center Center, Top Left, Top Center, Top Right, Center Left, Center Right, Bottom Left, Bottom Center, Bottom Right), Background repeat(No Repeat, Repeat X, Repeat Y, Repeat), Background size(Auto, Cover, Contain).
- None – select to remove the popup overlay background.
Border Style
Select the border style of the popup overlay. The following types are available: Dotted, Dashed, Solid, Double, Grooved, Ridged, Inset, Outset. Choose “None” to remove the border. Each of the border types has additional settings for Border width and color.
Box Shadow
Specify the shadow type for the popup overlay: Inset, Outset. Choose “None” to disable the shadow. The option has additional settings for the shadow offset along the X/Y axis, Blur, Spread, Box-Shadow.
Close button
Close button
A toggle to enable/disable the close button display. When the option is enabled, the following button settings are available:
- Place Button on Overlay – the toggle to enable/disable the button on the overlay or on a popup window.
- Close Button Position – select the position to display the button: Top Left, Top Right, Bottom Left, Bottom Right.
- Size – specify the size of the close button in pixels using the slider.
- Padding – the setting allows managing the padding of the current element in different units: px, %, em, vh, vw.
- Margin – the setting allows managing the margin of the current element in different units: px, %, em, vh, vw.
- Border radius – the setting allows managing the border radius of the overlay in different units: px, %, em, vh, vw.
- Background color – specify the background color and opacity of the close button using the color picker.
- Background Hover Color – specify the background color and opacity of the hover close button using the color picker.
- Border Style – select the border style of the button. The following types are available: Dotted, Dashed, Solid, Double, Grooved, Ridged, Inset, Outset. Choose “None” to remove the border. Each of the border types has additional settings for Border width and color.
- Box Shadow – specify the shadow type for the popup box: Inset, Outset. Choose “None” to disable the shadow. The option has additional settings for the shadow offset along the X/Y axis, Blur, Spread, Box-Shadow.
Close overlay
The option allows you to enable the feature of closing the popup by clicking to any place in the overlay area.
Close by key
The option allows you to enable the feature of closing the popup by clicking ESC key of your keyboard.
Triggers
Popup trigger
Once create a modal popup, select one of the provided events from the list that will trigger the popup to appear:
On Load
- The popup will be triggered after page loading. You can also specify the delay in the settings below.
Inactivity
The popup will be triggered after a certain time of inactivity on the site. By selecting this event, the additional option “Inactivity open delay” will be available, where you can specify the delay time in seconds.
On Scroll
The popup will be triggered while the page is scrolling. By selecting this event, the additional options will be available:
- Scrolled – the scroll value after which the window will appear. It can be specified in pixels or percentages. For example: if you enter the value – 50%, it means, after scrolling 50% of the entire page, a popup will appear.
- Scroll direction – the direction of the scroll, which will be taken into account for triggering: Down, Up.
On Scroll to Element
The popup will be triggered when scrolling to a certain page element that is identified through a specified selector. By selecting this event, the additional options will be available:
- CSS selector – a field to enter #id or .class of the element. You can specify multiple selectors separated by commas.
- Scroll direction – the direction of the scroll, which will be taken into account for triggering: Down, Up.
On Click
The popup will be triggered when clicking on a certain page element that is identified through a specified selector. By selecting this event, the additional options will be available:
CSS selector – a field to enter #id or .class of the element. You can specify multiple selectors separated by commas.
On hover
The popup will be triggered when hovering on a certain page element that is identified through a specified selector. By selecting this event, the additional options will be available:
CSS selector – a field to enter #id or .class of the element. You can specify multiple selectors separated by commas.
On Tab Switch
The popup will be triggered when switching to another tab in the browser. By selecting this event, the additional options will be available:
- Tab Un-active – the popup will appear when your site tab is inactive and the user will see the opened window when switching to your site.
- Tab Active – the popup will appear on your active site tab when a user switching to your site from another tab.
On Exit
The popup will be triggered when user going to leave the site.
Shortcode Button
The popup will be triggered when you click on a button added to the page using a shortcode:
[snitcherid="popupID"]Button Text[/snitcher]
Where the "popupID" you can find in the Snitcher posts list or in the sidebar of a specific snitcher when editing.
Custom JS
The popup will be triggered in accordance with the condition specified in the custom JS. You can add custom JavaScript in the settings block “Code”.
setTimeout( ( ) => {
mdpSnitcher( popupID );
}, 1500 );
Open delay
Specify time of popup opening delay in seconds when create a popup windows.
Show after
The number of sessions after which the popup will appear. For example, if you set 2 in this option, then the popup window will be shown to the user not on the first site visit but on the third visit or after two sessions have expired.
Popup chain
The toggle to enable/disable the chain of popups. When the option is enabled, you can select one of the available snitches, after which the current one will be displayed.
Auto close
The option allows you to automatically close the popup after a certain time. You can specify the value from 0.5 to 90 seconds using the slider.
Track referer
This option allows you to display the popup windows only to users who have referred from a specific site. There are different link conditions available:
- Contains – the reference contains a specific link entered in the “Referer” field.
- Exclude – all references except the link specified in the “Referer” field.
- RegExp – allows you to enter a regular expression for the “Referer” field.
Note: When adding links, do not use the attribute “noreferrer”.
Track session
The option allows you to limit the number of impressions during one session. You can specify the number of impressions per session using the slider.
Track website session
The option allows you to limit the number of impressions during one session for the whole website. You can specify the number of impressions per session using the slider
Track visits
The option allows you to show the popup only for the specified number of visits per user. The visits are counted when the user opens the site from the same browser. For example, If you set the value “2” the popup is shown only on the first two visits to the site. If the current user opens the site from another browser or device, the plugin will recognize him as a new user.
Track opens
The option allows you to show the popup the specified number of times per user regardless of the number of visits. One user means the user who opens the site from the same browser. For example, If you set the value “5” the popup will be opened no more than 5 times for the current user. If the current user opens the site from another browser or device, the plugin will recognize him as a new user.
Track closings
The option tracks the close action and allows you to limit the number of impressions for users who press the close button on the popup. For example, If you set the value “1” – the popup will no longer open for the current user if he closes it once. If the current user opens the site from another browser or device, the plugin will recognize him as a new user and the popup will be shown again.
Hide for a while
The option allows hiding the popup display for some time for one user. One user means visiting the site from one browser. You can stop the popup from appearing for several days: 1-30 days.
Block scrolling
The option block page scrolling while the popup is open.
Animation
- Animation – select one of the available popup animations: Bounce, Fade, Flip X, Flip Y, Scale, Slide to right, Slide to left, Slide to top, Slide to bottom, Rotate, Wobble.
- Timing function – select one of the available animation Timing functions: Ease, Linear, Ease-In, Ease-Out, Ease-In-Out.
- Duration – specify animation duration in milliseconds using the slider.
- Delay – specify animation delay in milliseconds using the slider.
Code
- Custom CSS – a field to add the custom styles for the snitcher.
- Custom JavaScript – a field to add the custom JavaScript code for the snitcher.
Assignments
There are available a lot of settings once you create a modal popup that allow you to flexibly customize the display of the popup window on certain pages and conditions. Read more about all available Assignments options.
Save
Once all the blocks of settings are passed and configured in accordance with your wishes, save the changes. Now you can read more How to add the popup to your page.