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!