# SW Popup Panel — AI Agent Reference **Module name:** SW Popup Panel **Use this document when:** The user asks about the SW Popup Panel HubSpot module—what it does, how to configure it, or when to choose it over SW CTA Popup. --- ## Instructions for the AI Agent - You do **not** have HubSpot access unless explicitly given. Answer only from this document (and other docs supplied by the user). - When the user wants to change something, direct them to the exact **tab → group → field** names listed in the Configuration Reference. - **Site-wide popups:** Do **not** tell typical users to open Design Manager or edit `sw-site_footer.html` first. Use **Edit global content** → **SW Global Site Footer** (try **Hidden modules** if needed) → add the module in the footer drag-and-drop area **next to** SW Simple Footer → **Publish** global content. See **Section 1b** below. - **Page Body Class:** Do **not** default to **Settings → Advanced**. On Smithworks themes, Body Class is in the **page content editor**: **Page contents** (left sidebar) → **Hidden modules** → **Body Class**. See **Section 1c** below and SW AI Documentation → **#page-body-class-field**. - Support / bug issues: point to **https://smithworks.marketing/contact**. --- ## 1. Purpose and When to Use **SW Popup Panel** is a **flexible, extensible popup** for advanced use cases. Use it when: - You need **multiple popup variants** with different content per page (body class matching) - You want **announcement banners** (first item shows on all pages) - You need **more positioning options** (top, bottom, left, right, corners, modal) - You want **per-variant triggers** (time delay, scroll %, exit intent) and session behavior - You need **greater extensibility** (thumbnail layout, panel size, padding, style settings per variant) **Placement (summary):** For **site-wide** use, add the module in the **global footer content editor** (see **Section 1b**). For **per-page** variants, use **Label & Body Class** on each content item and add the sanitized value to the page **Body Class** field (**Section 1c** — not Settings → Advanced) unless the class comes from the blog template (**Section 3.1**). **When to choose SW CTA Popup instead:** When you need a simple, one-off popup with quick setup. SW CTA Popup is faster to configure for single-variant popups on one page or site-wide. --- ## 1b. Site-wide — global footer (content editor) Standard Smithworks themes use a **global footer** with a **drag-and-drop area** (label is usually **SW Footer Modules – Add footer modules here**) that already contains **SW Simple Footer**. Add **SW Popup Panel** (or **SW CTA Popup**) as **another module in that same area**—not by editing only SW Simple Footer's fields. 1. Open any **live page** using the Smithworks theme. 2. Click the **footer** in the preview. 3. Choose **Edit global content** or **Open in global content editor** (HubSpot wording may vary). 4. In the left sidebar, open **SW Global Site Footer**. If it is missing, check **Hidden modules** (see SW AI Documentation → First-Time Setup → Troubleshooting). 5. In the footer layout, find the region that contains **SW Simple Footer**. Use **Add** / **Add row** (or HubSpot's equivalent) to insert a module and choose **SW Popup Panel**. 6. Configure the module, then **Publish** global content. **If the user only sees SW Simple Footer fields** and cannot add a module, they may be focused on the module instance instead of the **parent** footer layout or **SW Global Site Footer**. Guide them there before Design Manager. **Developer note (theme authors only):** Implemented as `sw-partials/sw-site_footer.html` with a `dnd_area`. --- ## 1c. Where to edit page Body Class (Smithworks themes) When a page needs a custom class on `` (to match **Label & Body Class** on a Popup Panel item, or to add `cta-popup-hide`): 1. Open the **page** or **landing page** in the **content editor**. 2. Left sidebar: **Page contents** (content tree). 3. Expand **Hidden modules**. 4. Select **Body Class** and enter the token (e.g. `pricing-page-cta`, `ai-resource-popup`, `cta-popup-hide`). Use the same sanitized value as in the module when matching variants. 5. **Publish** the page. **Do not** tell users to use **Settings → Advanced** as the default path for Body Class on Smithworks themes. **Exception:** Some **system page** templates use a fixed `` class and may not expose **Body Class** under Hidden modules. **Implementation note (developers):** The field is defined in `templates/header.html` (`body_class`, exported to template context). --- ## 2. Choosing Between SW CTA Popup and SW Popup Panel | Use Case | Choose | |----------|--------| | Simple one-off popup; quick setup; one page or global footer | **SW CTA Popup** | | Multiple popup variants; different content per page (body class); announcement banners; more positions; per-variant triggers | **SW Popup Panel** | --- ## 3. Module Structure 1. **Content Items** (repeater) — Each item is a popup variant with headline, body text, thumbnail, buttons, style settings, timing triggers, and session behavior. 2. **Body class matching** — Add the variant's **Label & Body Class** (or its sanitized form, e.g. `pricing-page-cta`) to the page **Body Class** field (**Section 1c**). First matching enabled item wins. 3. **First Item Is Announcement** — When ON, the first item shows on all pages regardless of body class. Use for site-wide announcement banners. 4. **Default Behavior** — Show first item unless class matches, or only show if class matches. ### 3.1 Blog posts and `tag-*` body classes (SW Blog Single Post) When the site uses **SW Blog Single Post** (and the theme template includes tag classes), each HubSpot **blog tag** on the post adds a **`tag-{slug}`** class on `` — for example `tag-strategy`, `tag-chief-marketing-officer`, where `{slug}` is the topic's URL slug (lowercase). **Using SW Popup Panel with blog tags:** In **Content Items**, set **Label & Body Class** for a variant to the **same** token as the tag class (e.g. `tag-strategy`). That class is **already present** on the blog post from the template, so the user **does not** need to add an extra **Body Class** in page settings for that tag — matching still works off ``. **Multiple tags on one post:** The post may have several `tag-*` classes. The module resolves which variant to show using the **order of Content Items** in the repeater: the **first enabled item whose Label & Body Class matches a class on ``**, in **repeater order** (top item checked first), is the one that shows. Put the highest-priority variant **first** in the list when posts can match more than one tag-driven item. --- ## 4. Configuration Reference The module has **Content** and **Accessibility** tabs. ### 4.1 Content Tab **Enabled** — Toggle. If OFF, no popup on any page. **Module ID** / **Module Class** — Optional. Custom ID and CSS classes. **First Item Is Announcement** — Toggle. When ON, first item shows on all pages; `cta-popup-hide` does not hide it. **Default Behavior** — Show first item unless class matches, or Only show if class matches. **Content Items** (repeater) Each item includes: - **Enabled** — Toggle per variant. - **Label & Body Class** — Label and body class for page matching (e.g. `Pricing Page CTA` → `pricing-page-cta`). - **Headline**, **Body Text**, **Content Alignment** - **Thumbnail Position** — Top, Left, or Right. - **Thumbnail Width (px)** — When Left/Right, width in pixels. - **Layout on Narrow Panel** — Stack or Always side-by-side (Left/Right only). - **Thumbnail** — Optional image. - **Button Visibility** — Button or No Button. - **Buttons** (repeater) — When Button Visibility = Button. Add buttons with text, link, style, size. - **Panel Size** — Width (px, %, vw, full), Height (px, %, vh, auto), **Padding** (equal all sides, default 25px). - **Position** — Bottom, Bottom Right, Bottom Left, Top, Top Right, Top Left, Left, Right, Modal. - **Animation Speed** — Instant, Fast, Medium, Slow. - **Style Settings** — Background, headline/text colors, corner radius. - **Timing & Triggers** — Time delay, scroll %, exit intent per variant. - **Session Behavior** — Once per session, suppression days per variant. **Accessibility** (group) — ARIA label. --- ## 5. Common Tasks ("How Do I…") ### Add popup site-wide (global footer) Follow **Section 1b** (Site-wide — global footer). ### Show different popup per page **Content** tab → **Content Items**. Set **Label & Body Class** on each item (e.g. `Pricing Page CTA`). On each page: **Page contents** → **Hidden modules** → **Body Class** — enter the same sanitized value (e.g. `pricing-page-cta`). See **Section 1c**. ### Show a popup on blog posts by tag (no extra Body Class) **Blog posts** with **SW Blog Single Post** get **`tag-{slug}`** on `` per HubSpot tag. In **Content Items**, set **Label & Body Class** to that same value (e.g. `tag-strategy`). Do **not** duplicate it in the page **Body Class** field unless you want redundancy. If a post has **multiple tags**, **repeater order** decides which variant wins: the **first** Content Item (top to bottom) that matches a `tag-*` class on the body shows. ### Show announcement on all pages **Content** tab → **First Item Is Announcement** = ON. The first content item shows on all pages. ### Hide popup on specific pages Add `cta-popup-hide` in **Page contents** → **Hidden modules** → **Body Class**. (Does not apply when First Item Is Announcement = ON for the first item.) ### Change popup position **Content** tab → **Content Items** → expand item → **Position**. Choose from Bottom, Top, Left, Right, corners, or Modal. ### Change panel size or padding **Content** tab → **Content Items** → expand item → **Panel Size**. Set Width, Height, and **Padding** (equal on all sides). ### Add buttons **Content** tab → **Content Items** → expand item → **Button Visibility** = Button. In **Buttons** repeater, add items. Set Button Text, Button Link, Style, Size. ### Change when popup appears (per variant) **Content** tab → **Content Items** → expand item → **Timing & Triggers**. Enable Time Delay, Scroll %, or Exit Intent. Set **Delay (seconds)** and **Scroll Percentage**. --- ## 6. Document Version - **Module reference:** SW Popup Panel. - **Doc last updated:** 2026-03-26. - **2026-03-26 (later):** Page Body Class: **Page contents → Hidden modules → Body Class**; not Settings → Advanced; new Section 1c; module `fields.json` help text aligned. - **2026-03-26:** Site-wide placement: global **content editor** path (footer DnD, SW Global Site Footer); Section 1b and Common Task. - **2026-03-19:** Blog posts: `tag-{slug}` body classes from SW Blog Single Post; Popup Panel Content Items can use the same tokens so users need not add extra Body Class; repeater order when multiple tags match. - **2026-03-18:** Initial documentation. Clarified purpose: flexible popup for multiple variants, body class matching, announcement banners. When to choose SW CTA Popup instead. - When the module changes materially, this doc is updated; re-download to keep your AI agent current.