Mixpanel enables you to create and send rich in-application messages to users browsing your website. If you are using our in-app messages product, there are 3 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.
3. Create a web in-app message on the Messages tab of the Mixpanel website.

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!