How to Activate an AI Chatbot on Your Website and Funnels | Coaching Corner #022

David Lamoureux shows how to add an AI chatbot to ClickFunnels using Message Hub, Vercel, GitHub, and OpenAI. You'll collect credentials, create three files on GitHub, deploy a serverless function, and connect it back to Message Hub. The bot answers questions 24/7 based on your website content.
Chapters
What's going on, my friends? How are you doing? Welcome to Coaching Corner yet again. David Lamoureux here. I hope you're doing well today. Where are you tuning in from? Please let me know in the comments below. I would love to hear from you. So the time has finally come whenever we're gonna dive into how to activate an AI automated chatbot on your Message Hub widget. Okay, and it is the actual Message Hub live chat bubble on your websites and your funnels, and it will be able to automatically respond to, uh, to leads and contacts that go to your website, go to your funnels, asking for questions. And it's working for you 24/7. So that means whenever you are asleep or away or busy, it can actually take over those questions for you. and at some point they could hand it over to you if needed, and, uh, and then you can jump into the chat from there. So who's excited about that? I know pretty much everybody is. It's a, it's a, an awesome feature. It's a super cool thing. It's a little bit of a setup. Okay. So I'm not going to lie to you, minimal, uh, minimal tech experience required, but we made it as easy as possible for you. Okay. So strap in. Buckle up, get your favorite energy drink, and let's dive in. Here we go. So don't forget to let me know where you're watching from. I would love to hear from you. Okay. All right, let's go ahead and dive in and show you what it looks like. So with the chat bubble, the Message Hub enabled chatbot bubble down here at the bottom, it's going to show up like this. And here's kind of an example, a quick overview of what it can do. So as soon as somebody starts to type in some questions, it can automatically respond within just a few seconds. All right, so here's a generic general overview, uh, question. Hey, what's the best way to get in touch with David? It came back with, the best way to get in touch with David is to book a free strategy call, because, uh, that's what I inputted into the, uh, the memory, the brain, and it actually put all that in in just a few seconds. What are his services? Sales funnels, AI marketing, AI automation, ads and marketing, all that awesome stuff. Okay, cool. How about, um, um, what times of day are— is he available? And it may or may not do this one. I'm not sure if I've actually put this information in there or not, but we're going to give that. Okay, cool. David's availability may vary, so the best way to find out is to book a free strategy call. There you go. So what's cool about this is it's, it's not listening for like keywords or, you know, specific phrases. It actually goes into the brain, thinks about the question, and correlates that with the information that you've given it, and it can actually give a response based off of your input, based off of the brain, the library. Okay, so what's going on from Slovakia? Hey, hey, Marek, thanks for joining in. Welcome in, good to see you. Okay, so on the left-hand side, this is how to activate that chatbot for you. Again, I'm not gonna lie to you, it's a little bit of a setup. This is not for the faint of heart, but I'm gonna be here for you, hand-holding you the whole way and no need to fret. Okay, so minimal tech experience required, and basically if you can copy and paste, then you can do this. All right, so let's dive in. Again, this chat bubble will answer these questions for you, you know, 24/7. Basically, it will act as like your customer service agent online. Okay, it's powered by OpenAI, and we're going to use a couple of tools for this, and I've researched and used the best I found the best free tools to get this thing up and running for as minimal cost as possible. All right, we're going to use some tools called Vercel and GitHub. Now these two are free and they're always on. There is no server to maintain. It's not required upon your computer to be, uh, turned on. And these are cloud-based servers. Okay, so minimal setup and 24/7 and as free as possible. Okay, so here we go. You will need these 4 things. Uh, you've already got ClickFunnels and MessageSub, so check that one's already done. You're gonna need a Vercel account at vercel.com. That one is free. GitHub account, github.com. That's also free. And then OpenAI account with credits, uh, platform.openai.com. And, uh, the minimum is $10 in credits, and that actually lasts for like months, even on high traffic. Okay, so it's next to free, basically next to nothing. All right, so let's go ahead and dive in. Let me give you this. I'm going to make it as easy as possible for you. Okay, so I'm going to copy and paste this in the chat. Come on over here to the chat, get this link. We're going to go to this page. This page is right here, and we have the prompt right here for you to just copy and paste. Okay, we're going to make it as easy as possible for you. Also, if you would like to access these slide instructions, then you can click on this button here and it will take you straight to these slide instructions where you can download this, you can make a copy, you can save it. That way you can go back and actually walk yourself through this step by step, as easy as possible, in case if you need more of like a visual, uh, reading, you know, to kind of do that, that slower. Okay, at your own pace, right? So here we go, we're going to go ahead and copy and paste this into your favorite AI to kick off the instructions to build these files. So first step, let's go ahead and copy all of this and we're going to right-click and copy. Okay, so check, we got that. Now we're going to go and paste it into our favorite AI and this can be ChatGPT, it can be Manus, it can be Claude. Most of the AIs can do this. Even ChatGPT. My personal preferred is Manus because it can not only write out the code for you, but then it can also go and, you know, build things outside of Manus for you and also activate all sorts of things. But all we need to do here is— and it can even be in ChatGPT— we're just going to paste that in and go with it. And here we go, you'll start to watch it actually come through and put all this stuff in there. It's amazing. All right, now look on the left-hand side. We're going to need a couple of things, a couple of details from your Message Hub. Okay, this is how you're going to customize it and actually activate it and turn it on, tell it what to communicate with, and we're going to make sure that it's yours. Okay, so it put all of this out. Next, we're going to just make sure that— so here's like step 4. Okay. All right, now we need to go find these things. Okay, first up is your account ID. This is going to be in Message Hub, over in your chat settings and general. So if we go to Message Hub— oh yeah, by the way, here's the backend path, or the backend, uh, what it looks like on Message Hub whenever somebody starts to get that chat going with you. You can see all the history there. And then you can jump in at any time. It's pretty cool. All right, so to find your account ID, we're going to go to chat settings, bottom left gear icon right here, and it's in the general settings. So all you got to do is click this one button and you'll see your account ID right there. My account ID is number 86. Got onto this pretty quickly right after we, uh, launched it. Um, so that's it. Copy that. Okay, uh, you can come back over here to your your chatbot and put in my account ID is 86. Okay, done. Now we need the API access token from your Message Hub. This is found in the profile settings and we're going to scroll to the very bottom. Okay, so let's go to Message Hub again. We're going to go to profile settings, bottom left, going to click on your profile. And click on profile settings. So if we scroll down to the bottom, um, this is the API token. Be sure and keep this safe. Look here on the left-hand side, critical, keep the API key private, never share it publicly or commit them to GitHub. Okay, so don't show that to anyone, very important, and just click copy. Okay, uh, next we're going to Get the inbox ID. All right, now inbox ID is especially important if you have more than one domain that you're using this on. Okay, so let's say that you're using it on one domain, but you've got another funnel that you want to use it on a different domain. Okay, each one of those domains are going to come with a unique, uh, inbox ID because you're going to have to create a new inbox for each of those domains. Okay, so like in my example, you can see here chat inboxes. If we scroll down to the bottom, I've got one here for Georgetown Judo Club, and then I've got one for davidjlamoureux.com. All right, so how do we find it? We're going to go to Settings, Inbox and ID. So Settings, Chat Inbox. And whenever we click there, up here at the top The little number there at the back end is the account ID— sorry, the inbox ID. So for this one, the inbox is 207. All right, copy that, let's put it somewhere safe, and then come on over here. Uh, webhook configured, that will be actually the last step that we do. Okay, and so once you've got those couple of things, next what we're going to do is go over to— oh, by the way, check, we need to get, get the GitHub account. So that's the next thing we need to do. Okay, the GitHub, uh, symbol looks like a little cat. All right, so here we go. Once you log in, uh, create a free login with, uh, with GitHub, then we're going to create a new repository. Okay, uh, if we look— give me one sec— if we look here on the left-hand side, the repository is basically like a Google Drive folder. Okay, all right, let's look on the right. So you're going to click on Repositories. And you're going to click New. Name it something you'll remember. What— for me, what I did, I did an acronym of my website. It was georgedownjudoclub-chat. Okay, so yours could be something else very similar to that. I'm going to do chat test 2. Okay, create repository. Okay, next what we're going to do is just add a couple of files given to you, created for you by the AI. Okay, um, if you'll look over here on the left-hand side, it's just really 3 files that's doing all the work. It is this webhook.json— sorry,.javascript file— is vercel.json and package.json. Okay, real simple. Are you still with me? Uh, yes, Ricky, Manus is great. Manus.ai, it's one of my favorites. And what's up, Leonie? Leonila from the Philippines. Hi, hi, welcome to the call. Glad to see you here. All right, so let's, uh, keep going on the next steps. So I'm going to say, uh, actually, the personality— okay, no thanks, let's not do that right now. I'm going to say my inbox ID is 86. Okay, so now it's making the webhook JavaScript file with Inbox86. Okay, now I'm gonna say, because it didn't actually rewrite the whole thing, I'm gonna say rewrite the whole webhook.js file with my inbox. Okay, now this one, the webhook.js, this is— that stands for JavaScript— is— they're all important, obviously, but this is like the brain. This is the library, the, the source data that's going to, you know, tell OpenAI this is the information that you can pull from. Okay, so if you ever need to go and make any changes, then it's going to rewrite this and you're going to have to update that, this file over on GitHub. Okay, so now that we got the— we have the— let's see. Okay, we got the account ID in there and then the access token. Okay, you'll paste that in there. You'll do the same thing. Here's my web— here's my Message Hub API access token, and then here's my inbox ID, my inbox ID is 207. Okay, and it gives the whole thing again. Very good. What we'll do is we'll copy the whole deal. I'm going to copy this one because it's already done. Then we're going to go over to GitHub. Now we're going to create these 3 files that we see over here on the left. Okay, so Get started by creating a new file. And here we go. We're gonna name the file. It's very important to name it exactly what it says, what it's labeled as. So right here, labeled as API/webhook. Js. Very important. Okay, so we're gonna go api/webhook.js. Okay, and then we just paste all of that in there, commit changes, which means save, and save. Okay, 1 out of 3 done. Next, we're going to go back. And we're gonna get the other 2 files. So here we have the Let's see. Inbox. Okay, we're going to find the other two. My substance feels like this. Where are the other two? Push to GitHub, bash files. There it is, Vercel.json. Okay, we're going to make another file. Add file, create new file. Vercel.json. JSON and paste. Save. Go. Okay, and next we're going to do the same thing for package.json. Package.json, paste and go. Okay. Now I see and recognize that all three of these files are in the API folder basically. And over here in my personal one and my other one, the, the bottom two files are not in the API folder. I'm not sure if that makes a difference or not, But if it does, I'm going to show you how to change it right now. So we're going to click on one and we're going to edit with this little edit file right here, over here. Okay. And no, that's not it. Okay. You just press the backspace and it kind of overwrites what's before it. Okay. So we're just going to delete API. And then it will essentially move it from in that folder to outside the folder. Okay, just like that. And then same thing for the webhook— I know, same thing for the package.json. There we go. And edit, click right in the front and delete API, and commit changes. Save it, save it. Cool. Refresh the page. And now we can see that those two files are outside of the API folder. That might be important, I'm not sure. Okay, so next, uh, we've done— that's pretty much everything that we need to do with GitHub. Congrats, right? We're done with that. Okay, next we're going to go get your Vercel accounts. Okay, so Vercel is like an online server and uh, it runs the code. Okay, so over here, GitHub stores the code, but Vercel runs it, and both are free. Okay, so once you create a free Vercel account, then you go to, uh, create a project, and we're going to create a project. Oh, what's cool about it is you'll actually be able to sync up your Vercel account with your GitHub account. It'll give you that opportunity. So just whenever you see that, make sure that you connect it to your GitHub account, okay? You can actually sign in through GitHub. I believe that was the way to do it. So this is important for it to be step 2 after GitHub, because you'll need it to recognize that you already made that repository over there, okay? Then you just click Import and it pulls all that over, okay? And deploy. Next, after we connect the repository, then we're going to add 4 environmental variables. Congrats. Okay, continue to dashboard. All right, next. We're going to go to environmental variables and we're going to add environment variables. Now over here, let me see if I got— where did I put it? This one? Yes. Okay. So here are the environmental variables. We need the chat— OpenAI Chat API key, the Message Hub account ID, the Message Hub base URL, and the Message Hub API token. So let's go over to my other project because I've already got them over there and I'll show you. So environmental variables, here we go. Message Hub base URL, if you don't know what it is, it's the same for everybody, messagehub.myclickfunnels.com. Be sure and add the https:// and then add your Message Hub account ID as well. Okay. Next, you're going to paste in your Message Hub API token. This we found earlier before in one of the previous steps. And now next, we're pretty much done with this. Now we need to go over to API— to OpenAPI and get an API key from there. Okay, so we're pretty much done with this step. Okay, we'll come back there. All right, here we go. So next we're going to platform.openai. It looks like this. It's as close to free as it can get, okay? It's $10 for, you know, a long time. Uh, let me show you this down here, uh, bottom left. Cost reality check: a local business chat bubble typically gets fewer than 500 messages per month, and at that volume, OpenAI costs less than 10 cents a month, so it'll last you a long time. Okay, uh, it just has to have some kind of money in order for it to work. So the first thing we're going to do over here is add some of your money, so, uh, just $10 to get your account up and running. Okay, and so you'll do that over in billing, wherever that is. Yeah, start billing. There you go. Cool. Next, you'll create an API key. You can do that up here in the top right. Or on the bottom— sorry, the middle left where it says API keys. Once you've done that, once you've got there, then we're just going to click create API key and we're going to make a, a new API key that is unique and you're going to post it over in Vercel. So here we go. This is optional, my test key, but make it something that, you know, is I would, I would only make the like one API key per platform that you're going to post it on. That way you know exactly where it's going, where it's being used. So we're going to do, um, Vercel test. Okay, and create that secret key, copy that, save it somewhere if you'd like, uh, like on a private note that, you know, private notebook that you save on your computer somewhere, because you're only going to get to see it once. If you need to find it again, then you'll actually have to, or if you have to you know, recover this connection, you'll have to create a new API key if you didn't save it. Okay, so once you got that copied, then we're going back over to Vercel, create a new environmental variable, and you're gonna paste that in there. And that's pretty much it. Um, let's see, let me double-check something. Because it is important to have the names of these exactly like I showed them here. Okay, all caps and underscores, right? Unfortunately, because of the nature of this and of custom coding, ClickFunnels, we can't support it. We can't— like, you can't just, you know, chat with our customer success team and ask us to help you fix it. So the first step for you to go and actually try and get this resolved or any issues resolved is just chat with the same AI that you're talking to that built it and say, hey, it's not working over here. And then maybe take a screenshot of it, paste it in the AI, and it'll review it and be like, oh, here's why, here's why your message hub title over here was lowercase whenever over in the memory bank it's all uppercase. So that's very important. Okay, I'm going to go ahead and edit this just to see. All right. So the key is actually the name of it. Okay. And the value is where you would paste the API access token. Okay. All right. Who's still with me? You good? You take a break? All right. Let me know where you're watching in from. I know I'm going quick. There's a lot of, a lot of little things in here. I know you probably have questions, but If you have questions, go back and watch the replay. And you can watch it at your own speed. And also, if you have any questions, you can reach out to us at outreach@clickfunnels.com. Okay, send us an email there if you have any questions. All right, next, the last step. Okay, so boom, we got that covered. We got all 4 of those things checked off. Congrats, way to go, you're almost there. The last step is to paste the Vercel webhook into MessageHub. Okay, so now we got all the communications going one way. Now we need to set up the communication coming back to MessageHub. All right, so What this looks like first is we're gonna go to Message Hub settings and chat integrations, webhooks. Okay, so diving into Message Hub chat settings, chat integrations, create a webhook, configure right there. Okay, so that's webhooks and configure. Click on that. All right, we're gonna add a new webhook. And now here's where we go and get the webhook URL from Vercel. And what that looks like is we go over to Vercel and we click on Overview and we're going to click on this link right here, Domains. We're going to right-click and click Copy Link Address. Now we go back to Message Hub, paste that in there, and we're going to type in at the backend api/webhook. This is the only way I know how to get it. Next is we're going to check only the message hub created events. Message created, message created. There we go. URL is already taken. Yes, because I've already created one just like that. But actually, let me go and grab the other one just for kicks and giggles. Okay, right-click that, copy that link address, paste it right there. Boom, there. Okay, that's it. Now you're pretty much fully set up. Now it just comes down to testing. Okay, uh, one thing that I would recommend that you do is test it on a browser and maybe even a different device than the device that you've that you're logged into MessageHub. Okay, because for me it actually started to recognize— I was running into some issues. It was recognizing that I was logged into the same browser, and so it came back with these red, um, messages just saying that it was not working. Okay, so I had to use a different browser and a VPN. I used Opera. Opera browser comes with a free VPN. And it's, it's great, it's good, it works. And so then once I used that and tested it, it worked. Okay, so that's it, that's pretty much it. Who's excited about that, right? All right, do you have any questions? If you have any questions, let me know in the chat. We flew through it all, uh, in as quickly as, uh, as we could in under 30 minutes. I'm proud of myself. All right, so here are the most common problems. All are easily fixed. Again, talk with your AI first before you reach out to us, because it more than likely will be able to resolve that issue for you just by chatting with your AI. Okay, fix with AI. Okay, so that is pretty much it. And now you have a production-ready AI chatbot running 24/7 for almost for free. Okay, how stinking cool is that? Now one thing, let me go ahead and show you as well, just so that you're aware of it. Uh, this is— so the webhook.js is the brain, right? It's where your source material is, and this is over in GitHub. Just make sure that you talk with your AI and say you have to customize it for your business information, because right now it's loaded up with some dummy information. And so it's going to return all that dummy information if you don't customize it. Okay. So you could say your goals, right? All right, let me show you what mine looks like, my personal one, because it is loaded up with a bit more information. Uh, a README file is not absolutely necessary, just so you know, from my understanding. Okay, so here's what mine looks like. It's a bit more, uh, in-depth because I've got it set up for two different websites, two different domains, Georgetown Judo Club and davidjlammer.com. They're very different entities, and so we needed to have some different business information for each one. Okay, so got like the name, uh, here's the hours and the schedule, classes offered, uh, free trial, membership pricing, uh, age requirements, gear, instructors. And then since some prompt for David J. Lamrow, here's where we actually split it up. And again, AI did all this, so I didn't really have to do it. I just had to tell it I just had to answer its questions. It pretty much scanned my website and let me know how, you know, what it needed. And so I just came back with my answers and it wrote all of this out. So who is David Lemireau? His story, services offered, free strategy call, free downloads. Okay. Online course. Yeah. Okay. Now another quick tip. I— one of the reasons why I like Manus is because you can just copy the link to your website and paste it in there and say, hey, based off of this website, can you store or can you, you know, learn what this website, what my services are all about and my tone and my story and everything and write that into the, the brain, the memory banks. Okay. I don't believe that ChatGPT can do that. So let me try it. Here's my website for more information, for information to add to the webhook.js. Okay, let's see if it does it. It's been a while since I've checked this. There you go. Yeah, since I can't reliably scrape your website, Live inside of a serverless function, the correct product approach is to embed a structured knowledge, a materia, into the system prompt. So yeah, this one can't actually read websites, but Manus and Claude can both do that, and so can, uh, Google Gemini. So maybe one of those three are good options. Okay, so that's it, guys. I don't want to blow your brain up any more than I have to. Uh, let's go ahead and cut it here. If you have any questions, again, drop it in the comments, or you could also email us directly at outreach@clickfunnels.com. So did you like this training? Was it good? Was it helpful? I hope it was. Thanks for joining this week's edition of Coaching Corner. This one has been a little bit in the making, and, uh, and we hope that it's helpful to you. Okay, hope that it encourages, you know, business growth for you and your life and gives you and your family a bit more freedom. Okay, so that's it. Thanks for joining. I'll see you on the next one. Bye for now.
More from Todd

How to Set Up and Send Your First Newsletter In Daily Draft | Coaching Corner #044









