Kntnt Popup

WordPress plugin that provides shortcode for creating popups.

Description

Kntnt Popup is a lightweight, customizable WordPress plugin that provides an easy-to-use shortcode for creating modal popups on your website. With this plugin, you can create popups triggered by various user actions without writing any JavaScript or HTML code.

This plugin is built on top of Micromodal.js by Indrashish Ghosh, a powerful and accessible micro modal library. We extend our sincere gratitude to the Micromodal.js project and its contributors for providing such an excellent foundation for creating accessible modal dialogs.

Key Features:

• Simple shortcode implementation with extensive customization options
• Multiple trigger options: exit intent, time delay, scroll position
• Customizable animations for opening and closing
• Full control over positioning, dimensions, and appearance
• Lightweight implementation using Micromodal.js
• No additional JavaScript configuration required
• Fully responsive design
• Supports nested shortcodes within the popup content (e.g., forms, galleries)
• Built with modern PHP and JavaScript practices

Installation

1. Download the plugin zip archive.
2. Go to WordPress admin panel → Plugins → Add New.
3. Click "Upload Plugin" and select the downloaded zip archive.
4. Activate the plugin.

Usage

The plugin provides a shortcode [popup]...[/popup] where the content between the opening and closing tags will be displayed in the popup. This content is processed normally, meaning you can include text, images, HTML, and even other shortcodes inside the popup.

Basic usage:

[popup modal show-after-time=3 close-button close-outside-click close-esc-key]This is a typical pop-up.[/popup]

Here's a sophisticated popup that combines multiple opening triggers and closing methods:

[popup modal show-after-time=30 show-after-scroll=50 show-on-exit-intent close-button close-outside-click close-esc-key overlay-color="rgba(0 0 0 / 50%)" style-overlay="backdrop-filter:blur(5px);" open-animation="fade-in-top" close-animation="fade-out-top" aria-label-popup="Demo"]
<h2>Popup demo</h2>
<p>This popup can be triggered by:</p>
<ul>
  <li>Waiting 30 seconds on the page</li>
  <li>Scrolling 50% of the page</li>
  <li>Moving your mouse to leave the page</li>
</ul>
<p>You can close it by:</p>
<ul>
  <li>Clicking the × button</li>
  <li>Clicking outside the popup</li>
  <li>Pressing the ESC key</li>
  <li>Or by <a data-popup-close>clicking this link</a></li>
</ul>
[/popup]

This example creates a modal popup that will appear when ANY of the three trigger conditions are met (whichever happens first). Users can then close it using any of the four available methods, providing maximum flexibility and user control.

Triggers

Kntnt Popup offers multiple ways to control when and how popups appear and disappear. You can use automatic triggers, manual controls, or combine multiple methods to create the perfect user experience.

Time-based trigger

Delayed display: Show a popup after a specified number of seconds:

[popup show-after-time="10"]This popup appears after 10 seconds.[/popup]

Immediate display: Show a popup as soon as the page loads:

[popup show-after-time="0"]This popup appears immediately when the page loads.[/popup]

Scroll-based trigger

Show a popup when the user has scrolled a certain percentage of the page:

[popup show-after-scroll="75"]This popup appears when you've scrolled 75% of the page.[/popup]

Exit intent trigger

Trigger a popup when the user moves their mouse cursor toward the browser's address bar or tab area, indicating they might be about to leave:

[popup show-on-exit-intent]Wait! Don't leave yet. Check out this special offer![/popup]

Note: Exit intent only works on desktop/laptop devices with a mouse cursor.

Clickable triggers

1. Define the popup: First, create a popup with a unique ID:

   [popup id="newsletter-signup"]
   <h2>Subscribe to our newsletter</h2>
   <p>Get weekly updates delivered to your inbox.</p>
   [/popup]

2. Create trigger elements: Add the data-popup-open attribute to any HTML element to make it open the popup:

   Text link:

   <a href="#" data-popup-open="newsletter-signup">Subscribe to our newsletter</a>

   Button:

   <button data-popup-open="newsletter-signup">Sign Up Now</button>

   Image:

   <img src="signup-banner.jpg" data-popup-open="newsletter-signup" alt="Click to subscribe">

   Any element:

   <div class="promo-box" data-popup-open="newsletter-signup">
     <h3>Special Offer!</h3>
     <p>Click anywhere on this box to learn more</p>
   </div>

Important: Both the popup shortcode and trigger elements must exist on the same page.

Closing popups

Kntnt Popup provides several ways for users to close popups, giving you complete control over the user experience.

Built-in close button

Add a close button (×) in the top-right corner of the popup:

[popup close-button]This popup has a close button.[/popup]

You can customize the close button character:

[popup close-button="✕"]This popup uses a different close icon.[/popup]

Click outside to close

Allow users to close the popup by clicking anywhere outside the popup area:

[popup close-outside-click]Click outside this popup to close it.[/popup]

ESC key to close

Enable closing the popup by pressing the ESC key:

[popup close-esc-key]Press ESC to close this popup.[/popup]

Custom close triggers

Make any element inside or outside the popup close it by adding the data-popup-close attribute:

Close link inside popup content:

[popup modal show-after-time="5"]
<h2>Welcome!</h2>
<p>Thanks for visiting our site.</p>
<p><a data-popup-close>Close this message</a></p>
[/popup]

Close button inside popup:

[popup show-after-scroll="50"]
<h2>Newsletter Signup</h2>
<form>
  <!-- form fields here -->
  <button type="submit">Subscribe</button>
  <button type="button" data-popup-close>Maybe Later</button>
</form>
[/popup]

External close trigger (anywhere on the page):

<!-- This button can be anywhere on your page -->
<button data-popup-close>Close any open popup</button>

Parameters

The shortcode accepts various parameters to customize the popup's behavior and appearance. Parameters can be used in three different ways:

• Assignment: The parameter name followed by an equals sign and a value within quotation marks. Example: show-after-time="15" sets the parameter to show after 15 seconds.
• Flag: The parameter name alone, which sets the parameter to a predefined value called the flag value. Example: show-after-time is equivalent to show-after-time="30".
• Omitted: If the parameter is not included at all, a default value is used. Example: If show-after-time is omitted, it's equivalent to show-after-time="false".

Some parameters accept different types of values, such as numbers, strings, or booleans.

Trigger Parameters

These parameters control when and how the popup appears.

show-on-exit-intent

Controls whether the popup shows when the user moves their cursor to leave the page.

Format: show-on-exit-intent=<true|false>

Flag value: true

Default value: false

Examples:

• [popup show-on-exit-intent="true"]: Triggers popup when user attempts to leave the page
• [popup show-on-exit-intent]: Same as above since flag value is true
• [popup]: Won't trigger popup when user attempts to leave the page since default value is false

show-after-time

Controls whether the popup shows after a specified number of seconds.

Format: show-after-time=<seconds|false>

Flag value: 30 (seconds)

Default value: false

Note: This parameter expects a numeric value without units, representing seconds.

Examples:

• [popup show-after-time="5"]: Triggers popup after 5 seconds
• [popup show-after-time="0"]: Triggers popup immediately when the page loads
• [popup show-after-time]: Triggers popup after 30 seconds (flag value)
• [popup]: Won't trigger popup based on time since default value is false

show-after-scroll

Controls whether the popup shows after the user has scrolled a certain percentage of the page.

Format: show-after-scroll=<percentage|false>

Flag value: 80 (percent)

Default value: false

Note: This parameter expects a numeric value without units, representing percentage (0-100).

Examples:

• [popup show-after-scroll="50"]: Triggers popup after scrolling 50% of the page
• [popup show-after-scroll]: Triggers popup after scrolling 80% of the page (flag value)
• [popup]: Won't trigger popup based on scrolling since default value is false

Identification and Styling Parameters

id

Sets a custom ID attribute for the popup's wrapper div.

Format: id=<string|false>

Flag value: None (must provide a value)

Default value: Automatically generated ID

Examples:

• [popup id="newsletter-popup"]: Sets the popup ID to "newsletter-popup"
• [popup]: Assigns an automatically generated ID

class

Adds custom CSS classes to the popup element.

Format: class=<string>

Flag value: None (must provide a value)

Default value: None (no additional classes)

Examples:

• [popup class="custom-theme large-popup"]: Adds "custom-theme" and "large-popup" classes
• [popup]: No additional CSS classes

style-overlay

Adds inline CSS for the overlay element.

Format: style-overlay=<css-string>

Flag value: None (must provide a value)

Default value: None (no inline styles)

Examples:

• [popup style-overlay="backdrop-filter: blur(5px);"]: Adds a blur effect to the overlay
• [popup]: No additional inline styles for the overlay

style-dialog

Adds inline CSS for the dialog element.

Format: style-dialog=<css-string>

Flag value: None (must provide a value)

Default value: None (no inline styles)

Examples:

• [popup style-dialog="box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);"]: Adds shadow
• [popup]: No additional inline styles for the dialog

style-close-button

Adds inline CSS for the close button element.

Format: style-close-button=<css-string>

Flag value: None (must provide a value)

Default value: None (no inline styles)

Examples:

• [popup style-close-button="font-size: 24px; color: #ff0000;"]: Creates a larger, red close button
• [popup style-close-button="background-color: #333; border-radius: 50%; color: white;"]: Creates a dark circular close button
• [popup]: No additional inline styles for the close button

style-content

Adds inline CSS for the popup content area.

Format: style-content=<css-string>

Flag value: None (must provide a value)

Default value: None (no inline styles)

Examples:

• [popup style-content="color: #333; font-size: 16px;"]: Styles text in the popup content
• [popup style-content="background-color: #f9f9f9; padding: 10px;"]: Adds background and padding to content area
• [popup]: No additional inline styles for the content area

Layout and Positioning Parameters

position

Determines the popup position on the screen.

Format: position=<position-value>

Flag value: None (must provide a value)

Default value: center

Examples:

• [popup position="top"]: Positions the popup at the top center
• [popup position="bottom-right"]: Positions the popup at the bottom right
• [popup]: Centers the popup (default position)

Valid position values: center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left

width

Sets the desired width of the popup.

Format: width=<css-length>

Flag value: None (must provide a value)

Default value: clamp(300px, 90vw, 800px)

Examples:

• [popup width="500px"]: Sets popup width to 500 pixels
• [popup width="50%"]: Sets popup width to 50% of viewport width
• [popup]: Uses the default responsive width

max-height

Sets the maximum height of the popup before scrolling is activated.

Format: max-height=<css-length>

Flag value: None (must provide a value)

Default value: 95vh

Examples:

• [popup max-height="80vh"]: Sets maximum height to 80% of viewport height
• [popup max-height="600px"]: Sets maximum height to 600 pixels
• [popup]: Uses the default maximum height (95% of viewport)

padding

Sets the internal padding of the popup.

Format: padding=<css-length>

Flag value: None (must provide a value)

Default value: clamp(20px, calc(5.2vw - 20px), 160px)

Examples:

• [popup padding="30px"]: Sets padding to 30 pixels on all sides
• [popup padding="20px 40px"]: Sets vertical padding to 20px and horizontal to 40px
• [popup]: Uses the default responsive padding

overlay-color

Sets the color of the overlay behind the popup.

Format: overlay-color=<css-color>

Flag value: None (must provide a value)

Default value: rgba(0,0,0,80%)

Examples:

• [popup overlay-color="rgba(0,0,50,70%)"]: Sets a semi-transparent dark blue overlay
• [popup overlay-color="#000000cc"]: Sets a semi-transparent black overlay
• [popup]: Uses the default semi-transparent black overlay

Interaction Parameters