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!
Navigate to the sidepop experience editor and click on "Code".
Add in the code below for your specific chatbot, and then hit "Apply".
Drift:
drift.on('ready', () => {drift.api.widget.hide()})
If your chatbot service isn't here, email support@mutinyhq.com!
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.