How to Create a Welcome Mat (Full-screen Call to Action) For Your WordPress Website

Now it’s time to determine the website it will run on. If you have other campaigns active on your target site, simply choose it from the dropdown menu. Otherwise you need to click Add new website.The rest of the display settings is up to your own preferences. You can show the form everywhere, limit it to a few pages or types of content, exclude pages and more.
When your design is complete, launching the Welcome Mat is as easy as hitting the red button in the upper left corner of the app menu.
Besides integrating with all major email marketing services, the app allows you to quickly and easily set up forms, includes A/B testing, exit-intent technology (popups showup the moment a visitor is about to leave your site) and more.
Which solution you decide for is ultimately up to you. Both are definitely worth trying out.
After that, it’s time to fill in the campaign name. I’m going with Welcome Gate Test Campaign but you are free to come up with your own title.
The only downside: It’s not free. However, at the same time pricing starts at /year and you have a 14-day no-questions-asked return policy to try it out. Plus, it’s totally worth it!
Even if you haven’t heard the term yet, chances are good you have seen it around. More and more websites and blogs are adopting it for their marketing.
Install OptinMonster WordPress plugin
In short, a Welcome Mat packs an entire landing page into one popup. Pretty practical if you ask me.
Let’s see how to set it up on your site, shall we?
As a very first step, you need to register a new account. For that, just click the SumoMe button.

What is a Welcome Mat (And Why Should You Care)?

In OptinMonster, popups and forms to collect subscibers are called optins (makes sense, doesn’t it?). The dashboard shows all optins you have created and information about whether they are active or not.
Be aware that some design features — such as setting background images instead of a plain color — can only be used with a paid plan. Same goes for most of the ready-made templates.
OptinMonster plugin API credentials
For the latter, log in to your site and go to the Plugins menu. Here, click on Add New at the very top. In the next screen, search for OptinMonster. The plugin you are looking for will be in the first place.
This will take you to the page for your API info.
This purpose-driven approach is culminated in the call to action.
For beginner purposes, Design, Behavior and Display Rules will be the most interesting and will allow us to set up our own basic Welcome Mat.
Install SumoMe Welcome Mat
However, your website, the blog post that brought them to it or whatever they clicked on earlier is still there, right below the CTA and just one click away.
Once the download is complete, a click on Activate Now will activate it.
Install new WordPress plugin
Now all that’s left is choosing a template. For the full-screen popup we currently only have the Entrance Theme available, so the choice is really easy. A click on it will get us to the next step.
SumoMe is a collection of useful tools for increasing website traffic. It was made by AppSumo and contains plugins for lead generation, sharing, content analysis and more.
OptinMonster Edit Output Settings
You can open the app either by clicking Open from the store screen or by opening your home screen from the SumoMe badge and then choosing Welcome Mat directly.

  • Showing off your latest deals
  • Moving visitors to a shop page
  • Showcasing your most popular content
  • Welcoming people to your site
  • Ask them to follow you on Twitter
  • and more…

In the following we will have a detailed look at how to set it up. Of course, for this tutorial I will assume you already have an OptinMonster account. If you don’t, you can get it here.
For that, find the applications menu item at the bottom of the WordPress main menu and click it. You will then be asked to input your API username and key.
Look at the screenshots from the following websites and tell me what they all have in common:

Method 1: Creating a Welcome Mat for Your Website with SumoMe

After a click, we find the following options:
For that, first go to Optins in the OptinMonster menu on your WordPress website. If you don’t already see a list of your optins, you might have to click on Refresh Optins at the bottom.
After setting up your account, you will be greeted by the home screen. From here you can check your notifications, change basic settings for SumoMe and — most importantly — find the Sumo Store.

Step 1: Install SumoMe in WordPress

If you haven’t generated an API key yet, click the green button to do so. After that, copy the username and key and input them in the respective fields on your WordPress site. Done.
If you have added shortcodes (e.g. from other plugins), be sure to check the last box so that they will be parsed and put out in the optin form.
One of the best things about SumoMe is that its basic version is completely free. That includes the Welcome Mat, which is part of the tool stack.
Like in SumoMe, you can completely customize your CTA to make it look awesome and fit the rest of your website.
Each page should be aimed at getting your visitors to take a certain action — like join your newsletter, leave a comment, click “like” on Facebook or whatever you are trying to do.
From now on visitors will see your beautiful full-screen call to action exactly when, where and how you have set it up.

Step 2: Register SumoMe

Yep, every single one of them.
Of course, each application has its own strengths and weaknesses.
When active on your site, the first thing visitors will see after coming there is one big, simple call to action asking them to do a single thing. Very hard to ignore.
OptinMonster Login
You can test it out right now. Go to your site (in a private browsing window if you disabled the optin for logged-in users) and surf to a page that has the popup enabled. You will see exactly what your visitors do.
Lately a new form of call to action is sweeping the web and it answers to the name Welcome Mat.
OptinMonster edit Optin

Step 3: Install the Welcome Mat

If that isn’t enough to convince you to try it out, I don’t know what will. So, if you want to give the full-screen CTA a try, in the next section you will learn how to set up one for your WordPress website.
The Welcome Mat will then become active and you can lean back and (hopefully) watch your subscriber numbers soar. Congratulations, you made it! Not so hard now, was it?
It also shows that the CTA isn’t limited to collecting email subscribers. You can use it for all kinds of purposes:
Though some people might think it a bit too in-your-face, it’s effectiveness and ability to increase conversion rates has been proven many times over. Visitors can’t seem to help but click it.
What SumoMe has going for itself is that everything happens on your own site and there is no need to visit any third-party website.
SumoMe main menu
For example, Neil Patel over at Quicksprout use it to move people to like his Facebook page. Ever since then, I have seen his fan count move up by a couple thousand.

Step 4: Configure the Popup

Upon click, the store is where you will find all available apps in the SumoMe stack.
SumoMe’s Welcome Mat and OptinMonster’s Welcome Gate are a new and versatile type of call to action that combines the targeted approach of a landing page with the ease of a popup.
CodeAcademy homepage
However, you don’t have to rely on my word alone. The full-screen CTA has since been adopted by some big names in the marketing sphere.

  • Emails — The analytics screen of your Welcome Mat. Once the CTA is active on your site, you will see the number of impressions and conversions here.
  • Design — Set up the look of your popup. Background color, text, font and font color, button text and much more. See all changes in real time including for the mobile version.
  • Behavior — Configure when the Welcome Mat is going to show up and to which visitors. You can choose to hide it from subscribers and more.
  • Advanced — Here, Pro users can code their own custom Welcome Mat design.
  • Display Rules — This is where you determine where the Welcome Mat will and will not show up on your site. Set up rules for different device types, operating systems, browsers and more.
  • A/B Tests – Another feature reserved for Pro users. Test different designs, calls to action and other elements to optimize conversions.
  • Services — Connect your sign up form to many of the most-used email marketing services out there. Pick yours, connect it to SumoMe and you are good to go.
  • Tracking Pixels — If you use tracking and conversion pixels to track events on your site, here is the place to set them up. Pro feature.

However, what does this have to do with our topic? Well, the Welcome Mat works pretty much the same way, only that it is a popup instead of a separate page.
However, that’s only the first of two possibilities to set up a this type of conversion tool for your site. The second one follows now.
That being said, if you want to get features like A/B testing and advanced display rules, SumoMe gets costly pretty quickly. Yet, you do get a lot of bang for your buck. You may also want to see our comparison of top 10 list building plugins for WordPress.

Step 5: Launch Your Welcome Mat

Unfortunately, if you want to change the time interval before the popup shows up you need to do so on the OptinMonster website.
SumoMe Welcome Mat main menu
Should you already have an existing account, you can also log into it from here.
Here’s what the customization options contain in detail:

Method 2: Create a Full-screen Call to Action with OptinMonster

OptinMonster API menu
Well done!
While this form of CTA is most often used for collecting email subscribers, it’s usage is more versatile than that. From getting social followers to providing a simple welcome, there is very little you can’t do.
If you said “full-screen call to action”, you’d be correct.
Save and you are done.
The welcome Welcome Mat is located right in the first section under Email. Click it and then click on Free in the next screen to start the installation.

Step 1: Log in to Your Account

However, with the available options you should have no problem designing your very own full-screen popup. Once you are satisfied, it is time to…
In fact, after researching OptinMonster for this article, I ended up purchasing it for myself. Is there a better recommendation?
So, if you would like to know more about this new conversion tool, what it can do and how to set it up on your own website, stick around. I’ll explain it all in great detail.
Then type SumoMe into the search bar and press enter. The plugin should be the first one on the list. Hit Install Now to download and install it.
You can spend hours A/B testing your CTA (and many do). Different wording, design, colors, fonts — everything can make a difference and influence your conversion rate.

On the other hand, I the need to connect it with another plugin is a little more complicated than it should be. Plus, there is no free version for testing though you can use 14-day money-back guarantee.

Step 2: Create a New Optin

This is where you do all configurations. The badge will also show up on the front end of your site. Even visitors will see it unless you opt for one of the paid plans that start at per month.
Either way you will be asked to choose one of the available plans. For our purposes at the moment it’s enough to click Continue at the bottom and stay with the free plan. You will end up in this screen:
The reason for that is simple: It works extremely well.
Three times as many subscribers? I wouldn’t mind that either. You? No wonder AppSumo included the Welcome Mat as part of their SumoMe plugin suite.
For this purpose, we will be using two different applications: SumoMe and OptinMonster.
That’s it. Welcome Mat is now installed. Time to configure it.
OptinMonster API credentials
When you are satisfied with the look of your optin, don’t forget to save. After that, it’s time to get the form onto your site.
Spotify homepage

Step 3: Adjust the Design

So, why do these very dissimilar companies all rely on the same format for their websites?
Have you used a full-screen call to action on your site? How was you experience? Did you use SumoMe or OptinMonster? We’d be happy to hear your thoughts.

SumoMe shop

  • Design — Only has two fields, one for background color and one for custom CSS. The latter enables you to completely customize the optin with your own code.
  • Theme — Other optins have different pre-made themes available. As mentioned, the Welcome Gate only has one, so nothing much to do here.
  • Fields — Configure the fields of your form (name, email, submit button, privacy statement etc.) plus their colors, text, font and more.
  • Configuration — Determine when the optin will be displayed (time trigger, at exit intent), success messages and redirects as well as whether to display a “Powered by OptinMonster” link.
  • Integration — Like SumoMe, OptinMonster works with pretty much all email marketing providers of name. Select one from the dropdown menu, provide your credentials and you are ready.
  • Analytics — For more detailed tracking, you have the possibility to link your optin to your Google Analytics account.
  • Page Targeting — Include or exclude pages where this optin should be displayed. If you use the OptinMonster WordPress plugin you will change these settings directly on your site.
  • Referrer Detection — Enable referrer detection to prevent the form from loading if visitors are coming from a certain website.

In fact, when the good people at AppSumo developed it for their own site it tripled their conversion rate!

Step 4: Install the OptinMonster WordPress Plugin

Find Create New Optin in the upper right corner (big green button, really hard to miss), it will take you to the setup screen.
Uber homepage
Install SumoMe plugin
Configure SumoMe

Step 5: Connect the plugin to Your OptinMonster Account

This information can be found by going back to your OptinMonster dashboard and clicking on API in the top menu.
Since (to my knowledge) SumoMe were the first ones to implement it (and coin the name Welcome Mat), we will start with this application first.
Let’s take a quick walkthrough of the Welcome Mat configuration options:
To have the newly created optin appear on your website, you will need to install the WordPress plugin from OptinMonster. You can either find it in the directory oder install it from the WordPress back end.
With SumoMe and OptinMonster, users have two high-quality solutions available to put full-screen CTAs into action. Both of them are very intuitive and easy to set up — even for beginners.
Next, you will need to authenticate your OptinMonster account inside the plugin.
Register SumoMe
I probably don’t have to tell you that every page on your website should have a clearly defined goal and purpose.

Step 6: Configure the Optin Settings on Your Site

It’s also free in the basic version and comes with lots of other (free) plugins beyond email collection.
SumoMe can be installed in different ways. For WordPress users, the easiest way to do so is to download their WordPress plugin. You can find it either in the plugin directory or install it through your back end.
On the OptinMonster homepage you will find Login on the left in the top menu.
Overall I found OptinMonster a little easier to configure and build designs with. In addition to that, it also does all sorts of other optin forms and has loads of templates.
For the latter, go to the plugins menu and click Add New at the top of the screen.
When you click on it, the site will ask you to provide your username and password. After that, it will take you to the dashboard.
Activate SumoMe Welcome Mat
OptinMonster Dashboard
Here’s to growing your conversion rate. Good luck!
Since we want to create a Welcome Gate, we first choose Fullscreen under Select your design in the lower left corner.

Step 7: Launch

The most important thing is to check the box that says “Enable optin on site?“, otherwise the Welcome Gate won’t work at all.
Evidently because it’s effective. It gives you just as much information as you need without unnecessary distractions and drives you towards a single action: Clicking the large button.
Click Install Now to initiate the installation process and don’t forget to activate!
Here, enter a site name (for easier identification) plus your domain (so OptinMonster will work on it).

Summing Up

However, back to topic. OptinMonster has a similar feature to SumoMe’s Welcome Mat called Welcome Gate. It, too, is a full-screen popup that can be triggered at different times and in different places of your site.
If you have a fresh account (like me), you will have to create an optin from scratch.
How’s that for great user guidance?
Once you are done setting everything up, all it takes is one click on the Save button and your Welcome Gate will be live. How exciting!
After that, find your newly created Welcome Gate campaign. When you hover over it, a number of menu items will appear. We are interested in Edit Output Settings.
You will automatically be asked to provide an email address and password. After filling in the information and a click on Sign Up you are good to go.
OptinMonster Optin settings
Now we will determine when and where your CTA will show up on your site and who will see it.
After the installation is complete, you will see a big blue arrow pointing to the corner of your site. When you hover over it, the SumoMe menu button (also called “badge) will slide in.
Calls to action (or CTAs) are an art in themselves and anyone doing business online ideally invests a lot of time in getting better at them.
The fabulous OptinMonster is another plugin/web application for list building. Unlike SumoMe it is mainly focused on collecting email subscribers.
OptinMonster Create new Optin
OptinMonster add new website

Posted by WordPress Guru