Visit the Dev Docs
A better version of this page exists at https://developer.mixpanel.com/docs/web-inapp-messages.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.
- Include the latest version of the Mixpanel JavaScript library on your website.
- Make sure you are identifying your users in your website's JavaScript code.
- 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.
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>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!
Comments
Please sign in to leave a comment.