Poper

How to integrate Poper with Webflow

Poper lets marketers deploy popup campaigns without blocking developer resources. You create and configure popups in Poper's dashboard, then embed them into Webflow through a JavaScript snippet in your site's custom code settings. For teams that need programmatic access to data, Poper's REST API lets you retrieve popup responses and sync lead data with external systems.

Embed Poper with custom code

Poper integrates with Webflow through JavaScript embedding that loads popups based on behavioral triggers you configure in Poper's dashboard. This method lets non-technical marketers and Webflow designers configure popup design, targeting rules, and content through Poper's dashboard.

After initial code embedding, all popup configuration can be managed independently without additional developer assistance. The script loads asynchronously to avoid interfering with Webflow's page rendering.

To implement Poper on your Webflow site, follow this workflow:

• Create popups in Poper dashboard: Customize fonts, colors, and images. Configure behavioral triggers, including exit intent, scroll depth, time delays, and click events. Connect integrations with marketing platforms such as Campaign Monitor, Drip, and Constant Contact through Poper's integration ecosystem.  
• Add to Webflow site settings: Access Site Settings > Custom Code tab. Paste the embed code into the Footer section for better performance. The footer placement prevents render-blocking and optimizes page load performance.  
• Publish and test: Publish your Webflow site completely. Custom code only executes on published sites, not in preview mode. Test popup triggers by performing the configured actions (scrolling, attempting to exit, or waiting for time delays).

For page-specific implementation, access Page Settings through the gear icon, navigate to Custom Code, and add the snippet before the </body> tag. This approach works well for landing pages with specialized offers.

You can also use a Code Embed element. Drag a Code Embed element from the Add panel onto your canvas, double-click to open the editor, and paste your Poper code. The popup displays according to trigger rules configured in Poper's dashboard, not the embed element's physical location.

Build with Poper API

Poper provides a REST API for retrieving popup data and lead submissions programmatically. This approach works when you need to sync popup responses with custom applications or integrate lead data with systems not supported by standard integrations.

The API retrieves popup responses only. Campaign creation, targeting rules, and A/B testing must be configured in Poper's dashboard. The API does not support programmatic popup creation or campaign management.

To authenticate, use https://api.poper.ai/general/v1 as your base URL with Content-Type: application/x-www-form-urlencoded. Include your api_key parameter in request bodies. Verify connectivity using the ping endpoint:

POST https://api.poper.ai/general/v1/ping
Body: api_key=[your_api_key]



A successful response returns: {"message": "Pong!", "email": "authenticated_user@example.com"}

The responses endpoint (POST /general/v1/popup/responses) returns submission timestamps and form data for a specific popup. Include the popup_id parameter to retrieve responses for individual campaigns.

Poper also provides browser-based event tracking through several core events:

• poper_visitor_data for visitor data collection  
• poper_display when a popup displays  
• poper_close when a popup closes  
• poper_submit_form for form submission  
• poper_open_link for link clicks within popups

Developers can implement these using standard addEventListener patterns for custom tracking within Webflow sites. The Poper Javascript Event Blockers API provides poper_before_submit_form to enable custom validation logic that can prevent form submission when needed.

What you can build

Integrating Poper with Webflow lets you deploy conversion-optimized popups without custom development while maintaining full design control over your Webflow site.

• Exit-intent lead recovery: Detect when visitors attempt to leave your pricing page and display targeted offers or discount codes.    
• Multi-step lead qualification: Break complex B2B forms into progressive steps that reduce cognitive load and increase completion rates.  
• Newsletter subscriber growth: Capture blog visitors with scroll-triggered email popups that appear after readers engage with content.    
• Gamified e-commerce engagement: Deploy spin-to-win wheels or scratch-card popups that capture email addresses in exchange for randomized discounts.