Up next in 10
How to Add a Newsletter Popup Form in Wordpress Based on User Action (FREE)
8K views
Jan 23, 2024
Learn the art of user engagement with this insightful video tutorial on adding a newsletter popup form in WordPress based on user action. Whether you're a seasoned WordPress user or just starting your website journey, this tutorial provides step-by-step instructions on creating an effective and user-friendly newsletter popup. Explore the free tools and techniques that allow you to capture user attention and encourage newsletter sign-ups seamlessly. Tune in to discover how to enhance your WordPress website with this valuable feature, turning user actions into opportunities for building a stronger online community. ๐งโจ
View Video Transcript
0:00
Hi everyone, welcome to K2 blogging and in this video I will show you how you can add
0:04
subscriber popup form to your WordPress website based on user action. So suppose you want to display a popup button when a user exit the website or you want to
0:15
display popup button when a user click on the subscribe button then how you can do that
0:21
So here in this video I will show you the free way you can integrate your MailChimp
0:26
or MailerLite account with your WordPress and show a popup to get or to collect emails
0:32
from your visitors. So if you found this video helpful then make sure to hit the like button
0:39
So first of all you need to create your account whether it is in MailChimp, MailerLite or
0:43
any other platform and then let's go to the WordPress dashboard. So suppose I want to add a subscribe button in the header menu and when a user click on
0:53
that subscribe button it will display a popup to subscribe to your newsletter
0:59
So let me quickly go to the menu here. So I will click on menu here and you can also go to appearance and click on menu here and
1:07
here in the main menu let me add a custom link. So I will click on custom link and I will add the link text like subscribe like this
1:16
and I will leave the URL to hash like this. Now I will click on add to menu
1:22
Now let me just save the menu here. Now let's go to the front end here and as you can see that we have the subscribe button added
1:31
So when someone click on the subscribe button it should show a popup
1:35
So for this let's go to the back end and we will install a plugin
1:40
So I will go to plugins click on add new. Now I can simply search for hustle
1:48
So this is a free email marketing plugin hustle email marketing lead generation opt-in popups
1:54
So this is a free plugin. So let's quickly install and activate this plugin here alright
1:59
Now let's activate this plugin. Once the plugin is activated let's go to the dashboard here and this is how the popup
2:09
dashboard looks like. So this is the hustle dashboard. So you can add popups you can embed forms slide ins
2:17
So there are various popup options available in this plugin. So before that we need to integrate our email marketing tool with this plugin
2:26
So you can see this integration option in the left menu. Now scroll down here and by default it will save the email address to your local list
2:35
as well or you can add the various or integrate various email marketing tool like Aweber convertkit
2:43
get response and here there is MailChimp MailerLite. So you can easily integrate any email marketing tool using this plugin
2:51
So this is completely free. So let's click on MailChimp here. So here you need to enter your API key from MailChimp
3:00
In the same way you can enter API key from your different email marketing tool like MailerLite
3:06
So here I will show you how to do it in MailChimp. So I will go to profile here and then you need to generate API key in the MailChimp website
3:17
So for this I will go to extra and here you will see this option API keys
3:21
So just click on here. Now let's scroll down here and let's create API key here
3:26
So I will click on here and let's add it API name so you can name it anything
3:32
So let me add it like popup. Like this and I will click on generate key
3:40
Now let's copy the API key from here. Let's go to the hustle and add the same API key here and I can add the identifier
3:49
like popup. Now let's click on connect. All right MailChimp is successfully connected to our WordPress website
3:57
So now we need to generate a popup or create a popup. So I will click on popup here and I will click on create
4:05
Now let's add it like sign off. So you can name anything you want and here you can select email opt-in
4:12
Let's click on choose templates and you can see that here you will get various templates
4:17
like this. So you can choose any of the template you want
4:21
So if you click on the preview button it will show a preview of that popup
4:26
As you can see that this is how the popup looks like. So it is quite good
4:30
Now let's check any different popup here. As you can see that you have a lot of options
4:37
So you can easily customize these popups. So let's add this option stay exit intent
4:43
So let's click on choose template here. As you can see that we have added or selected this template
4:50
So you can click on the preview button and you can see the popup in preview window
4:56
So as you can see that we need to change this color to white and you can change this to
5:01
subscribe here. So let's close here and let's change this to subscribe and let's set the title like
5:16
So let's click on preview again and hey wait so we can change this to subscribe
5:23
So I will click on close and I will change it to subscribe
5:29
Now and you can also add a subtitle if you want and you can change the image in the popup
5:35
as well and let's scroll down here and you can see thanks I am not interested
5:42
You can also change that as well here thanks I am not interested
5:46
So you can change here. Now we need to change the button text here
5:50
Let's click on email here and here it is. This is the button get my coupon
5:55
So let's click on edit field here and let's change it to subscribe like this and let's
6:04
click on apply and let's click on preview and as you can see that we have changed the
6:08
button text to subscribe. Now let's change the styling of this text
6:13
So I will click on close. Let's go to appearance and let's search for the title and let's close here
6:25
So there is this typography set this one color. So let's search for the title here and let's change the color to white
6:33
Now let's change the main content color to white like this. Let's click on preview and you can see that it is changed to white
6:42
So in this way you can customize in each and every part of this popup
6:46
Now let's set the trigger here. So here let's click on behavior
6:52
So whether you want to display the popup when a user click on the button or you can display
6:58
the popup like exit intent. So whenever someone click or move the mouse cursor to this area it will display the popup
7:06
or you can select the click option here. Let's expand it and you can trigger
7:11
So let's add some element class or element ID. So I will go to the front end and right click on it click on inspect and let me get the
7:21
ID here. In this menu the ID is menu item 1361. So let me copy it and here I will add hash for ID and dot for class like this
7:36
And let's update this or let's publish this popup here and you can see that the popup
7:44
is now published. So let's go to the front end and check if it is working or not
7:50
So let me refresh this page and let's click on subscribe. As you can see that whenever I click on the subscribe button it will start showing the
7:57
popup for the user to subscribe your newsletter. So again you click on subscribe button it will subscribe here
8:06
Now let's click on here and let me enter my email address like this and let's hit subscribe
8:12
As you can see that the subscribe is changed and you can change this text as well
8:18
Thank you for joining our list. So we need to change that as well
8:22
So for this let's go to the content and let's click on email and here it is
8:29
You can change that as well. Thank you for joining our email list. So you can change that and let's remove the coupon here
8:40
From now on you can receive updates from us like this
8:50
So you can change the text here and you can also send an automated email to the user whenever
8:57
someone sign up to your newsletter and you can add your content and it will automatically
9:03
send this email to that user as well. Here one important setting that you need to follow otherwise the subscription may not work
9:12
So for this you have to open the popup settings. Go to the integration tab and make sure to click on the plus icon plus add integration
9:21
and here you have to select the account. Click on continue. Now let's click on here and let's click on continue and you can set a tag like this
9:31
So it will show the predefined tag. Let's click on continue. And as you can see that we have successfully integrated MailChimp with this form
9:40
Otherwise it will only show the local list option and you have to manually select the
9:45
MailChimp in the popup here and let's hit update and after that your subscribe form
9:52
will be working fine and it will save all of the emails to your MailChimp account
9:58
Now you can follow the next steps. Now let's go to the visibility here and let's click on behavior and whether you
10:06
want to auto close this popup or something like that so you can change here
10:12
So let's click on so if you enable this option then whenever someone click on the
10:18
button and didn't do anything then it will close automatically after 5 seconds
10:22
So you can set a timer as well or you can see close popup when click outside
10:28
So whenever someone click outside of the popup it will close the popup
10:33
So you can add different options here and you can also add a closing behavior like whenever
10:41
someone click on the X button you can change like this don't show this popup across
10:47
the site. So whenever someone click on the close button it will not show for let me choose 5
10:53
So it will not show for next 5 days or 30 days you can set it here or you can keep showing
10:59
the popup here and here you can see that visibility after opt-in
11:04
So whenever someone click on the popup button and enter the email address and sign up your
11:10
newsletter then you can disable it no longer show this module across the site
11:15
So let's choose it to 365 days. So someone sign up your newsletter and then after that it will not show up the popup to
11:24
that user. So it will save a cookies to that browser. So this is how you can further customize the popup behavior and let's hit update and
11:35
let's refresh this page and let's hit the subscribe button and let me do it once
11:41
again and let's hit subscribe and you can see that thanks you for joining our email
11:46
list from now you can receive updates from us. Now let's click on subscribe and you can see that the popup is not showing again
11:55
So when I open this in incognito mode then it will again work for there but it will store
12:01
a cookies and it will not show up again for when someone sign up your newsletter and as
12:07
you can see that the popup is showing like that. So this is how you can add a popup to your WordPress website for free and integrate any
12:16
email marketing tool here and this is completely free although it has a pro version but in
12:23
free version you will get most of the features here. So make sure to try out this plugin hustle and let me know if this plugins helps you
12:31
increase your email marketing effort or increase your email subscriber and if you found this
12:37
video helpful then make sure to hit the like button and for more videos like this do subscribe
12:43
our channel and I will see you in the next one bye bye
#Business & Industrial
#Email
#Home & Garden
#Internet & Telecom
#Search Engine Optimization & Marketing
#Software
#Web Services