How to Add a Chatbot Widget to your Agency Website

TRANSCRIPT

I’m going to show you how you can be adding in a chat Bot widget to your agency website. It’s pretty simple. We’re going to use many chat for this. You could certainly use some other chat platform for this, but I’m going to go with a one of the most widely used chat bot builders out there, right? Okay. So I’m here in mini chat here and I’m connected to a like a test Facebook page. This is not my businesses Facebook business page. This is just a, something that I use for testing things out. Maybe I want to build a bot in here, whatever and then like move it off to like a client or something like that. so I’m in this test environment. I’m going to go to growth tools, which is where I’m actually at right now. And I want to select new growth tool. Okay. Now you’ve got an array of options here. I’m going to go for customer chat cause that’s what I want to appear. Well like you see right here, over here in the lower right hand corner. Okay. Customer Chat. So let’s go in here. So you can go in and you can rename the the chat if you want to. Okay. Want it? Yeah, I’m going to go and make this active.
All right? And now I’m going to edit. I’m going to go to the, and it right here. Cause this right now it’s just like a welcome message. And I don’t want just a welcome message, right? So when we go into edit, okay. And then I could go in here and change the text of my messaging, right? And then of course I can hop right in here and put in a dynamic field that poured in from Facebook. Whenever that user is chatting, we’re the patriots. Okay. let’s see. I’m gonna leave the text alone and you can also add an emojis in here. I’m gonna leave the text alone. I’m not going to add any other items or elements here. [inaudible] Is, I’m going to connect this to a chat bot flow. So you don’t want just this cause someone would hit your chat and then they would just stop.
They would the no followup, right? You want to try to qualify them perhaps a little bit. So let’s go ahead and do that. So let me go ahead and continue to another step. Choose next step. And then from here I’m gonna Select, ah, start another flow. And then I’m going to select, click to select a flow. So now I would select in here a different flows that I already have created in here right now. I don’t have a lot going on here cause I’ve moved it and moved over to other stuff, right? And if there’s something that I’m not really interested in using it and I’ll just get rid of it, whatever. So I would just select whichever this is the active one that we’re setting up right now, but I would select a flow to continue on too. So just for the purpose of this, and I’m gonna get rid of this, which is, you can’t go actually through my bot here in a second, but I’m just going to go in and connect it here to this insurance plan.
So what this flow. So what would happen then is once I get this on the website, someone’s going to hit this message here and then they’re going to continue on to the next, a part of the SQL team. So there’s, this is the, the start, another flow for the insurance box. All right, cool. So I’m gonna go ahead and publish this. All right, so that’s ray. Now I’m going to go back over here. This is my bread crumb here that I’m working through here. Go back up here to the MF Chad, and I’m going to now select next, or I could select set up either one. Okay, so on this page here, I’m going to select install javascript snippet and then now I just need to put in my domain, okay, I don’t want to be putting this onto right, so it’s automatically gonna put in that domain here.
Plus it’s going to create another one too for www dot. And it might’ve been something. Go ahead and add that in there. And then I’m going to select next. And so then I’m going to copy this little snippet here. So I’m just going to select copy code to clipboard. And now you want, you want to put this into the header and I’m going to show you how to do that real quick. So I’ve got that copied. I want a slick finish. And now I’m going to hop on over to my website editor. So I’m in the editor here and I’m going to go over to settings and I’m going to go to a header html. And then I already have like pixels in here, a Google tag manager and so forth. I already have my mini chat [inaudible] code already added in here. But for the sake of video, let’s just pretend that I just pasted this in here, this being the snippet of code, and then I just copied from right here, right? All right, so we’ve got that in there. I’m gonna go ahead and select save. No, the step I need to make and here all of this, yeah, all of the texting or all of this in here. I would have quit you into the headaches, email, sexual. Alright, select x here. And then I’m going to select republish.
No, I actually didn’t make a change of course, but for the sake of this video, let’s just pretend that I did. And then while all this is what you’d expect to find after you refresh year your website, you’d expect to see the Chat Bot widget up here. Now let’s change this. Let’s say that you don’t want this to appear here. It’s a little welcome message. You just want maybe a little chat Bot, which Avatar I want to show you how you do that. So back over here under the customer chat pane where you can edit it in here. You can change this. So it’s not opening the chat window and you can just put it as show only in the Messenger bubble, which is what you see there. And then you can also change how you want this to appear. If you wanted to peer both on mobile and desktop or just desktop only mobile only, that’s fine.
What usually do is four, this screen here, I’ll usually leave it open on desktop, but not on mobile, just because there’s not as much space on mobile. And I don’t want this to a cover, something that might be important that someone might see in the background, especially if I’m betting a widget like this on to a Elaine page where I’m collecting information. I don’t want the fields to be hidden by the Messenger bubble. I mean by the the chat window. Right. Okay. So the next step here would be if I wanted to change the color, as you can see over here, I have did this matching purples that are kind of in our design, right? So if you wanted to edit the color, oh, you have to do is right here under color. You just needed to drop in what’s called a hex value for your color.
I want to switch in here. You could have questioned I bought it and changed it to wherever you want. But if you wanted a very specific color, which I did then I would drop in the appropriate hex value for that color. And then I’m especially what this gonna look like if we go ahead and change this. Cool. Alright. Next step. Now you could you can change the greeting message if you want it to. And the next step though would be to select check. I’m not going to do that cause I actually do not have this, the, the embed code installed on a website anywhere, so it would just tear out. I’ll show you what this, all right. I got to say this first. I guess confirm. I’ll show you what happens if this airs out. Okay. Yeah, it’s all right. Get all angry screens. We’ll be all red. Okay. Yeah, there we go. Okay. So that would, that, that’s what you would expect to find if you did not have your widget set up properly, which I don’t because I don’t have the widget actually installed on our website.