PostHog Popups

Create and control in-app popups on PostHog

Popup features

The features include:

Create popups and dynamically control the popup text, location, buttons and links all from PostHog
Style the component to fully match your app
Include HTML in the popup body, including links and images
Customize who sees the popups by cohorts or user properties
A/B test different popups to find which has the biggest impact
Full extensibility of additional fields and buttons

For now, if you want to target a cohort based on behaviors you'll need to create a dynamic cohort, then export the CSV and use it to create a static cohort that you then target with the feature flag. We're working on a better solution for this.

Libraries/Languages supported

You can control popups in all libraries that support PostHog feature flags. The following libraries have example code and boilerplate to get you started, for the others you'll need to create your own implementation of the frontend popup:

React
Contributions welcome for the other libraries!

Creating a popup in PostHog

(Required) Install the code from the example code e.g. react or create your own popup implementation using our demos as inspiration
Create the feature flag and call it popup-{unique name} (or create it as an experiment)
Add the JSON payload (see Default feature flag schema for examples)
Configure the users that you want to see the popup
Add an extra filter to exclude users with the property $popup-{unique name} set so that the popup is only shown once for each user
Turn on the flag to activate the popup!

Default feature flag schema

{
    "title": string,
    "body": string (can contain html),
    "primaryButtonText": string,
    "primaryButtonURL": url,
    "secondaryButtonText": string,
    "location": "absolute-(bottom-right | bottom-left | top-right | top-left | center) or relative-(top | bottom | left | right)
    "locationCSSSelector": CSS Selector IF location is "relative-"
}

Default events sent