PRZIO popups - install, render & configure

Overview

Popups are popup activities stored on your PRZIO project. The same SDK that loads personalization can deliver popups for that project.

• Dashboard — Create and edit activities under Project → Popups; each activity has HTML (or A/B experiences), urlConditions, optional audienceConditions, and popupSettings.
• Your website — One script tag with your project ID so the loader can fetch eligible activities and evaluate rules in the browser.
• Go-live — Set the activity status to activated after you have tested URL matching and triggers on a staging or production URL where the snippet is installed.

How popups render on the page

1. The PRZIO SDK loads on your origin (typically before </body>).
2. It determines the current page URL and loads popup configuration for your project.
3. Each activated activity is checked against URL conditions (and optional audience rules).
4. When a activity matches, its popupSettings define when the modal appears: page load, delay, exit intent, scroll depth, or presence of a DOM element.
5. The modal HTML is injected into the page; dismiss and frequency options (cookie/session, exit-intent cooldowns) apply per your settings.

Prerequisites

1. PRZIO account — Sign in and open (or create) a project.
2. Project ID — Copy it from the project; it is required on the script tag.
3. Access to your site’s HTML — Ability to add one script before </body> (or tag manager equivalent).
4. Popup editor — Open Project → Popups and create or edit an activity (app route pattern /popups/<activityId>).

Complete tutorial (same as /integration/popup)

Mirrors the in-app Popup Integration · Complete Tutorial flow: conversion and exit-intent popups with triggers and targeting.

Table of contents:

1. Create your first popup
2. Configure popup settings & triggers
3. Set up URL targeting
4. Install PRZIO Popup SDK
5. Initialize Popup SDK
6. Test your popup integration

1 · Create your first popup

Design your conversion popup in the PRZIO editor

Step 1.1: Open the popup builder

1. Open your project dashboard
2. Click Popups in the sidebar
3. Click Create New Popup

Step 1.2: Design your popup

1. Enter a popup name (e.g. “Welcome Popup”)
2. Use the visual editor to design the modal
3. Add text, images, and buttons
4. Customize colors, fonts, and layout
5. Add a form for lead capture if needed

Step 1.3: Save

1. Click Save
2. The popup is ready for targeting and the SDK

2 · Configure popup settings & triggers

Triggers

Step 2.1: Choose a trigger

Select when the popup should appear:

• Page load — show when the page loads
• Exit intent — show when the user moves to leave
• Scroll percentage — show after scrolling part of the page
• Timeout — show after a delay
• Element exists — show when a selector matches in the DOM

3 · Set up URL targeting

Control where the popup runs

Step 3.1: URL conditions

• Contains — URL contains specific text
• Equals — exact URL match
• Starts with — path prefix
• Does not contain — exclude paths
• Landing — homepage only

Step 3.2: Logic operator

• OR — any condition matches
• AND — all conditions must match

Step 3.3: Domain targeting (optional)

1. Enter a hostname (e.g. example.com) when you need to restrict by domain
2. The popup only evaluates on matching domains

<script src="https://app.przio.com/sdk.js" data-project-id="YOUR_PROJECT_ID"></script>

<script src="https://app.przio.com/sdk.js"></script>
<script>
  PrzioSDK.init({
    projectId: 'YOUR_PROJECT_ID',
    debug: false
  });
</script>

<script>
  if (typeof PrzioSDK !== 'undefined') {
    PrzioSDK.init({
      projectId: 'YOUR_PROJECT_ID',
      apiUrl: 'https://app.przio.com/api/sdk',
      debug: true
    });
  }
</script>

PrzioSDK.init({
  projectId: 'YOUR_PROJECT_ID',
  debug: true
});

Tutorial checklist

• Popup designed and saved
• Triggers configured
• URL targeting set
• SDK installed on your website
• Popup tested end-to-end

Configure in PRZIO

End-to-end steps to define content, targeting, triggers, and activation.

1. Create a popup activity — In Project → Popups, start a new activity and give it a clear name (e.g. “Homepage exit offer Q2”).
2. Design the modal — Use a template or paste HTML in the editor; preview in the editor’s preview/split view. For embedded PRZIO forms, keep the form + SDK on the same document as documented in the form builder.
3. Set URL targeting — Add URL conditions so the popup only runs where intended (e.g. contains a path segment, startsWith a prefix, or equals a full path). Combine conditions with AND or OR per your logicOperator. Optionally restrict by domain when your project spans multiple hosts.
4. Optional: audiences — Add audience conditions (new vs return visitors, custom attributes, saved segments) with AND/OR logic, consistent with personalization.
5. Popup settings & triggers — In the sidebar, set trigger (page load, timeout, exit intent, scroll percentage, element exists) and related fields: delays in ms, scroll %, CSS selector for element exists, exit-intent minimum time/scroll, cooldown days, max per session, cookie/session dismiss behavior, position, backdrop, size, z-index, and close button.
6. A/B tests (optional) — Enable multiple experiences, set traffic splits, run or pause tests, and record a winner when ready.
7. Save and test — Keep status as draft while you verify on a URL that matches your rules (same browser, real snippet).
8. Activate — Set status to activated when behavior matches expectations.

popupSettings reference

Stored on each popup activity; optional keys can be omitted when unused.

URL condition types on urlConditions[]: contains, equals, landing, startsWith, doesNotContain; optional domain for host-level scoping.

Use-case → trigger map

Content Security Policy (CSP)

If your site uses a Content Security Policy, allow app.przio.com so the SDK can load and call APIs. You do not need to whitelist app.przio.com for CORS—that is handled server-side.

• script-src — include https://app.przio.com if you load the SDK from that host
• connect-src — include https://app.przio.com for API calls

Meta tag example (merge with your existing CSP):

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://app.przio.com; connect-src 'self' https://app.przio.com;">

Header example:

Content-Security-Policy: script-src 'self' https://app.przio.com; connect-src 'self' https://app.przio.com;

Integration checklist

• SDK on every page where popups should run; data-project-id correct.
• URL conditions scoped to intended paths only (tutorial §4).
• Triggers tested on real URLs: delays, scroll, exit intent cooldown, element selector on live DOM (tutorial §7).
• CSP updated if your site uses Content Security Policy (section above).
• Draft → QA → activated only after verification.