Hug Popups

Purpose

This plugin allows you to create custom overlay popup windows. Unlike standard popups, these are “smart” – they can be scheduled to change content based on the season or specific dates without you having to manually edit the page.

Installation of this plugin creates a native WordPress post type called “Hug Popups”.

Creating a Popup

1. From the WordPress dashboard, add a New Hug Popup. You can do this from the left sidebar or from the top menu bar.

2. Give the Popup a Title (e.g. “Spring Sale” or “Contact Form”). This is for your internal use only.

3. Use the standard WordPress editor to build your content.

Pro Tip: Wrap your content in a Group Block if you want to use the Scheduling features (see “Smart Scheduling” below).

Trigger Settings

In the Popup Settings box (right-hand sidebar), define how the popup appears:
  • Trigger Type:
    • Click Anchor: The popup appears when someone clicks a specific button or link.
    • Auto-Load: The popup appears automatically after the page loads.
  • Popup Width: Choose from Tiny (450px) to Large (1100px)
  • Trigger Selector: (For “Click Anchor” only) This is the “ID” or “Class” assigned to the button that should trigger the popup.
    • Example: If you type “.contact-btn”, any button on your site with the “contact-btn” assigned to it will now open this popup.
  • Auto-load Delay: (For “Auto-load” only) How many seconds to wait before the popup displays.
  • Show once per session: If checked, a user will only see the popup once. If they refresh the page or go to a new one, it won’t bug them again until they restart their browser.

Deploying the Popup

To make a popup active on a specific page, you must place its Shortcode on that page.
  • Go to the Hug Popups list view
  • Locate the Shortcode column
  • Click the code (e.g. ) to copy it
  • Paste the code anywhere on the page that you want the popup to be “available”
    • Note: The popup will remain hidden until the “Trigger” (the click or the timer) tells it to appear.

Smart Scheduling

You can put multiple “Group Blocks” inside a single popup to show different messages at different times.

– Date Range: Set a start and end date (e.g. December 1st to December 25th for a Holiday Greeting).

– Seasonal: Set it to “Summer” or “Winter” to automatically rotate content based on the time of year.

– Default: If no schedules match the current date, the popup with show the “Default” content.

Previewing Schedules

In the Hug Popups list view, you will see “Pills” in the Current Schedule(s) column.

– Green Pill: Default content

– Blue Pill: Scheduled/Seasonal content

Click any pill to see a live preview of exactly what that version of the popup looks like without leaving the page. Note: this gives a general idea of how the popup will look; due to specific styling on the Popup itself, the final view may be different.

Quick Copy Reference

The list view is designed for speed. Use these shortcuts:

– Click the Shortcode: copies the code for pasting onto a page that will display it.

– Click the Selector: copies the “Class Name” (without the dot) so you can easily paste it into the “Additional CSS Class” field of any button on the site.

Troubleshooting

– Popup isn’t appearing: Ensure the shortcode is actually pasted on the page you are testing.

– The button doesn’t work: Check that the Trigger Selector in the settings (e.g. .my-button matches the CSS Class you gave to your button.

– Scroll issues: The plugin automatically hides the site’s scrollbar when a popup is open to prevent “double scrolling”. If the site feels “stuck”, ensure the popup has a close button.