Installing ManyChat Growth Tools On Your Website
Articles,  Blog

Installing ManyChat Growth Tools On Your Website

Hey friends! This is Dan at ManyChat. I’m
here to introduce you to this focaccia bread which looks delicious! You know what else
is delicious? Getting Messenger subscribers, and as it turns out we have a tool that makes
this really easy. We have all these overlays, and this bar overlay, and a couple of other
growth tools which are really powerful. And if you don’t have these installed yet, this
is the video for you. So, I’ve set up a bar overlay already here just to test on my own
site. And this is, again, you just click on growth tools on the left side of your dashboard
here and it will expose all of these different types of growth tools. To create a new one.
It’s really simple. You just click click new growth tool and here are all the different
types. Right now, don’t worry about all these different types, just we’re going to focus
on this one test that I have set up for you. The point of this video is to get you comfortable
with setting up growth tools on your website. My only goal is to get you to get these on
your website. The reason why this is important is because our growth tools magically convert
traffic into subscribers, and that’s what these things are for. So, whether you have
a website that gets traffic, or you have a Facebook page that gets traffic, or you have
Facebook ads where you can buy traffic, these widgets, these growth tools are going to help
you grow your subscriber base. And this is actually one of the most important parts of
Messenger marketing as having people to market to. So, let’s go check out this one growth
tool that I have set up already. Check this out, it’s a bar overlay and I’m sure you’ve
seen this around the internet before. It pops over at the top of your website. And I’ve
already set this up for my own use case. So, I have expertise in B2B software as-a-service,
and one of the biggest things that plagues software-as-a-service companies is churn.
So, I have this offer at the top of my website that says, ‘Hey, do you have some questions
about how to cut your churn in half?’ And what what I give my subscribers an option
to do or people who hit my website, is send me a question. And I’m going to show you how
to set this up on your website. So, this is the initial state. This is where you set up
all of your your basic parameters. So, when should this display? Well, I haven’t set to
set to display or a pop-up as soon as 30 percent of the web page has been scrolled. Also, I
show this to the same user over and over again, but you can show it to them only once, you
can show it to them and delay it so that it shows only after three more hours of passed.
In other words, we have we give you a ton of flexibility about how to show this to people.
Also, if somebody manually closes it the next time that they load the page, when is the
next time that you want them to see this? Really useful, really flexible tools here.
So, to edit this is really simple. To edit the headline, you just click into the box
here. It’s a visual editor, and then if you want to edit the call-to-action button you
have to make sure you’re using the checkbox plug-in. So, it’s the button type with checkbox.
If you just use the send to Messenger plug, and this is what it looks like, and that’s
pretty cool too. But I like I like the cop I like being able to adjust the copy on this
button, and this actually bypasses. If somebody clicks on this on your website this actually
bypasses the welcome message, and goes straight to the campaign that you want to send them
to. So, that’s another hack here, is using the bar overlay with the checkbox plugin sends
them right to the campaign. So, let’s go to the submitted state. So, after they click
the button this is again this is somebody this is somebody who is in your traffic. Somebody
who’s hitting your website, for example. As soon as they click that button this is what
they’re going to see. And again, you can customize this too. For this case because, I’m asking
them to send me a question. The next step that I want them to take is to open Messenger,
and again I’ve tailored this button copy which I just click right in here to edit to tell
them to open Messenger. If they click this button, this will actually open Messenger.
Com on their browser. And again, you can also put in a redirect if you wanted to so that
when somebody clicks that initial button, that call-to-action, it could redirect to
any URL. So, if you want to track conversions using your own tools that’s another way to
do it. So, let’s that we just covered the submitted state, which is great, and then
the opt-in actions. So, this is one of the most critical parts of setting up your growth
tool, which is what is going to happen when somebody clicks that button, that call-to-action
button? Well, you want to to Messenger conversation with them. So, this is where you set that
up. So, I’ve already set up a message here and you can just click edit right there. I’m
not going to edit it right now because I don’t want to save. I don’t want to lose any changes,
but this is what it’s going to look like when somebody hits that button. Alright I have
a couple of of these quick replies set up with some actions on those quick replies,
and I’m going to show you live how this is supposed to work. Also, if you want to, this
is one of the most powerful parts of any of these overlays is that you can subscribe people
to sequences as soon as they hit this growth tool. So, this is what it would look like
for your user or for your subscriber. I’m just a person. I hit Dan’s website. I see
this bar overlay at the top of his website with an offer that makes sense to me. I click
the Messenger button in one action. I’m taken now into a Messenger conversation. And you
know, if I interact with that Messenger conversation at all I become a subscriber in ManyChat,
and I get subscribed to this sequence. So, anybody who’s been using Infusionsoft or any
of these kind of marketing automation platforms you already see how powerful this can be.
So, I’m not going to harp on it too much. Let’s go to this setup. A without this part
things just aren’92t going to work. The next thing you want to do after you’ve set up the
opt-in actions and submitted state in the initial state, is head over to this setup
screen. And you want to install the JavaScript snippet, and if there’s one place where I
think people get hung up it’s this. This is not a difficult part of the task if you have
a web designer they will know exactly what to do right away. So, all you have to do is
give them this JavaScript snippet and they’ll don’t know exactly what to do with it. So,
excuse me install JavaScript snippet. Click on that and this is what you want to do. You
want to whitelist any domain that this is going on. So, for this case, it’s going to
be stealth ad. And I’m also going to add http stealth, and one more
thing, https Now, the reason why I’m using the secure http as well is because
I’m going to show you how to install this JavaScript snippet on Squarespace as well.
Now Squarespace, I think last time I checked comes with an SSL certificate on every domain.
So, what you can do is, what’s going to end up happening, is you’re going to have a secure
connection. And if you don’t specify this https right here in the whitelisting process,
it won’t show up on your site. That’s just a little hack that I wanted to show people.
Install the JavaScript snippet. This is where the magic is happening. So, copy code to clipboard,
and this is where things get a little tricky. Again, if you have a web designer don’t even
watch the next part of this video. Just send your web designer this script and say, ‘Hey,
I need this installed.’ They’re going to know where to install it. But for all of you who
want to attempt to do this on your own, this is how you do it. I’m going to FTP into my
wordpress build right now. I have a live site. I use transmits. I’m on a Mac, and I love
this the company that makes this piece of software. Where you’re going to want to put
this as in your header.php. So, I’ve already found it. If you’re using WordPress you FTP
in your public_HTML, you want to grab the domain name that you set up. You want to go
to wp-content themes, theme that you’re using, and then you want to grab the header php file.
So, that’s because you’re trying to insert this code into the head. So, let’s go ahead
and open with Adam, this is the the text editor that I I like to use. Again, I just copied
and pasted that code that we got from ManyChat, this right here copied. And I’m going to just
install it right here. So, see this closing head tag, I’m going to put a return there
and I’m going to paste in the ManyChat code, just like that. So, as you see, the script
is right here and it’s right before the closing head tag. I’m going to click save on that
a command S on a Mac. I’m going to go back, and it looks like transmitted has accepted
that change. I’m going to go over here and head over to my WordPress install and just
double check inside the theme that this has been changed. So, I’ve got the theme header.php
open inside of WordPress. And there it is, there’s the script. So, as of now I have the
ManyChat script installed in my head, and that’s all that you need. That’s all that
you need to get going with growth tools. It’s actually that simple. The next part is going
to be actually testing it. So, let’s head over back, let’s head back here, and let’s
save this. And I think this is all setup. I don’t think that there’s any reason why
this shouldn’t work right now. Let’s just go to active. Let’s activate this growth tool,
and as of right now, this should show up on every single page of my website because I
haven’t chosen to show it on only certain pages, or exclude it on certain pages. Keep
in mind that you can also hide these on mobile devices. When it comes to the bar overlay,
this thing is amazing. This shows up really well on all devices. This is one of the most
robust growth tools that we have, simply because it spans across all the different devices
and it works really, really well. So, let’s go head over to my website. And I want to
show you and see this thing work in real life, and even better when you’re doing testing.
This is a really little hack that we discovered. When you’re testing your growth tools, test
them inside of an incognito window in Chrome because you’re going to be able to refresh
that page over, and over again, and hopefully the growth will continue to show up because
of the way that our cookies work. So, let’s go over here let’s refresh the page. And alright,
let’s go ahead and scroll about 30% or so, and see if that overlay pops up, and there
it is. Look at that beautiful overlay. It’s just, it looks so nice and it’s pretty responsive
too. Let’s go ahead and click the CTA here, send me a question because I definitely want
to send Dan a question. Do you see that just popped up in Messenger? And let’s just go
home, let’s just open it using the links to show you how it works. Alright, this is awesome.
Let’s take a look at this. So, this is the message that we programmed into the bot to
send when somebody clicks on that call to action. You have these two awesome quick reply
buttons. And what what I did is I actually set this up so that if I click on either of
these, it will tag me with a tag that I’m using for marketing segmentation. We’ll get
into marketing segmentation a little bit later. But if you’re already doing email marketing
and marketing automation, you know what I’m talking about. So, in this case I’m going
to go ahead and say I work at a SAS. Okay, so, and then you could start a conversation
from here. This is how cool it is. It’s almost like having live chat in Messenger on your
web page without having it like, directly on the page. I mean this is as close as you’re
going to get to Messenger live chat until they come out with that feature. So, right
now we’ve just demonstrated the use of the bar overlay and I’ve also just showed you
how to get this installed on a WordPress website, and for all your Squarespace users out there,
I know a lot of people are moving from WordPress to Squarespace. I’m going to show you quickly
how to set up that JavaScript snippet in Squarespace, and that will be it for this one I think.
So, just give me a second to get that set up. Alright, I just opened my Squarespace
dashboard in another window, and I’m back here in the ManyChat dashboard to grab this
installed JavaScript snippet thingy. This is the code that we want to copy into Squarespace
and this is how we do it real quick. Go just go to your dashboard, go here to settings,
go here to advanced, and then I think it’s code injection. And you just drop it right
here in the header. So, this is awesome. How easy this is, you just press save and as long
as your domain is whitelisted in ManyChat using that Process earlier in this video,
you will be able to use all of your many check growth tools on Squarespace as well. Now,
look at this form that we, just like this pattern that we just did. If you have an advanced
theme in WordPress, or you have another you know, another kind of platform that you’re
using for your for your website, look for something that looks like this. You’re going
to look for any kind of advanced settings, or you know anywhere where you’re going to
be able to edit the code of your website. Go to advanced, look for something like code
injection, or header, or you know theme files. Go to that place and it’s probably going to
have something like this in there somewhere, somewhere we can edit the header, or drop
code into the header. And that’s where you want to put ManyChat code so that you can
use those growth tools on your website. Alright, hopefully this has been kind of useful for
you guys, getting started with growth tools. I can’t wait to show you the rest of these
growth tools because the bar overlay widget is just one of many. And once again, growth
tools are designed to turn traffic into subscribers, and subscribers and Messenger are very valuable
if you run a business. Ok look forward to showing you those.