Creating a banner experience

Banners let you add a quick 1-line hook to promote an asset, event or new feature to each segment. Once a user closes or clicks on the banner CTA, they won't be shown the banner again.

If you haven't already, we recommend setting up your global styles so that your banners are consistently styled across all of your experiences. Here's an example of a banner experience:

Creating a banner experience

Creating a banner experience is just like creating any other experience. When you arrive at the experience type selection, select "Banner".

Configuring your banner settings

You can make edits to your banner's content, style and functionality by clicking through the tabs at the top of the editor. We'll take a closer look at each of these settings below.

Content

Under the content settings, you have the option to set your heading, CTA text and CTA link.

Style

The style tab lets you configure a number of different options that will affect how your banner looks. Generally, you'll want to set up your global styles so that your banners have a consistent style across experiences, but there may be instances where you want to update specific styling for a single experience.

Any updates you make to the styles here will overwrite those that are set in your global styles.

Color

Your primary color will dictate the color of the banner background. The secondary color will dictate the color of your CTA.

Message text font

You can choose to set your text to be light or dark.

Anchor position

You can set your banner to be anchored to the top or the bottom of the page. To avoid taking up a lot of prime real-estate, mobile banners will always be anchored to the bottom of the page. Here's an example of a banner anchored to the bottom of the page.

Image and image URL

You can choose to display a small image in your banners. To do so, upload a new image by clicking the "Upload an image" card. Once uploaded, your image URL will be displayed in the image URL box. Here's an example of a banner with an image.

Inherit site fonts

Select this check box if you want to inherit the fonts from your website, rather than using the default fonts.

Custom heading and buttons styles

You can write your own custom CSS styles into these boxes to make additional changes to your heading and buttons. For example, if you wanted to remove the button entirely, you could place display: none !important; into the custom button styles box to set the button's display to none.

Functionality

The settings under functionality allow you to display additional settings about how your banner functions.

Page depth to render component

This allows you to input a percentage that a user has to scroll before the banner will appear. For example, if you only want the banner to appear after they've scrolled 50% down the page, you can set this to be "50". 

CTA should open in

You can decide whether clicking the CTA will open the link in a new tab or not.

Fixed header selector

The fixed header selector is an important setting to ensure that your banner does not cover up your existing website navigation. If you notice that your banner is covering any part of your page unexpectedly, follow these steps to set your fixed header selector.

1. Navigate to the page the banner will run on in a new browser tab. If you have have a sticky nav (the navigation stays present as you scroll down the page), scroll down on the page until the sticky nav appears. Right click on the navigation and click "Inspect".
2. On the Elements tab, highlight the row in the HTML that shows the entire navigation highlighted on the page above. You might need to move the cursor up to parent elements to find the level where the entire navigation is highlighted on the page.
3. When you find the correct element, right click it and click "copy selector".
4. Paste this value into the "Fixed header selector" box in your experiment.

If you have trouble finding your fixed header selector, email support@mutinyhq.com.

FAQs

I tried viewing my banner experience live on my site but I'm unable to see it.

If you're sure that you've qualified for the experience correctly, its likely the case that you clicked on or closed the banner previously. We prevent the banner from being shown again after one of these actions is taken. Clearing your cookies or opening the experience in an incognito window will reset this.