Popup Integration
Complete Tutorial

Step 1.1: Sign Up for PRZIO

1. Visit the PRZIO signup page at /signup
2. Enter your email address and create a password
3. Verify your email address by clicking the link sent to your inbox
4. Complete your profile setup

Step 1.2: Create a New Project

1. After logging in, click on "Create New Project" button
2. Enter a project name (e.g., "My Website Popups")
3. Add a project description (optional)
4. Click "Create Project" to proceed

Step 2.1: Navigate to Popup Builder

1. Go to your project dashboard
2. Click on "Popups" in the sidebar
3. Click "Create New Popup" button

Step 2.2: Design Your Popup

1. Enter a popup name (e.g., "Welcome Popup")
2. Use the visual editor to design your popup
3. Add text, images, and buttons to your popup
4. Customize colors, fonts, and layout
5. Add a form if you want to capture leads (optional)

Step 2.3: Save Your Popup

1. Click "Save" to save your popup design
2. Your popup is now ready for integration

Step 3.1: Choose Popup Trigger

Select when your popup should appear:

• Page Load - Show immediately when page loads
• Exit Intent - Show when user tries to leave the page
• Scroll Percentage - Show after user scrolls a certain percentage
• Timeout - Show after a specific time delay
• Element Exists - Show when a specific element appears on page

Step 3.2: Configure Exit Intent Settings

If you chose Exit Intent trigger, configure these settings:

1. Set minimum time on page (e.g., 30 seconds)
2. Set minimum scroll percentage (e.g., 50%)
3. Configure cooldown period (how often popup can show)
4. Set max per session (how many times per session)

Step 3.3: Configure Display Settings

1. Enable/disable backdrop overlay
2. Set backdrop color and opacity
3. Configure close button position and style
4. Set cookie/session settings to prevent repeat displays
5. Choose animation effect (fade, slide, etc.)

Step 4.1: Add URL Conditions

Configure URL targeting to show popup on specific pages:

• Contains - Show if URL contains specific text
• Equals - Show only on exact URL match
• Starts With - Show if URL starts with specific path
• Does Not Contain - Show if URL doesn't contain text
• Landing - Show only on homepage

Step 4.2: Set Logic Operator

Choose how multiple URL conditions are evaluated:

• OR - Show if any condition matches
• AND - Show only if all conditions match

Step 4.3: Domain Targeting (Optional)

Restrict popup to specific domains:

1. Enter your domain name (e.g., example.com)
2. Popup will only show on pages matching this domain

Step 5.1: Include SDK Script

Add the PRZIO popup SDK script to your HTML page. Include it before the closing </body> tag:

Alternative: Manual Initialization

You can also initialize the popup SDK manually:

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

WordPress Plugin (Alternative)

For WordPress websites, use our official plugin:

1. Install the PRZIO Popup WordPress plugin
2. Go to Settings → PRZIO Popup
3. Enter your Project ID
4. Save settings - popup will automatically appear on your site

Step 6.1: Automatic Initialization

If you used the data-project-id attribute, the popup SDK will initialize automatically when the page loads.

Step 6.2: Manual Initialization (Advanced)

For more control, initialize the popup SDK manually:

<script>
  // Wait for SDK to load
  if (typeof PrzioSDK !== 'undefined') {
    PrzioSDK.init({
      projectId: 'YOUR_PROJECT_ID',
      apiUrl: 'https://app.przio.com/api/sdk', // optional
      debug: true // Enable debug mode to see logs
    });
  }
</script>

Step 6.3: Enable Debug Mode

Enable debug mode to see detailed logs in the browser console:

PrzioSDK.init({
  projectId: 'YOUR_PROJECT_ID',
  debug: true // Shows detailed logs in console
});

Step 7.1: Check SDK Loading

1. Open your website in a browser
2. Open Developer Tools (F12 or Right-click → Inspect)
3. Go to the Console tab
4. Look for "[PrzioSDK] Initializing..." message
5. Verify Project ID is correct

Step 7.2: Test Popup Display

1. Navigate to a page that matches your URL conditions
2. Trigger the popup based on your configured trigger:
   • Page Load - Refresh the page
   • Exit Intent - Move mouse to top of browser
   • Scroll - Scroll down the page
   • Timeout - Wait for the specified time
3. Verify the popup appears correctly
4. Test the close button functionality

Step 7.3: Test Form Submission (If Applicable)

1. If your popup contains a form, fill it out
2. Submit the form
3. Verify form data is captured in PRZIO dashboard
4. Check that popup closes after successful submission