Send Web In-App Messages

The Messaging and Mobile A/B testing features are not available for purchase and will be deprecated from the product on January 1st, 2022. Read more information on the Mixpanel blog.

Mixpanel enables you to create and send rich messages to users browsing your website. If you are using our in-app messages product, there are three things you need to make sure of:

  1. Include the latest version of the Mixpanel JavaScript library on your website.
  2. Make sure you are identifying your users in your website's JavaScript code. You must also create a profile for a user to send an in-app to them.
  3. Create a web in-app message on the Messages tab of the Mixpanel website.

Web in-app messages will send once per user, but users with multiple devices may receive the notification multiple times. 

Mixpanel can also send mobile in-app messages


The Mixpanel JavaScript library will automatically check for a message when you identify the current user on your site. If a message is available for the current user that they haven't already seen, it will be displayed immediately (typically less than 60 seconds) in an overlay view.

Creating a Web In-App Message

Using Mixpanel you can contact your users directly through your app with in-app messages. Select Web from the pop-up window to see the following form:


Select the size of your message, either Takeover or Mini, and the color of the message, either Light or Dark. Insert an image into your message and write your message directly into the preview image.

You can also choose to add an A/B test to your push notification by selecting ADD AN A/B TEST button.

Save a draft of your message at any time in this process by clicking the Save button at the top of the page.


You can view all of your saved drafts by clicking on the Drafts tab of the main Messages page.



Add to your img-src tag Content Security Policy header so that popup windows will not be suppressed.

Web In-App Message Example

The following example shows how an in-app message appears in the Mixpanel message builder and how the message appears on a website. The following in-app message includes a title, message body and image. 

In-app message as it appears in the message builder:

In-app message as it appears on a website:


The minimum screen width requirement to display web in-apps is 440 pixels, referenced in our SDK here. Web in-apps will not be shown on most mobile web screens except for tablets or large devices that meet this requirement.

Customizing Display of an In-App Message

In JavaScript, Mixpanel web in-app messages will render when your webpage is loaded at the point which you call identify within the JavaScript library. You can choose to have your in-app message display when an event is triggered. Learn more here.

You do have the ability to customize the look and feel of the Mixpanel web in-app message. Since the message is made of up multiple JavaScript elements with CSS styling, the in-app can be modified by adding CSS styling to your site. These will be applied to the Mixpanel web in-app when it is delivered to an end user. As an example of this, you could change the font of the message.

<style type="text/css">
    font-size: 20px;
    font-family: Impact;
    font-style: bold;

If you want further insight on specifically how this can be done, please see detailed instructions here.

For web in-apps, the dimensions of the viewport are 328 x 245, but the Mixpanel server does save the image in the original resolution. Therefore, you could use 656 x 490 to support 2x (retina) resolutions.

Using Profile Properties

Just like emails, in-app messages will replace content that is wrapped in {{}}. For example, if you add a Location property to your user profiles, you can send messages like this:

Come and visit us at our {{ user[‘Location’] }} office. 

A user with a profile property Location: Asheville will get the following message:

Come and visit us at our Asheville office. 

If some of your profiles have a value, but others don't, you can use a fallback value:
Come and visit us at our {{ user['Location'] | default:'nearest' }} office!

Profiles without a Location property will receive this message:

Come and visit us at our nearest office!

Style Web In-App Messages with CSS

With web in-app messages, you can use our native JavaScript library to deploy targeted messages to your users within their browser. By simply integrating Mixpanel with JavaScript you can start sending these messages to your users with profiles in Mixpanel.

These in-app messages require you to do the following to send a message:

  1. Create a web in-app messages in Mixpanel through the Messages tab
  2. Target specific users who should receive the message
  3. Identify the user on their browser

Once you have the message ready and call mixpanel.identify for the user, the in-app will be displayed overlaying your site!

Customizing Web In-App Messages

Of special interest is the ability to customize these messages so they match the look and feel of one's website. Since users will experience these on your site, you will want to be sure you customize the in-app in such a way that it looks good on your site.

The Mixpanel web in-app is made of up multiple JavaScript elements which can be modified by adding CSS styling to your site. These will be applied to the Mixpanel in-app when it is delivered to the user. You can see the main div elements broken down by id in the diagram below.


Looking at the diagram in detail, you will see each element of the message has its own DOM element which can be modified. These can be changed to your liking to create the pixel-perfect message styling you desire.

Example of Customizing a Web In-App Message

Let's imagine we wanted to do the following:

  1. Change the color and fonts used for the main message text
  2. Remove the "Powered by Mixpanel" text

To do this, we would create custom CSS to place on our page to make these changes. For this example, we would place the following code on the page:

<style type="text/css">
    font-size: 20px;
    font-family: Impact;
    font-style: bold;
    color: #A9513C;
    visibility: hidden;

Once we have this code on our site, the in-app will be automatically modified when it is displayed to the user:


By modifying other elements you can continue to customize the message to the point where it looks right with the styling and feel of your site.

Targeting Users

After submitting the form for your message design and content, you will then need to define the targeting criteria for the users who will receive the message. Learn more about filtering by events, properties, and cohorts in this article. You can also target users based on prior messaging or target messages with calendar dates.  

Event-Triggered In-App Messages

Install the latest SDKs

You will need to install the following version of Javascript or higher to access this functionality:

If you would prefer to keep the old functionality, refer to the Scheduling section below.

After submitting the form for your message design and content, as well as your targeting criteria, you can choose the event trigger option on the delivery settings page to send an in-app message when a user triggers a specific event.

For example, you can send a message saying “Congratulations” when a user triggers an event such as a “level-up” in a game.

This feature is only compatible with events captured by Mixpanel’s client-side SDKs (JavaScript). The event-triggering event must be from the same SDK as the message for the message to be sent. For example, if you're sending a web in-app message, the triggering event can't come from an Android event. An in-app message won't show on any web device since the event is exclusive to the Android SDK.

Check the box beside Display messages when users perform… and then select the trigger event.


You can filter the message by an event property. This will cause the in-app message to send when the trigger event is performed and the trigger event has a particular property tied to it.


Note that:

  • In-app messages cannot be triggered by custom events.
  • The in-app message only sends the first time the event is triggered (no recurrence).
  • You can only use one event and one event property.

Schedule a Web In-App Message

When a user triggers the people method that sends an update to Mixpanel's backend, once the update has been ingested and added to a user's profile, the profile is then added to the list of target profiles for the in-app campaign. From there, the notification is effectively "queued-up" while active, and the delivery itself is triggered by the user arriving on the site and triggering a mixpanel.identify() call.

Note that users will receive an in-app message more than once if they use multiple devices.

By default, in-app messages can accommodate a delivery upon the loading of a page (there's no issue with calling .identify() upon say, any pageload within an authenticated session alongside the mixpanel.init() call).

With the above in mind, it's not deterministically possible to trigger an in-app notification to be delivered and displayed as soon as a user performs an action (or fails to) as a function (or independent) of time that results in them meeting a targeting criteria. As described above, there is a decent amount of communication between the user's device and Mixpanel that must occur before a campaign is prepared for the respective user to be delivered, and before you can call identify() to check and pull campaigns from our undocumented /decide API.

To get around this issue, Mixpanel recommends placing a 3-second (or more) timeout using setTimeout() in your code to invoke a second mixpanel.identify(). This allows a sufficient amount of time for the update to be delivered and processed so that /decide will have the campaign ready to be 'pulled'.

One crucial thing to note, however - calling identify() sets a flag on the page that effectively disables the default /decide check behavior from subsequent identify() methods for in-app notifications. As such, you will need to manually reset that flag to force another check. To illustrate this -

mixpanel.identify(); // checks for notifications
mixpanel.identify(); // does NOT check for notifications
mixpanel._flags.identify_called = false;
mixpanel.identify(); //checks for notifications

Given that you can only access flags with the non-minified version of Mixpanel's library, you will need to include the non-minified version of our library on your single page application, and change the CDN URL in your Mixpanel snippet:




which simply involves removing the string '.min' from the URL.

Once that's done, you will call the first identify() to flush the People update to Mixpanel, then the method that switches the flag mentioned previously:

mixpanel._flags.identify_called = false;

and create the delay using the timeout mentioned previously before calling the second identify() method to allow time for the property to be added to the user and for the profile to be targeted. Any in-apps your user is targeted with should subsequently appear.

Did this answer your question?



Article is closed for comments.