🚧

Messaging and Mobile A/B Testing Deprecation

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

Integration

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 in an overlay view.

Customizing the 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 mixpanel.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">
  #mixpanel-notification-content{
    font-size: 20px;
    font-family: Impact;
    font-style: bold;
  }
</style>

Using Profile Properties

Just like emails, in-app messages will replace content 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 {{ ${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 {{ ${Location} | fallback:"nearest" }} office!

Profiles without a Location property will receive this message:

Come and visit us at our nearest office!