All Collections
Inbound Personalization (website, blog, landing pages)
Components
How to add a Banner Component
How to add a Banner Component

Banners sit above your navigation or fixed to the bottom of your site and let you promote a relevant asset or CTA to each segment.

Updated over a week ago

How it works

Banners let you add a quick 1-line hook to promote an asset, event or new feature to each segment. A banner can be loaded at the top of your page or the bottom of your page. You can configure whether the banner should display on a single page or on multiple pages.

Note: After a user has clicked on the CTA or on the X to close the banner, it will not display again.

Example - bottom of page banner

Example - top of page banner

How to launch a banner

Step 1 - Create your segment

First, decide who should see your banner. Banners are most effective when they are customized for a segment. Most often, they are targeting use case (using behavioral such as pages viewed), industry, or stage of funnel/account tier.

For more info on creating a segment, check out this guide.

Step 2 - Create your banner

After you've created your segment, click on "Create an Experience" and select "Banner" from the modal.

Give your banner a name and configure the page or pages the banner should display on.

Step 3 - Configure your banner settings

Now, create your banner content! Information on what can be configured is listed below. When your banner is ready to go, hit "Launch" in the top right corner.

Step 4 - Choosing your traffic distribution

By default, your experience will distribute 50% of your traffic to control, and the remaining to your personalized experience. If you would like all users of your chosen segment to see the experience, be sure to Promote the experience.

Step 5 - Setting your experience goals

After launching, you will see a modal to select your experience goal. If your banner CTA links to a page with a conversion event, such as a webinar signup or whitepaper download, you can configure the analytics to track conversion on that particular asset.

If there is no conversion event on the page you are linking to, simply leave the setting as "All conversions" and Mutiny will track overall conversions for those that click through on the banner.

What you can configure

Editor with configuration options

Message:

  • Banner text (the one sentence hook before the CTA)

CTA:

  • CTA text (what the button says)

  • CTA URL (which page the CTA links to)

Look & Feel:

  • Banner color (background color of the banner)

  • CTA color (outline and font color for the CTA)

  • Font color (dark or light)

  • Banner placement (top or bottom)

  • Font (use default or inherit from your site font)

Functionality:

  • Scroll depth percentage (if you want to load the banner only after a certain percentage of the page has been viewed -- default is 0% which loads when the page loads)

  • Whether the CTA should open in the same tab or a new tab when clicked

  • Fixed header selector (this may be necessary for top placement of the banner to prevent it from loading on top of your page navigation - see here for detailed instructions if this applies to you)

Best practices

For best practices on choosing segments and creating your banner content, check out our playbook!

Don't be a stranger

If you have any questions, we’re here to help! Please feel free to contact us at any time, either through intercom chat or via support@mutinyhq.com.

Did this answer your question?