How to Add Live Chat to Your Website

Heads up: I use affiliate links for my fave products. If you click and purchase, I may receive a small commission at no extra cost to you.

This is my fave live chat software ever!!

HIT PLAY:

VIDEO TRANSCRIPT:

How to Add Live Chat to Your Website

Welcome back to my series, Going Remote. In today’s video, How to Add Live Chat to Your Website, I want to share with you my number one favorite live chat software. This is going to allow you to chat with your website visitors in real-time, and you can add this to your website no matter what platform you’re using. I think adding live chat is a really smart idea, especially right now. It’s going to allow you to answer any customer inquiries, and it’s going to help you increase sales as well.

Let’s dive into the demo of how to add live chat to your website, and I’ll show you the main reasons why I’m such a fan. You are going to love this software so much - it is so easy to set up. I’m really excited to share it with you.

Chatra - Live chat, email & social messaging for business

If you’ve ever been on my website and you’ve seen live chat pop up like this, that is Chatra. I can control this message that comes up here, and then a visitor to this site can simply come in here and ask me a question. As you can see, I’m going to get a notification. There is a desktop version of this, and also an app, so you can access your messages from anywhere. I think it looks really professional, and you get to go back and forth and answer any customer questions. I will say, this has increased conversions for me a lot on my website. (When the messenger isn’t open like this, you can simply close that, and it will hover there, bottom right of your screen.) Let’s take a look at this at chatra.io. (I also have an affiliate link down below – I would really appreciate it if you used that.)

Chatra Plans & Features

Before I get into the actual demo of how to add live chat to your website, let’s check out the plans and features. There is a free plan, which is great. This is just going to give you one agent account though, so if you would like more you can upgrade to the paid plan which is only $15 per agent, per month, when billed annually, or $19 per agent, per month, billed monthly.

There are a few features I’m going to draw your attention to. If you want, you can actually integrate your Facebook messages into Chatra, so that you’re just responding from one Inbox. You would need the paid plan for that. Also, targeted chats (triggers) that come up like I showed you, requires the paid plan. Definitely check out the Plans & Features page and see everything that you get and compare plans.

Chatra Free Trial

To sign up for a free trial, you’re just going to enter your email, and click Sign up. This is what it looks like, and it’s going to walk you through a few settings to get set up. First, we’re going to set up the chat widget. All you have to do to get this to appear on your website is copy this code here and add it to the head tag area. They do actually have installation guides for all of the most popular platforms - I’ll leave a link to this below so that you can go and check those out. I will demo for you just how easy it is to add to your Squarespace website. You’re going to grab that code, and then let’s scroll down.

You can set your language and then you can choose what color your chat to be in. You can choose whether you want to color the chat header, so I’ll click that for now, and what you want your button style to be. I’m going to change this to Round, and then you’ll see the different options that we have for the icon. I like this heart one here. Then you can decide where you want this to be positioned – I’m happy for it to be at the bottom of my screen and to the right, but as you can see, you have a lot of options there for the positioning. Then you can change the chat widget text here – you can come in here and double-click on this and change what it says. I was happy with what it says by default, so that’s good – We are here to help. Ask us anything…

The chat widget is going to display things differently, based upon whether you are online or not - whether you are logged in here, or whether you have your desktop or app set to online. This is the online version, and this is the version if you’re not currently available. Because it’s just me, I would change this to I’m here to help. Go through these other settings here and decide what you want on, or not.

Adding Chatra to Squarespace

Let’s add it to my Squarespace website so that you can see it come to life. All I need to do is grab this code here, so I’m just going to select that, hit Command+C on my keyboard or Control+C, then I’m going to go into my Squarespace website. To add it to my entire website, I’m going to click Settings, Advanced, Code Injection, and you’ll see this header area – that is where we want to add it. As you can see, I have a few other pieces of code in there. Let’s go ahead and put that in here and hit Save.

As you can see, it has been added to my website. Obviously, we need to customize this text right here, so let’s keep going in Chatra, especially as this is live in my site. That’s the color there - you can go ahead and change this and once you do, it will automatically change on your website. That’s how you can test what it looks like. I’m happy with that color.

Now let’s go back into Conversations, and click on that message from the bot. Now you’ll see that we’ve set up the chat widget. Now we need to enable notifications. You can just click Enable desktop notifications, and those will notify you, right up here at the top right, whenever you have a new chat. You can choose what sound you would like it to be. Obviously, I would need to do this at the browser level. To do that, all you need to do is click Allow when this little pop-up appears, and then they are enabled, and you can click Send test notification to see what it looks like.

Back to our test account. The next one is Fill out your profile and upload a photo. If we click on that, you can choose what your display name is going to be. I’m going to type in my name. You can put in a title if you want, and then you can upload an image. I’m going to click Choose an image, then Choose a local file, and simply upload a profile picture. Then you will be able to set your Time zone and your Operating hours. You can go ahead and check what days you want your chat bot to be available.

Let’s see this on my website now. Now I can click on the Chat button and now we get my profile picture and we get a green little icon letting them know that we are online and ready to help. Then, beyond this, you can Invite your team members, so you can have other agents available as well. Then you can Connect your support email address and Connect a Facebook page if you would like. Honestly, I didn’t realize this, so I will be experimenting with these two features.

Now let’s go through the side panel, and I’ll walk you through a few other settings. First, at the top is where you can set your status – you can set it to Online, Invisible, or Offline. Then, under Conversations, is where your conversations will be held. If I click on this message here, this is an actual conversation, and I could come in and respond right here. (They have a bot for us to practice.)

Now, let’s click this icon top left. Your new conversations will come into the New tab under Conversations, and all conversations will be right below.

A cool feature is you can also click Visitors online, and you can see all of the people that are live on your website right now, and what page they are on. You can get a lot of information right in here.

Of course, we’ve already set up the chat widget, so at any time you can come into Chat Widget under Channels and change the settings here.

Then, let’s click on Preferences, under General. By default, they are going to forward you any missed and offline messages, so even if you are unable to receive the chat in real-time, it will send you an email with their email and you can get back to them that way. That is fantastic, even if you’re not currently online.

Let’s go to my website, so that you can see what this looks like. Let’s say I go to start a chat. This little bot here will respond, and ask them for their name, and their email. (This is there just in case you miss it - they can forward this to you, and you can get back to them via email.) But really, you will get a notification as well for the chat, and then you can go ahead and actually chat with them there, instead of having it go to email. You will see this red circle under Conversations when we have a new conversation. We’re going to go in here and as you can see, Louise says Hey, I have a question. It even shows you where the person is, which is great. Then I can come in here to join and say Hey, Here is the answer.

So, this is what it looks like from your end as the live chat creator, and then for your website visitor, this is what it will look like.

I love this software, and it was just so easy to setup. That is what they mean when they say Chatra Bot under General – it’s them asking them for the email.

The final thing that I’m going to show you in this How to Add Live Chat to your Website tutorial is Targeted chats & triggers, under Preferences. This is really cool. You will see that they have a few templated versions here for you, but I’m just going to click New trigger. Then, I can title it – I want to add it to my sales page Uplevel with Asana. I want this to show up when either agents are online or offline, and then here, under IF, is where you set the conditions. I want the current URL to contain my URL for that page, so I’m going to type that in. You can add a lot more conditions to this as well. For example, if I wanted to send this message only after they’ve been on the website for more than 10 seconds, I can come in here and type that in. Then, under THEN, you can determine how often this is going to show up, and what’s going to happen. I have it set as Expand the chat box. Let’s click Save and see what happens.

As you can see, after ten seconds of being on the page that contains uplevelwithasana.com, I got that targeted chat message right here. Also, very simple to set up.

The final thing I want to mention is that they do have apps, so you can download it for Mac, for Windows, or for your mobile devices, so this is going to appear right down here on your dock, just like this. You can open that up, and this is the desktop version. You can simply click Go online here and have a conversation right in here. If I come right over here, top left, to the three dots, I can see all my past conversations. It is really funny – Chatra is going to give people a specific name if they haven’t given you their name - so you’ll see names like Antique White and Italian Olive - these are unique identifiers for each visitor.

Have fun setting up this software - can’t wait to see live chat on your website. That’s it for today’s tutorial on how to add live chat to your website. Let me know in the comments if you are going to be adding live chat to your website. If you liked this video, let me know by giving it a thumbs up, and if you haven’t yet, don’t forget to Subscribe. Thank you so much for watching and I’ll see you soon with another video.

Chatra Installation Guides: https://chatra.com/help/cms/

Try it: https://louisehenry.com/chatra (affiliate link) Subscribe for more #GoingRemote videos! https://louisehenry.com/subscribe

Sending you all my love! If you think others will benefit from this video, please share it 💛

All #GoingRemote videos: https://www.youtube.com/playlist?list... Join my email list: https://louisehenry.com/list

Connect with me here: https://louisehenry.com

ABOUT ME: I'm Louise. I teach entrepreneurs how to leverage tech so that they can save time, automate more and scale their business with ease. Find out more at https://louisehenry.com

GET YOUR FREE ROADMAP HERE:

View fullsize

About Me