How to add a sidepop component

Sidepops appear on the bottom left corner of your screen and lets you promote a relevant asset or CTA

Updated over a week ago

Sidepops are a component that pops up on the bottom left corner of your page and it lets you add a call-to-action to promote an asset, event or new feature to your segment. You can configure if this should display on a single page or multiple pages.

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

Below are some examples of sidepops:

How to launch a sidepop

Step 1 - Create your segment

First step is to determine who should see your sidepop.

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

Step 2 - Create your sidepop

After you've created your segment, click on "Create an Experience" and select "sidepop" from the modal. Click experience settings afterward, then give your sidepop a name and configure the page or pages the sidepop should display on.

Step 3 - Configure your sidepop

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 sidepop 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 sidepop.

What you can configure

  • Message

    • Headline (One sentence hook)

    • Message (Deeper description of the content)

  • CTA

    • CTA text (what the button says)

    • CTA url (What page the CTA links to)

  • Look & Feel

    • Primary color (background color of the sidepop)

    • Icon color (background color of the sidepop icon at rest)

    • Anchor position (position of the sidepop on the page)

    • Inherit site fonts (utilize the fonts available on your website)

  • 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

How to add an image to the sidepop

Adding an icon

Mutiny allows users to add a square icon above the Headline text block. Users can either upload an image directly into Mutiny or add the source URL.

If your team would like to utilize an account based marketing (ABM) strategy of pulling in the company's logo, you can replace that source URL with {{company.clearbit.logo}}. Ensure that Clearbit is used as a data source in the experience's segment.

Adding a full-width image

If the team would like to use a larger image, you can add it to the Headline section of code using HTML and adjust the margin in the CSS.

Add the following HTML to your Headline:

<img src="IMAGE SOURCE URL" width="100%"> 

Add the following CSS to the Custom Headline Styles within Look & Feel:

margin: -25px -50px 0px; 

For additional code-based customizations, you can reference this support doc.

Hiding your existing chatbots

Sometimes your sidepop experiments can interfere with the existing chatbots on your site. Luckily, we can add a bit of javascript to these experiments so if a user falls into this experience, your chatbot will be hidden!

  1. Navigate to the sidepop experience editor and click on "Code".

  2. Add in the code below for your specific chatbot, and then hit "Apply".

    1. Drift:

      drift.on('ready', () => {drift.api.widget.hide()})

If your chatbot service isn't here, email!

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

Did this answer your question?