WIDGET TEST LAB
Scripts load from: http://localhost:3000
🔔 Notifications Widget
Shows rotating social proof popups (purchases, signups, reviews, visitor counts, etc.).
Script: widget.js — reads the site config and events from the API.
Configuration widget.js
Site ID
?id=
⬤ Not loaded
What to expect

A floating toast notification will appear in the corner (bottom-left by default) cycling through recent events.
Also includes a 💬 Feedback pill if show_feedback is enabled in the site config.

Fetches /api/widget/:id/config & /api/widget/:id/events

📢 Announcement Bar
A sticky top/bottom banner with optional countdown, link, close button, and A/B testing.
Script: bar.js
Configuration bar.js
Site ID
?id=
⬤ Not loaded
What to expect

Bars are fetched from /api/widget/:id/bars. Each active bar renders at the top or bottom of the page.
Closed state is tracked in sessionStorage. Click "Reset Session" to re-show closed bars.
Fetches /api/widget/:id/bars

⏱️ Countdown Timer
Floating, bar, or inline countdown timers. Supports fixed date, evergreen, and daily timer types.
Script: timer.js — looks for [data-popwis-timer="TIMER_ID"] elements on the page.
Configuration timer.js
Site ID
?id=
Timer ID
data-popwis-timer=
⬤ Not loaded
Inline Placeholder data-popwis-timer

For inline display type, place this div and the timer will render inside it.

Timer will render here (inline display type only)

Floating and Bar display types appear automatically — no placeholder needed.

🎡 Spin-to-Win Wheel
A gamified popup wheel for capturing emails and awarding discount codes.
Script: spin.js — requires both a Site ID and a Wheel ID.
Configuration spin.js
Site ID
?id=
Wheel ID
?wheel=
⬤ Not loaded
Button Trigger (optional) data-popwis-spin

If the wheel uses trigger: button_click, add this attribute to any button:

← This button has data-popwis-spin set to the Wheel ID
📋 Forms Widget
Popup, inline, or tab-style forms with custom fields. Fetches config by Site ID + Form ID.
Script: form.js
Configuration form.js
Site ID
?id=
Form ID
?form=
⬤ Not loaded
Inline Placeholder data-popwis-form

For inline display type, target elements use data-popwis-form="FORM_ID".
For button_click trigger, the same attribute triggers the popup.

Inline form renders here
🚪 Exit Intent Offer
A fullscreen modal that displays when the user's mouse leaves the viewport (exit intent).
Script: exit-offer.js — Note: this script reads the siteKey from script[src*="widget.popwis.net"], so in local testing use widget.js to provide the site key.
Configuration exit-offer.js
Site ID
?id= (via widget.js)
⬤ Not loaded

💡 After loading, move your mouse above the address bar (outside the viewport) to trigger the exit intent. You can also click "Force Trigger" below.

What to expect

Fetches offers from /api/widget/:id/exit-offers. Matches current page path against target_pages.
Uses localStorage to track show frequency (once/day, week, forever, session).
Fetches /api/widget/:id/exit-offers

🛒 Cart Abandonment
Tracks when users abandon cart pages (exit intent, back button, tab close). Sends a beacon to the API.
Script: cart.js
Configuration cart.js
Site ID
?id=
⬤ Not loaded
Simulate Cart Page

The cart script only activates on cart pages (URLs containing /cart, /checkout, /basket, etc.).
To test locally, simulate the URL containing one of these patterns:

Abandonment Events Log
No events yet. Load the tracker and navigate away (or use exit intent).
What to expect

On a cart page, the script:
1. Generates a session ID (sessionStorage)
2. Watches for exit intent (mouse leaves top), back button, or tab close
3. Sends a POST to /api/widget/:id/cart/abandon via sendBeacon
4. On recovery pages (/thank-you etc.), marks the session as recovered.
Fetches /api/widget/:id/cart/config

🔧 SDK / Track API
Use window.Popwis('track', ...) and window.Popwis('identify', ...) to manually send events.
Requires widget.js to be loaded first.
Setup
Site ID
⬤ Not loaded
Identify Visitor
Name
City
Country
Track Event
Event Type
Extra Payload
SDK Payloads Reference
purchase / signup / view { name, city, country }
visitor_count { count: 42 }
low_stock { product: "Air Max", remaining: 3 }
activity_count { count: 18, hours: 24, action: "bought" }
review { rating: 5, product: "Sneakers" }