Documentation Easy Popup

Module Tab

Content Type

• HTML: Display custom HTML content
• Image: Show an image in the popup
• YouTube: Embed a YouTube video

For your selected content type, you'll need to provide:

• HTML Content: For HTML type, enter your content in the editor
• Image: For image type, select or upload an image
• YouTube URL: For YouTube type, paste the YouTube video URL

Display Options Tab

Enable Cookie

Choose whether to enable cookie tracking for your popup:

• Yes: Popup will only show once per visitor within the cookie duration
• No: Popup will show on every page visit

Cookie Duration (days)

Set how many days the cookie should last before showing the popup again to the same visitor (e.g., 1, 7, 30 days).

Display Trigger

Select when the popup should appear:

• Immediate (On Page Load): Shows as soon as the page loads
• Delayed: Appears after a specified number of seconds
• On Scroll: Displays after the user scrolls to a certain percentage
• Exit Intent: Triggers when user's cursor moves to leave the page

Animation Type

Choose the animation effect for your popup:

• Flip: Popup flips into view with a 3D rotation
• Fade: Simple fade-in effect
• Slide: Popup slides into position
• Zoom: Popup zooms from small to full size
• Bounce: Popup appears with a bouncy animation

Animation Speed

Set how quickly the animation plays:

• Slow (1 second): More noticeable animation
• Normal (0.4 seconds): Balanced animation speed
• Fast (0.15 seconds): Quick, subtle animation

Popup Position

Determine where the popup appears in the viewport:

• Center: Centered in the browser window
• Top: At the top center of the screen
• Bottom: At the bottom center of the screen
• Top Left: Positioned in the top left corner
• Top Right: Positioned in the top right corner
• Bottom Left: Positioned in the bottom left corner
• Bottom Right: Positioned in the bottom right corner

Note: On mobile devices, popups will automatically center for better user experience, regardless of the position setting.

Targeting Tab

Device Targeting

Choose which devices the popup will be displayed on:

• All Devices: Display the popup on all device types (desktop, mobile, and tablet)
• Desktop Only: Show the popup only on desktop computers
• Mobile Only: Show the popup only on mobile phones
• Tablet Only: Show the popup only on tablet devices

This setting is useful when you want to create different popup experiences for different devices, or if you want to restrict your popup to specific device types. For example, you might want to show a newsletter signup only to desktop users, or a special mobile app promotion only to mobile users.

Note: On mobile devices, popups will automatically be centered regardless of your position setting in the Display Options tab to ensure better visibility on smaller screens.

Styling Tab

Popup Width

Set the width of your popup window. Enter a value with a unit (e.g., "600px" or "80%").

• You can use pixels (px) for a fixed width
• You can use percentage (%) for a responsive width relative to the screen size
• For image popups, the width will automatically adjust to the image size

Popup Padding

Define the internal spacing between the popup content and the popup edges (e.g., "40px").

• Larger padding creates more white space around your content
• Smaller padding allows for more content in the same popup size
• Padding applies to all sides of the popup content (top, right, bottom, and left)

Rounded Corners

Choose whether your popup has rounded corners:

• Yes: Applies a 16px border radius for a modern, rounded appearance
• No: Uses sharp corners for a more traditional, rectangular appearance

Note: On mobile devices, the popup width will automatically adjust to 90% of the screen width regardless of your setting to ensure proper display on smaller screens.

Colors Tab

About Transparency Values

Transparency values range from 0 to 1:

• 0 = Completely transparent (invisible)
• 0.5 = Semi-transparent
• 1 = Completely solid (no transparency)

Popup Background Color

Select the background color for your popup content area. You can:

• Click the color swatch to open a color picker
• Enter a hex color code directly (e.g., "#ffffff" for white)
• The default is white (#ffffff)

Popup Transparency (0-1)

Set the transparency level of the popup background:

• 1 = Completely solid background
• 0.5 = Semi-transparent background
• 0 = Completely transparent background (content only)

Overlay Color

Choose the color for the overlay that appears behind the popup and covers the website content:

• Click the color swatch to open a color picker
• Enter a hex color code directly
• The default is a dark color (#9542e3 in this example)

Overlay Transparency (0-1)

Set the transparency level of the background overlay:

• Higher values (closer to 1) make the overlay more opaque
• Lower values (closer to 0) make the overlay more transparent
• In this example, 0.8 creates a mostly opaque overlay that still allows some of the background to show through

Backdrop Blur

Set the blur effect (in pixels) for the website content behind the popup:

• 0 = No blur effect
• 1-5 = Light to moderate blur
• 6+ = Heavy blur
• In this example, a value of 3 creates a subtle blur effect

This blur effect can enhance the focus on your popup by making the background content less distracting.

Implementation Tips

1. Start with the content type that best fits your needs
2. Choose a trigger method based on when you want the popup to appear
3. Set cookie options to prevent popups from becoming annoying to repeat visitors
4. Configure device targeting to show popups only on appropriate screen sizes
5. Adjust the animation to match your site's design aesthetic
6. Customize the appearance with style settings
7. Test your popup on different devices to ensure it looks good everywhere

Remember that on mobile devices, all popups will be centered for better user experience, regardless of the position setting.