Sidepops are a component that pop up on the bottom left corner of your page. Sidepops can include a simple CTA, or more complex elements like a survey. Once a user closes or interacts with a sidepop, they won't be shown the sidepop again.
If you haven't already, we recommend setting up your global styles so that your sidepops are consistently styled across all of your experiences. Here's an example of a sidepop experience:
Creating a sidepop experience
Creating a sidepop experience is just like creating any other experience. When you arrive at the experience type selection, you'll have the option to create a few different sidepop experiences. Be sure you select the right experience type for the test you want to run.
Configuring your sidepop settings
You can make edits to your sidepop'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.
If you're configuring a success message for your survey sidepop, you can choose to change the editor preview to display the success message instead by clicking "Success view" and selecting a survey option.
Content
Under the content settings, you have the option to set your heading, subheading, CTA text and CTA link.
If you've chosen the survey sidepop, you can define multiple options for your survey questions, as well as configure a success page for when a user selects an option. You can also choose not to display the success page by selecting the "Do not show success message" checkbox.
If you've chosen the survey sidepop with personalized success message, you can define a success message for each survey option. You can also choose a fallback success page that will apply if a success page isn't defined for each individual option.
Style
The style tab lets you configure a number of different options that will affect how your sidepop looks. Generally, you'll want to set up your global styles so that your sidepops 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 sidepop text and CTA buttons. The icon color will dictate the color of the sidepop icon.
Disable Mutiny branding
Check this to remove the Mutiny logo from the success page.
Success button theme
You can set your success button to be primary colors, inverted, or transparent. What these selections will do differs depending on your button styling.
Image and image URL
You can choose to display a small image at the top of you sidepop. 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. You can choose to use the "icon" layout or a "compact image" layout, which will be a bit larger than an icon.
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, subheading and button styles
You can write your own custom CSS styles into these boxes to make additional changes to your heading, subheading 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 sidepop functions.
Page depth to render component
This allows you to input a percentage that a user has to scroll before the sidepop 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.
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".
-
Hubspot:
window.HubSpotConversations.widget.remove(); -
Drift:
drift.on('ready', () => {drift.api.widget.hide()})
-
Hubspot:
If your chatbot service isn't here, email support@mutinyhq.com!
FAQs
I tried viewing my sidepop 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 sidepop previously. We prevent the sidepop 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.
Comments
0 comments
Please sign in to leave a comment.