In standard websites, Poper reloads every time a user moves to a new page. However, Single Page Applications (SPAs) like React, Next.js, or Vue change the URL without a full page refresh. To ensure Poper correctly fetches and displays the right campaigns when the "page" changes in your SPA, you must enable SPA Mode.
Method 1: Manually Updating Your Installation Script
If you have already installed Poper, you can manually add a single line to your configuration script. Adding spa: true tells Poper to listen for URL changes and re-evaluate campaign targeting automatically.
Your updated code should look like this:
<script
id="poper-js-script"
data-account-id="YOUR_ACCOUNT_ID"
src="https://app.poper.ai/share/poper.js"
defer
></script>
<script>
window.Poper = window.Poper || [];
window.Poper.push({
accountID: "YOUR_ACCOUNT_ID",
spa: true // Add this line to enable SPA support
});
</script>
Note: Be sure to replace YOUR_ACCOUNT_ID with the unique ID found in your dashboard.
Method 2: Generating the SPA Code from the Dashboard
If you prefer to have Poper generate the correct code for you, follow these steps:
Go to Dashboard: Log in to your Poper account.
Navigate to Code Embed: Find the "Code" or "Installation" section in your sidebar.
Enable SPA Toggle: Locate the checkbox or toggle labeled "Is your website a SPA?".
Copy and Paste: Turning this on will automatically update the code snippet to include the spa: true parameter. Copy this new code and replace the old script in your project.
Why is this necessary?
Without the spa: true setting, Poper only checks for campaigns once, when the application first loads. In a React or Next.js app, if a user navigates from /home to /pricing, Poper wouldn't know the URL changed.
By enabling SPA mode, Poper stays "awake" and ensures that if you have a popup targeted specifically for the /pricing page, it will trigger exactly when the user arrives there, even without a browser refresh.