Installing the Pixel
Add the Cool Popup pixel script to your website to start displaying notifications to visitors.
What is the pixel?
The Cool Popup pixel is a lightweight JavaScript snippet that loads your campaign's notifications on your website. It runs asynchronously, so it won't block page rendering or slow down your site.
Each campaign has a unique pixel key. You embed a single <script> tag referencing that key, and Cool Popup handles the rest — loading styles, rendering notifications, and tracking impressions.
Getting your pixel key
Open your campaign
Navigate to Campaigns in the dashboard and click on the campaign you want to install.
Copy the pixel code
Click the dropdown menu (⋮) on the campaign and select Pixel key. A modal will display the script tag with your unique key.
<script
src="https://dash.coolpopup.com/pixel/YOUR_PIXEL_KEY"
defer
></script>
Installation methods
Paste the script tag into your website's HTML, just before the closing </body> tag:
<html>
<head>
<!-- your head content -->
</head>
<body>
<!-- your page content -->
<script
src="https://dash.coolpopup.com/pixel/YOUR_PIXEL_KEY"
defer
></script>
</body>
</html>
Add the script to your theme's footer.php file, or use a plugin like Insert Headers and Footers to add it site-wide without editing theme files.
Paste the full <script> tag into the "Scripts in Footer" section.
If you're using the Cool Popup Shopify app, the pixel is installed automatically via a theme app extension — no manual code editing required.
See the Shopify setup guide for details.
For React, Vue, Next.js, or other SPA frameworks, add the script tag to your root HTML template (e.g., index.html or _document.tsx).
The pixel detects page changes automatically and will re-evaluate notification triggers on navigation.
Domain matching
The pixel validates that the domain in your browser's address bar matches the domain configured in your campaign. If they don't match, notifications won't appear.
Both www.example.com and example.com are treated as the same domain. You don't need separate campaigns for the www and non-www versions.
Custom domains
If you've set up a custom domain, your pixel URL will use that domain instead of dash.coolpopup.com. This keeps all requests under your own brand and can help with ad-blocker compatibility.
Verifying the installation
After adding the pixel to your site:
- Make sure the campaign is enabled in the dashboard.
- Visit your website in a browser.
- Check that the notification appears according to your trigger settings (e.g., after a delay or on scroll).
- Open the Statistics page to confirm that impressions are being recorded.
If the notification doesn't appear, check the Pixel Not Showing troubleshooting guide.
Last updated 2 weeks ago
Built with Documentation.AI