How to Add a Live Chat To Your Website: A Complete Tutorial

Wes McDowell

October 29, 2018

share this:

Video Transcript:

Today I’m going to go over the key benefits of having a live chat feature on your website as well as a free and really attractive way of getting it up and running in just a few minutes. So first of all, why even have a chat bot? Well, 80 to 90 percent of the people coming to your site today are really only in research mode.

And guess what? They’ve got questions and sure you can try to get all these questions answered in various places around your website. But you know, there’s always going to be a certain amount of questions that you never anticipate coming. Now it’s important to know that of the people that are just in research mode who aren’t actually ready to make a decision, almost none of those people are going to be willing to pick up the phone or send off an email, but according to a recent mindshare study, 63 percent of people are in fact willing to use the chat feature even when they’re not ready to buy yet, and the reason for that is simple. It just feels a lot less intimidating and a lot less of a commitment to talk to you over chat. Now. Chatbots basically come in two flavors. You’ve got the automated version which relies on a lot of pre programming and a more manual version, which involves you actually interacting with your customers in real time.

No, for most small businesses out there actually don’t recommend going that automated route for a couple reasons. First of all, the completely automated version tends to be a lot more expensive. Second of all, it can get complicated really fast, so when you’re relying on a lot of preprogrammed questions and answers and it gets confusing and you’re likely to religious give up on the whole process. But to me the biggest reason is the automated version. A really gets rid of the human connection and the human element, which I think is a huge missed opportunity because people really hate talking to bots. You know, think about when you call a customer service line, you always want to talk to a person, not the automated response. So it’s very hard to duplicate that experience with Ai. Um, at least where we’re at today. So right now I’m gonna show you my favorite tool for a simple attractive chat Bot that you can get up on your site in minutes and we’ll message you right on your phone as soon as you get a new customer on the hook, allowing you to interact with them in real time.

Because when you can provide questions to answers they have in real time, when they’re actually researching you, you can shorten the sales cycle dramatically and you’re much more likely to be considered when it’s time for them to actually buy. So let’s get right on over to the computer. All right, so before we get started on building one of these things, I guess I’ll show you a example of when an action. So this is on the deep ends website and as you can see right down here, there’s this little icon up, a chat bubble. So when you click on that, if someone ever has a question, it’s just launches and then his greets them and then it allows them just to type in a, uh, a question right here. And I happen to think this one just has a lot of visual appeal and a little bit of personality to it, which I like.

Um, I kind of value that in, in something like this and beyond your customer coming to your site and then instigating this on their own, you can actually set this up to be triggered when someone, uh, either arrives in your page after a certain amount of seconds or once they go a certain percentage down the page, it’ll pop up asking if they have any questions. So you can be proactive on this as well. Where we’re going to use it to build. This is actually an online software program called convert Fox. Um, so basically it has a lot of features on it, but today we’re only going to be focusing on that live chat feature. Um, and I just want to go over all bringing up the pricing page just so you can see I’m, there are paid plans, but the good news is there is a free plan and that’s included then includes 500 contacts.

So you wouldn’t have to pay anything until you’ve gotten, you know, 500 people contacting you this way. Anyway, let’s go ahead and, uh, the first thing you’re going to want to do is just sign up for it. And then I’m going to log into my account. Okay. So here I am, logged in, and at first this is going to ask you to name the project and put in your url for your website. So I would just name this, uh, with the name of your business. And today, since I already have one of these on my site, I’m going to actually set it up for a client site. So we’re going to be using that name and that url. Okay, so I’ve put that in A. Next, we’re going to click this button right here to go to the profile. And since I’m setting this up for a client, I’m actually going to put in her name, which is Mariel right here.

And then it lets you upload a profile picture, which is not mandatory, but I really recommend that you do that because, because if people see that you have a picture there, um, it’s really gonna help build that trust factor and really feel like they’re talking to you live. She was going to go ahead and Click upload it. Okay, so I’ve uploaded the picture and then click on next to configure. Okay. Here’s where the fun part begins. So basically now you can kind of choose the look of what this thing looks like. Winter. It opens up. There’s two things that we’re looking at here, which is the icon that people see when they first come to the site, and then the, the chat box that opens up when they click on it and you’ve got some options. So there’s either gradients you can choose between these predefined gradients or if you have a color, if you really want to get specific and really make it match your brand colors, you can click that.

And then you can put in, uh, your own color code here, your own hex value, they call it. But this particular site has kind of a purple color scheme going on with it. So I’m going to go ahead and see how this one looks and I think I like that and I think I’m going to go with that. So I’m going to make sure it’s that for the chat box as well as for the chat icon and now it looks pretty good to me and it also lets you choose a customized chat icon so you don’t have to use this one. You can go with this one or this one or I’m just going to go with this one. I think it looks pretty nice. And so then what we can do is customize our greeting so it comes with a standard. Hello? Uh, welcome to character mapping.

Live chat. Let’s chat. Start a new conversation below. Now this is fine, but what I don’t like about it is it seems a little bit like a Bot. It seems a little corporate and I would rather have something that feels a little more familiar and like what you would actually type to a friend. So I’m going to change it a little bit so I just changed it to. Hey there. Welcome. Glad you made it. I’m sure you’ve got questions. What can I do for you? I just feel like the scenes a little friendlier and like Maryville’s really here. Ready to answer this question. Okay, now we’ve got another choice of the chat prompt. Remember how I said you’ve got the option of uh, the chat actually just popping up on its own. When somebody comes to your site, you don’t have to do that, but I recommend it.

And most cases, especially if someone’s been on your site for a specified length of time where they’ve made it to a certain point on the page where you think, hey, maybe I should, uh, be a little more proactive and ask if they have any questions. So you can either skip that or I’m going to show you how to do that though. So let’s go ahead and click that. All right, so that comes pre populated. It says, welcome to care character mapping, live chat. Let me know if you have any questions. I’m always happy to help. Now this seems pretty friendly to me and I kinda liked the way it’s worded. I’m just going to remove the live chat part. So it just says welcome to character mapping. That seems pretty good to me. So let’s go ahead and move on. Okay, so here is where you might get scared because it looks pretty technical, but it really is not.

So basically, you know, you probably have a wordpress site. Most people do, so a, there’s either you can post javascript code onto your site or if you have wordpress you can go this route. And so what we’re going to do here is we’re actually going to jump over to the wordpress side, the back end where you’ve logged into your word press site and I’ll show you exactly what to do. Okay, so here we are on the back end of this wordpress site and you all are going to do is from the dashboard area. Once you’re logged in, you’re going to go over to plugins, add new, and then you’re going to go search plugins and you’re going to type in convert Fox and it’s right here. It’s the only one. So you’re just going to click install now and it’s already installed and now you just click activate.

Now we’re almost done. All you’re going to do is go down to settings then and then find a convert Fox plugin. Just click that and then here it’s asking for your convert Fox Project ID, so in order to find that you’re just going to go back over to convert Fox where we left off and it gave us an ID. We’re just going to take that and plug it right in here and we’re going to go to save changes. Now we’ll go back over to convert Fox and scroll down. And some. This confused me the first time I it. Just to let you know this is only an image of what we just saw. You’re not meant to input anything here. This is just kind for visual reference it. They’re trying to show you what you’re going to be doing on the wordpress site so you can not even pay attention to this. And then just click on finish and check now.

Okay. So see that popped up. So that means it’s working, but I don’t think I’m happy with it popping up as soon as someone comes. I think that’s a little obnoxious. So what I would rather do is change the settings on this so it only pops up after they’ve been on the site for a little bit of time and they were able to kind of navigate their way around it on their own for a bit first. So let’s go back over to convert Fox and really dive into that setting. So I’m going to click here where it says click here to move along. That’ll take us to the next steps. Now there are a lot of icons and a lot of things over here that will look confusing. Um, we’re not talking, we’re not going to be focusing on any of these right now. Um, this, the setup guide right here is the only thing we’re gonna focus on.

Um, so I’m gonna go ahead and click that. So in order to fix that, what I’m going to do is I’m going to click on the, create your first chat prompts so we can edit those settings. And then I’ll click on the little icon next to the trashcan icon, and then from there, click on edit. And here’s where it gets all those settings. So you can change the text if you want. I think the text is fine though. So what I’m gonna do is come down here and I’ll show you your different options. So, um, you’ve got the option to have a display after a certain number of seconds. Um, I might recommend, you know, a minute, so I might type in just 60 seconds here. And so there’s a few other options here as well. So there’s time on page is at least 60 seconds or you could say time on site.

So if someone comes to your homepage and then they go to your about page or your testimonials page, it starts clocking it from the time they get on your site and it keeps going no matter what page they’re on. So that could be really powerful as well. Let’s turn it on for time on site then is at least 60 seconds and then we’ll go ahead and switch that on. That’s very important. So it has to be green in order for that to work. And your next option is not so much time based, but how far someone has gone down the page. So you could say, you know, at least 50 percent of the way down the page, if they made it down that far, then you’re going to choose to, uh, to have that little thing pop up on them. I think this only works for a one page though.

So the other one worked on, you know, if no matter what pages they navigated to after a minute it would pop up with this one. I think it’s just they have to get 50 percent down and any given page they go to. So anyway, you could do that if you want, but I’m pretty happy with just the after 60 seconds one, I think that’s great. Based on the visitor’s date or time, I don’t really recommend this one. I don’t see much of a benefit on that. Um, and then should the chat prompt appear during office hours. So basically what you can do is you can set this up to not be triggered when you’re not working, which I would consider to be a best practice to turn it off when you’re not working. Because that way what’s going to happen is people will ask you questions and if you’re not there to answer those questions, that can feel like a negative experience and the minds of your customer.

So I would only put this on and when you know you’re able to actually get on there, get on your phone and actually respond in real time. So go ahead and click on that. And then going down here another few things we should talk about our visitors browsing specific pages. This is important if you don’t want it to be shown sitewide, there’s only certain pages you want it to show on. This one applies. If someone’s only been to a certain number of pages, a not super important. I don’t see a whole lot of benefit of that one of visitors on a specific device. So maybe you only want to show this to people on mobile or on desktop for some reason from a specific location, like maybe you’re a local business and people you might notice you get some bot traffic from other countries that would not even be likely to be a customer because they’re not even in your specific area.

So you might turn it on for that reason, but. But anyway, I think we’re good with these options. So I’m just going to go ahead and click save. Okay. So there you go. So basically from here then what I would recommend you do is download the iphone or android APP for convert Fox. That way how it’s set up is whenever someone clicks on the little icon, asks you a question, your phone is going to ding and it’s going to let you know you have someone on the hook and you can just go on there and answer their questions like you’re texting a friend. It’s really easy and a great way to overcome objections in real time and really get a whole lot more customers who would not necessarily be willing to talk to you otherwise. Okay, so I hope you can see how simple and effective this method is to getting more people into your sales funnel.

I’m in an earlier stage of the game than you would normally be able to get them, but now it’s time where I want to hear from you and I want to know if you have any questions or comments about any of this. I’m just a common away so I will read every single thing that comes through and I will answer every question that I possibly can.