Messaging and Mobile A/B Testing Deprecation
Messaging and mobile A/B testing 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!
Updated a day ago