SumoMe provides a variety of free and paid online tools for your WordPress site, including, but not limited to: list builder, scroll box, heat maps, sharing tools, contact tools, welcome mat and more. Many of the tools are available for free and offer great functionality, so you can always install and try them out and, if you feel a need to go beyond that, you can upgrade to a pro version.
I use several of their tools on my sites and I really like them, so I recommend you give them a try.
In this post, I will cover how to add a SumoMe tools to your blog and how to install one of them (scroll box) on your WordPress site.
Scroll box is a unobtrusive pop-up window that comes up when the visitor scrolls down the page of your site. Scroll box is integrated with your email provider and allows you to collect email addresses of your visitors and build your email list.
Lets do this!
Step 1: Log in to your WordPress dashboard:
Step 2: Add new plugin:
From the Dashboard, go to Plugins -> Add New:
Step 3: Locate a SumoMe plugin:
Step 4: Install SumoMe plugin
Step 5: Activate the SumoMe plugin:
Step 6: SumoMe is installed on your WP site:
Step 7: Connect to SumoMe:
When you move your mouse to where the SumoMe arrow points, a small side pop-up will appear. Since you have installed SumoMe tools on your WP site, this pop-up will always be there as your link to SumoMe interface.
Step 8: Sign up for SumoMe store:
Once you click on SumoMe link, a login/sign-up pop-up will appear. If you already have an account with SumoMe, use the Login option, but in this tutorial I will show you how to sign up with SumoMe for the first time.
Step 9: Create your account with SumoMe:
Step 10: Access SumoMe store:
Step 11: Get the Scroll Box:
When you press the Sumo Store button, you will get into screen where all the free and paid products are listed. The scroll box is part of the tools for Email.
Step 12: Install the Scroll Box:
Once you press the Scroll Box button, you will end up on the Scroll Box screen.
Step 13: Scroll Box is now installed:
The message will appear on the top of the screen once the Scroll Box is installed.
Step 14: Select Free option:
Step 15: Change the settings to your liking:
You will be brought to the settings area.
The ‘Emails’ screen is brought up automatically and shows you the signup statistics.
To get the the layout of the Scroll Box, click on ‘Design’.
Step 16: Email fields available:
Under the ‘Fields’ area you can see all the fields that are available to be added to the Scroll Box.
Note: with the free version, you can only have the Email field, so this is the field that we will stick to for now.
Step 17: Design the Scroll Box:
You will be brought to the design screen where you can control the verbiage on the scroll box and the color of its elements.
You can edit the verbiage that goes onto the Heading, Text that appears under the Heading and the Button text.
Note that the text field allows HTML, so you can use <font> and <b> tags to change the size, style and color of the text and make it bold.
Step 18: Change the color of the call to action button:
To match the color of the call to action button to the color scheme of your site, scroll to the bottom of the Design screen to locate Button Background Color.
Click the drop-down and the color picker will appear. On it, you can either choose from the color sampler itself, or if you know the color number for the color scheme of your site (a #AABBCC number), you can copy and paste it into the appropriate field. You will see the color of button changing dynamically as you do it so you can make sure you are getting the color that you need.
Step 19: Control when and how the Scroll Box appears:
You can control where the Scroll Box appears and at what moment in visitor’s experience.
To access these settings, go to Behavior tab.
‘Trigger percent’ controls how far down the page visitor scrolls when the Scroll Box appears.
‘Display in’ controls which area of the screen the Scroll Box appears. I use Bottom Right, because it’s the least annoying option to me personally. You can use the drop-down to choose a different location if you want.
‘Frequency’ setting will allow you to set how many days should pass till same user visiting your site will see the scroll box again.
Under ‘Success Redirect URL’ you can specify where you want the visitor to go after they have entered their email into the Scroll Box and signed up.
Step 20: Connect the Scroll Box to your email provider:
Once you are done setting up how the Scroll Box pop-up looks and behaves, you need to connect it to your email provider.
To do that go to Services tab and select your preferred provider from the list.
Step 21: Connect to the email provider’s account:
Step 22: Select the email list:
Once you are connected to the email provider, you will see the drop-down for the email lists you have setup with that provider.
Step 23: The Scroll Box is now functioning on your site:
Now that you have completed the settings, the Scroll Box is functioning on your site.
Congratulations! You did it!
Now you can start building your email list by providing your visitors a handy option to sign up.