Build a customer support chatbot with me (No Code)

This chatbot can answer your customers' queries and generate sales by recommending products to your users. Now, you might have seen videos before on chatbots that recommend products to your users. I myself have seen loads, and in my opinion, what I'm about to show you is by far the most simple way to create these type of chatbots. In all the other tutorials I've seen, this chatbot requires you to connect to other softwares and databases and use APIs and things like that. In this video, we aren't going to be doing any of that. We're going to be doing it all on Voiceflow without using any other softwares or databases or anything anything like that. So it's super simple. In this video, we're going to be making a product recommendation chatbot for Gymshark, which is an e-commerce brand. But if you're a business owner and you own some other type of business, maybe you sell a service or a digital product or something like that, this chatbot can still be for you. It's not exclusively for e-commerce business. So if you don't own an e-commerce business, then don't worry, I'm sure you can still find some value in this video. So as you can see, we're inside Voiceflow at the moment, and this is a chatbot build that we're going to be building today. As you can see, it's super simple. There's really not much to it, but it does the job perfectly in my opinion. And the process of making it is way simpler than any other video I've seen. So I'm going to walk you through exactly how I made this chatbot step by step. So if you want to follow along, then feel free. So as you can see, I've got the chatbot here and I'm going to make the whole thing again just for you guys so you can see exactly how I did it. So first we're going to go over to new agent, we're going to name it We're going to say Gymshark chatbot.

Nice and simple.

Select the modality, it's going to be voice. Language, for me it's English.

I'm going to create agent.

Okay, so this is how your chatbot should look when you first load it up. As you can see, there's a lot of writing and stuff here. We don't need any of that, we're just going to get rid of it for now. And we're going to start off, we've just got our start block. Okay, so we're just going to start off with a simple text block. It's going to be what our users greeted with them when they first use the chatbot. So we're going to say, hello, I'm Dan, welcome to Gymshark. We'll make sure to connect these up, otherwise it's not going to know to go to that block.

I'm going to put another one down, just simply say, how can I help you today.

One of the cool things about Voiceflow is you can generate variants of the text that you've put in. So it just means that every single time a user comes to use your chatbot, they're not going to get greeted with the same message.

So you can generate 3 variants. Yep, yep, yep, perfect.

That looks good. Okay, so now what we're going to want to do, so we're going to go to Listen and we're going to say Buttons. And for this tutorial, we're going to have two different buttons, so two different routes that the user can go down.

We're going to say, I would like help finding a product.

Add button.

I have a query.

Simple. So to begin with, we're going to start off with the query route because it is super simple. We're just going to draw a line over here. It's coming from that button, so it just means when a user clicks on that button, it's going to take them this way. So we're going to put down another text block just saying, what can I help you with?

Let's generate some variants. Yep, yep, yep.

And then what we're going to do, we're going to go to Listen and then Capture. So we'll put a capture block down, save it as last utterance. And what that's going to do is anything that a user types out after our question, what can I help you with, that's then going to be saved as last utterance. And then what we do, we come over to AI, go to Response AI, and what we need to do now is we need to add a knowledge base. So I'm going to quickly show you how to do that, it's super simple. So we're going to go back and you can see this section here called knowledge, and all we're going to do Add data source. You can see there's a couple options here on how you want to add your data source. The main ones I use really is URL, so you can put a URL to your website and it's just going to take all the information from that page and use that as a knowledge base. What I use most of the time is upload a file, so you can just upload a Word document or something like that with all the information that you think the chatbot might need. So for me, I've just got ChatGPT to write me out a knowledge base for Gymshark. Just because that was the easiest thing to do. But if you're going to do it for your business, then it's usually just a case of having to sit down and just write out all the relevant information about your business. And if you're going to be making this for another business, then you can just use the URL option, or you can just ask the person to provide a knowledge base. So we're going to go import, and as you can see now, that's synced up. So that's good. So we're back inside our chatbot here. I'm going And what we're going to do with this AI step is we're just going to say under question, we're just going to put last utterance. So that's what we saved here. So that's the query that the user has. That's the question that the AI is going to be responding to. And then instructions, super simple. You can go more in depth with this, but I'm not going to. So you can just say, so super simple. I've just said respond to the user's last utterance using the knowledge base. 'Keep your answers short and concise.' That's really all you need to do. You can go into more detail in this, but for the sake of this video, I'm not going to. So make sure to connect that up. Then after that, all we're going to do is we're going to connect a string, put another text box, and say, 'Is there anything else I can help you with?' Is there anything else I can help you with? And this is going to be put after the AI has answered the user's query. So we can put anything else I can help you with, listen again, and just again use that last utterance. And then we're going to put that back into the AI step. So all that means is when the AI answers the question it's going to answer the question and say, is there anything else I can help you with? If the user then asks another question, it's just going to go back to the AI step and it'll just keep going around in circles until they haven't got any more questions. So let's quickly test this out and see how it works. Run test. Hi, I'm Dan. Welcome to Gymshark. I have a query. What can I help you with?

I can say What sort of products do you sell?

What sort of products do you sell? So as you can see, it has accessed the knowledge base to tell us Fitness Apparel Accessories by Men and Women. The products include workout shirts, tank tops, shorts, leggings. Is there anything else I can help you with? And as you can see, just a little thing with this, it's talking about Gymshark in the third person, so it's saying 'their.' We want it to say 'our' because it's Gymshark's chatbot, so it won't really make sense if it's saying 'their' when it's on their website. So all we're going to do is just come back to the instructions and say, 'You are a virtual assistant for Gymshark.' You're a virtual assistant for Gymshark. Respond to all the users' last utterance using the knowledge base. Keep your answers short and concise. Okay, so that should have fixed the problem. Let's run it again and see what it says.

I have a query.

We're just going to ask the same question just to see how it reacts differently. So as you can see, it's on the right track, but it's still kind of not worked. So we are just going to go back into the AI step. Now you have to remember that we are using ChatGPT 3.5 for this, as it's the cheapest model, and sometimes it's not the best model. You can sometimes not really listen to you, so you just need to make it a little bit more clear for it in the instructions. So all I've done is I've just added to the end of the instructions, make sure to reference Gymshark as we, as you are part of their team. Now if the AI step isn't still talking how you want and responding in the way you want, you can go to override prompt settings. You can always change the large language model, but as you can see, some of them are a lot more expensive. So what I'll recommend is adding in a proper prompt here. I'm not going to do that for this video, but I am making a video soon on how to make custom GPTs for your website, and I'm going to be going through how to write proper prompts in that video. But for now, we're just going to test it one more time and see if it's worked.

I have a query.

Again, we're just going to ask the same question.

What products do you sell?

And there you go. So you can see it starts with 'we.' That's what we want. Let's ask it one more question just to see if it works.

I'm going to say, where are you based?

We are based in the United Kingdom. Is there anything else I can help you with? So that's working perfectly. Now there are more things you can add to this. You can add a human handover. So if for some reason the AI doesn't know what to say because it can't find it in the knowledge base, what we usually do is add a human handover. That does involve using other softwares, and as I said in this video, we're just going to be doing it all inside Voiceflow. So Keeping it nice and simple. This should be able to handle a lot of your customer queries as it is. Okay, so for the next step, we're going to come from 'I would like help finding a product.' We're just going to put a text block and we're going to say, 'What product would you like to find?' Yep. No, no. Okay. What product would you like to find? And now we're gonna capture this again, but this time we're gonna create a new variable just so that it's a little bit easier to manage. You'll see why in a second. So we're going to go create new variable, and we're just going to call this product. So we're going to hit create variable. As you can see, now that anything they say after what product would you like to find is going to be saved as the variable products. Okay, so now what we're going to do is going to go to AI and we're going to put down a set AI block. So again, we're going to have to reference the knowledge base. So I'm going to show you another knowledge base that we're going to have to upload into the chatbot. So let's go back, knowledge. And what this knowledge base is, is a list of all the products with the name, a detailed description, the URL to the image, and the URL to the page that the product's on. So obviously in this case, I haven't done all of Gymshark's products. I've just done 3 jumpers, 3 hoodies, 3 joggers, and 3 t-shirts. So this might take you a little while to do all of this, but what you can do is you can ask ChatGPT to scan your website and write a description out, get the image URL and the URL to that product. That's what I did for Gymshark, and it just streamlined the process so much. It would have taken me ages to do it manually. So do consider doing that. So we're going to go over, add data source again, upload file. Okay, and now we have our products in there. Okay, so with this Set AI block, what we're going to do is we're going to enter the query question as product. So this is when the user is going to be saying what type of product they want. So for instance, I want a jumper that I can wear on a rest day or something like that, or I want a pair of joggers I can run in. So that's the question we're going to be asking the AI. And then this is the instructions I've put down. ChatGPT uses inputs and analyze the knowledge base for the products that best fits the description and extract just the product name. And then it is imperative for my career that you output novel words, just the name of the product. That last little sentence might seem a little bit weird, but we want this AI to output just the name of the product. And sometimes it puts words around it. So instead of just the name, it will say, this is the name, and then the name. We don't want that, you'll see why later. But when you put these sort of emotional prompts to ChatGPT, it seems to react much better and actually do what you want to do. So yeah, that's why we've got that in there. So again, we're going to create a new variable and we're going to name this one product name. So create variable. So now what you can see that's going to do is it's going to take the user's query for what product they want, it's going to use that scan the knowledge base and then find the product name that will best fit that based on the description of the product and save just the name of that product under product name. So now we want to do that for the other variables. We want product name, the image URL, and the product URL. So I'm going to do that now. Okay, so now as you can see, I've got all of them in. I've got product name, product URL, and product image URL. The only difference I've changed to the prompt, if I've just— is I've just put product image URL product URL and product name. I've just changed those variables out, that's it. So you can just copy and paste the prompt to each step of this. So make sure to connect those up. And then now what we need to do is we're going to add a card block, and in this card block we're going to go to link. Then what it's asking for now is an image URL, so we can put in the variable product image URL. That's asking for a title, so we can put in Product name. And then what we're going to do is we're going to add a button. Enter button label, we're just going to put See More and go to Action. So that just means what is this button going to do? In this case, we're going to go to Open URL. So it just means when the button's clicked on, it's going to open a URL. And for this URL, we can put in the variable product— you can put in the variable product URL. And then we simply just connect it up. So let's run it and see what happens. Hello, I'm Dan. Welcome to Gymshark. What can, what can I do for you? I'd like help finding a product. What are you looking for? I'm going to say a pair of joggers I can run in. Okay, so what you can see here— I was hoping that this might happen just so I can show you how to troubleshoot this because this is quite a common thing. So as you can see, it has found a product that fits our needs, the Arrival Woven Joggers. As you can see, there's no image and the See More button doesn't work. So what that means is the product name variable is found that perfectly and it outputs it just the product name, but it hasn't outputted just the image URL and just the product URL. It's obviously added words before or after them, which means the links are broken, because for a link to work, it has to be just the link. I hope that makes sense. So all we need to do is go back into the SetAI and adjust these prompts a little bit. And one of the things that I found works really effectively is actually putting an example of the link in so it knows exactly how the link should look, because they're all going to pretty much look the same, just with slightly different words, and they're going to be structured the exact same. So in this case, I've said Rest Day's Essential Q URL is this, and it should be outputted as only that. So you can do that for product URL and also product image URL. Okay, so I've done the same for product image URL, so we're going to test it again and see if it works this time. So we're going to put in the same prompt again.

I would like a pair of joggers I can run in.

Let's see what it does this time. Okay, so this time, as you can see, it's again got the name, it hasn't got the image URL. But it has got the product URL because when I click on it, it takes me to that page. So we're just going to come back out and we're going to need to readjust the prompts again a little bit. That's fine. Okay guys, so just a quick tip: if this problem does persist, then what you can do is you can delete that step and temporarily add a text step. And you can just say— you want to put the name of the variable So product, and then product name. So now what we can do is we can run the chatbot again, and then instead of it going to this card block, it's going to go to this text block, and we can see exactly what the AI is outputting these variables as, so we can see where it's going wrong. We're going to use the exact same prompt again. Okay, so as you can see, it's actually outputting these variables wrong. It's saying the product has you can consider the sports joggers for running. That's not what we want. Image URL is just the name of the product for some reason. And then product URL, that's right. So the product URL is fine. We're gonna have to look at the other two. Okay, so I've reworked the prompts a little bit. I've taken out the name. I've just said this is how a link should look, and we're going to try it again and just see if it works.

I would like a pair of joggers. I can run in.

Okay, so as you can see now, it's got the image URL, the product URL. The product name is still a little bit off, but to be honest, it doesn't really matter. Some people might actually prefer the product name to look like this, so it is really up to you. If you want, you can go in and tweak the prompts for the SetAI a little bit more to make sure that it's perfect, because you can get it perfect. In this case, we're not going to do that, so we're going to link it back up. We're going to run it again, and then let's see if it works. I'd like help finding a product. What product would you like to find? We're going to do the exact same prompt again.

I would like a—

and then it's found a product for us. It's given us the image and and then the link takes us to that product. That's absolutely perfect. So you might be wondering why I got it wrong so many times and I went through so many reiterations of it. And the reason for that is, is because you have to do a lot of playing around with this, and I just wanted to show you how to troubleshoot all the common issues that you might find with it. So that's the only reason I did it that way. So I hope that helps you if you struggled with any of these problems like the image URL or the name of the product or the product URL or anything like that. I hope after watching me do that, you now know how to fix these issues. So it's pretty much all working now. We just need to add one more step, and that is a variable step. So we're going to go to Logic, Condition, and what this is going to do is basically if the AI can't find a product or a service or whatever it is that matches the description that the user put in it's just going to put a simple message saying we haven't got anything that can help you and then take them back to the start and ask if there's any other products or service that they're looking for. So all we're going to put in here is if, and add the variable, we're going to say if product name— so if product name is not found. So we're going to say if product name is not found, and the reason we're saying 'not found' and I've put it like that in those squared off brackets is because that is how the AI is going to output the results if it can't find a product that matches the description. So it's going to output the product name as 'not found' in squared brackets. So you need to make sure you type it exactly like that with the space, with no capitals, otherwise it's not going to work. We're going to say if product name is not found, connect this up I'm going to come down here, add a text box. The text box, we're just going to say, sorry, it doesn't seem like we have any other products that fit your needs. Perhaps try again and look for something else you might like. So that's going to come down here, and then we're just going to put that back to the start, and it's going to ask them again, what product would you like to find? And what that's going to do is just, if the AI can't find a product that matches the description, it's going to take them back to the start. Of course, if it does find a product that matches the description, what we're going to do is going to go to no match path into path label. We can just leave it as else, and then it's going to take us here. So what that's going to do is, as I said, if it can't find a product based on the description that the users give, it's going to use that top route and make them go back to the start. But if it can't, it's going to go to the else route and put the variables into that product card. So let's try it. So we already know that it works when we put in a product that it can find, but we're going to try and put in a product that it's not going to be able to find. We're going to say, I want a hoodie that will make me— I want a hoodie that will make me fly. Obviously it's not gonna be able to find that, so let's see what it does. So as you can see now, it said, sorry, it doesn't seem like we have any products that fit, that fit your needs. Perhaps try again with something else you want to look for. I've just noticed there are a few spelling mistakes in there, so apologies for that. But yeah, that's perfect, that's what we wanted to do. Okay, so now you should have a fully functioning product recommendation system for your e-commerce business or your service-based business. And as you can see, it was super quick, super easy to make. It didn't require any external APIs or any softwares or anything like that. So I hope that you've benefited from this video. So I hope you've enjoyed this video, and if you're a business owner that's looking to implement AI into your business in some way, take a look at my website or send me an email, and I'd love to hop on a call with you and we can figure out how AI could improve your business. And of course, if you're new here and made it to the end of the video, make sure you subscribe and comment any videos that you'd like to see, and I'll try to get around to doing them.