How do I customize my web in-app messages?

With web in-app messages, you can use our native JavaScript library to deploy targeted messages to your users within their browser. By simply integrating Mixpanel with JavaScript you can start sending these messages to your users with profiles in Mixpanel.

Sending a Web In-app Message

These in-app messages require you to do the following to send a message:

  1. Create a web in-app messages in Mixpanel through the Messages tab
  2. Target specific users who should receive the message
  3. Identify the user on their browser

Once you have the message ready and call mixpanel.identify for the user, the in-app will be displayed overlaying your site!

Customizing Web In-app Messages

Of special interest is the ability to customize these messages so they match the look and feel of one's website. Since users will experience these on your site, you will want to be sure you customize the in-app in such a way that it looks good on your site.

The Mixpanel web in-app is made of up multiple JavaScript elements which can be modified by adding CSS styling to your site. These will be applied to the Mixpanel in-app when it is delivered to the user. You can see the main div elements broken down by id in the diagram below.

InApp

Looking at the diagram in detail, you will see each element of the message has its own DOM element which can be modified. These can be changed to your liking to create the pixel-perfect message styling you desire.

Example of Customizing a Web In-app Message

Let's imagine we wanted to do the following:

  1. Change the color and fonts used for the main message text
  2. Remove the "Powered by Mixpanel" text

To do this, we would create custom CSS to place on our page to make these changes. For this example, we would place the following code on the page:

<style type="text/css">
  #mixpanel-notification-content{
    font-size: 20px;
    font-family: Impact;
    font-style: bold;
    color: #A9513C;
  }
  #mixpanel-notification-tagline{
    visibility: hidden;
  }
</style>

Once we have this code on our site, the in-app will be automatically modified when it is displayed to the user:

InAppMod

By modifying other elements you can continue to customize the message to the point where it looks right with the styling and feel of your site.

If you have any issues sending web in-app messages or can't get the styling just right, please send us an email at support@mixpanel.com and we can help get your messages sending as you desire.