How to Install SumoMe Tools on Your Blog

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!

How to install SumoMe tools on your WordPress blog

Step 1: Log in to your WordPress dashboard:

WP Dashboard

Step 2: Add new plugin:

From the Dashboard, go to Plugins -> Add New:

Plugins Add New

  Step 3: Locate a SumoMe plugin:

Now, that you are on the Add Plugins screen, in the search field, look for a SumoMe. Enter the search term and hit the Enter key on your keyboard:
Search SumoMe

  Step 4: Install SumoMe plugin

Click on “Install Now” button to install it:
Install SumoMe tools

Step 5: Activate the SumoMe plugin:

You will be brought to Installing Plugin screen. Wait till the plugin installs and you see “Successfully installed plugin…”. Click “Activate Plugin” link to activate the plugin on your site:
Activate SumoMe tools plugin

Step 6: SumoMe is installed on your WP site:

Once the SumoMe is installed on your site, the message will appear on the upper right site like this:
SumoMe is installed

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.

Click on the small blue square with a crown.
Go to SumoMe

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.

Click Sign Up.
Sign up for SumoMe

Step 9: Create your account with SumoMe:

In the sign up window, enter your email and password (twice). Click Submit.
Enter login info

Step 10: Access SumoMe store:

Once you have created the login, you will get the SumoMe pop-up. To get the scroll box, click on the Sumo Store button. All the free and paid products reside in the SumoMe store.
Go to 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.

Click on Scroll Box button.
Sumo Store

Step 12: Install the Scroll Box:

Once you press the Scroll Box button, you will end up on the Scroll Box screen.

To get this tool, click on Free button.
Get Scroll Box

Step 13: Scroll Box is now installed:

The message will appear on the top of the screen once the Scroll Box is installed.

Click the Open button in the upper right.
Scroll box is installed

Step 14: Select Free option:

The store will offer you to upgrade, but choose Free option to continue.
Pick free Scroll Box

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

To see the fields that are available on the Scroll Box, click on ‘Fields’.
Scroll Box settings

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.

Click on the ‘Design’ tab on the side to go to design screen.
Emails tab in Scroll Box

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.

Once you make the changes you need, scroll down further this screen to change the color of the button (if you wish).
Customize verbiage on Scroll Box

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.

Click Save in the upper right corner before moving on to the next screen (Behavior).
Update CTA button

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.

‘Save’ after you are done with the settings updates.
Behavior of Scroll Box

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.

I will use the Aweber as an example. Click on the email provider.
Connect to email provider

Step 21: Connect to the email provider’s account:

The screen for the selected email provider will come up with a ‘Connect’ button. Press ‘Connect’.
Connect to Aweber 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.

Select the list and click Save.
Select email list

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.

If you go to your site and scroll the page down, you will see it come up.
Scroll Box 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.

Ready to start your own blog? Grab this FREE 7 Day mini-course!


Build Your Starter Blog

FREE 7-Day Mini-Course
Powered by ConvertKit



Leave a Reply

Your email address will not be published. Required fields are marked *