Adding AI Chatbots to Websites - FlowiseAI Tutorial #10
Flowise AI (2024) TutorialAging📅 2024-03-07
Integration Flow
┌─────────────────────────────────────────────────────────────────────┐
│ INTEGRATION ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ USER REQUEST │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ │ ────► │ │ ────► │ │ │
│ │ Google │ │ API │ │ Output │ │
│ │ │ ◄──── │ │ ◄──── │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │
│ │ │ │ │
│ └────────────────────────┴───────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────┐ │
│ │ RESULT │ │
│ └───────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Integration Points
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] Adding an AI chatbot to your website could not be any easier than with Flowize AI. This is great for adding customer support chatbots to your websites and online stores. Basically, all you have to do is copy a code snippet and paste it into your website. And this works with pretty much any website platform out there. We can also customize the look and feel of these chatbots. And at the end of this video, I'll show you a very useful tool for creating a unique style for your chatbot. I honestly think you're going to enjoy
[00:31] this video and you will learn a lot. Now, obviously, there are just way too many website platforms to cover in a single video, but the principles that you'll learn in this video can be easily applied to pretty much any web platform out there. So in this video, we'll have a look at adding this chatbot to an HTML website, and we'll then have a look at embedding this chatbot in a Next.js application. And lastly, I'll show you a very useful tool that you can use for free to customize your chatbot.
[01:02] Now, in order to follow along with this video, you do need an instance of Flowize running in the cloud. So if you haven't already, you can watch this video to learn how you can deploy Flowize to the cloud. So to give you an idea of what we'll be doing in this video is we will take a simple little chatbot that we created in Flowize and we'll embed it into a website. And after doing the embedding, you will notice this little chat bubble show up on your website, and you can then use this to interact
[01:33] with your application. So if you have a rag chatbot set up, you can upload your business data to that chatbot, embed that chatbot into your website, and your users will then have a sales assistant which they can communicate with. So let's see how this works. To start off with, I've created a very simple chatbot, but of course you can use any of the more advanced chatflows that we used in the series as well. Now to expose this to the outside world, we can actually click on this API endpoint button,
[02:04] and this will show us several methods for interacting with our chatflow outside of Flowize. And in this video, we'll specifically look at this embed option. Within embed, we can see several options for including this chatbot in an HTML page. And we can also see options for including this in React. And we will use this React option for including our chatbot in a Next.js application. Of course, feel free to jump to the relevant section in the time code below,
[02:37] but I will go through these relatively quickly. And at the end of the video, I will show you a very elegant way of customizing the look and feel of this chatbot. Let's start off by adding this chatbot to an HTML website. So to keep things as simple as possible, we'll work with this index.html file. Don't worry too much about this HTML code though. All we're interested in is to learn how to copy the Flowize embed snippet and then paste it into our website projects. And the same approach will apply whether
[03:09] you're using a Wix website, Squarespace, Shopify, and pretty much anything else. All we need is the ability to copy this code snippet from Flowize, and then paste that into our website. Usually within this body tag, and each of these website providers will provide some sort of solution for pasting JavaScript snippets into the website templates. You simply have to Google it for each of these providers. So back in Flowize, we
[03:39] see this message saying, "Paste this anywhere in the body tag of your HTML file." So let's copy this, then let's paste it anywhere within this body tag, like so. And now if I had to run this file, it will open up this website page, and we can now see this chat bubble show up at the bottom of our screen, and we are indeed able to interact with it. So let me say something like, "Hello," and we are getting a response back from Flowize.
[04:10] And if we switch back to Flowize, and we go to Settings and View Messages, we will be able to see that conversation show up over here with these two messages. And if we had to continue this conversation, like tell me a funny story, if I go back to this screen and let's go back into View Messages, we can see the entire transcript of that conversation. So this way, you can see all the conversations that your visitors are having with your chatbot, and of course, you can
[04:42] use that information to improve your chatbot. So we're not done yet. You might be wondering, how do we change the color scheme of this chatbot? And also, how do we remove this powered by Flowize branding? We're going to look at changing this configuration in a second, and it might look a little bit overwhelming at first, but by the end of this video, I will show you a tool that you can use for free to assist you with creating your own styles. But I still think it's important for you to understand how
[05:13] this config object works. So if we go back to Flowize and we go back to this API button, you will notice this checkbox below the sample code. And if we click this, we can see everything that's up here, but we also get this theme object as well. And we can use this theme object to customize the color schemes, the icons, the position of the chat bubble, the welcome message, and a whole bunch of other things. So if we wanted to change
[05:45] the theme in our website, we can simply add theme just below this API host property colon, and then in curly braces, all those properties. So what we could actually do is just copy everything from theme all the way down to its closing bracket, which is this one over here. Let's copy this. Let's replace theme and these curly braces with everything that we just copied, like so. And if we now go back to our website, we
[06:16] can see that this icon looks a bit different, and we can see some additional changes, like these icons for the chatbot as well as for the user. I'm actually going to move this side by side with the editor. So hopefully this is a bit easier to see. Now, if we wanted to make changes to any of this, we can simply change the properties in this theme object. Like if we wanted to change the welcome message, we can simply replace this code with whatever we want, like hello there.
[06:47] And if I save this and open the chatbot, let's refresh this. And now we can see that the welcome message has changed. We can also change things like the height of this box. Let's change it to something drastic like 350 pixels. We can see the height has changed on this chatbox. It changes back to 700. We can also change things like the font size, colors, avatars, and many more. So this is intimidating as there are plenty of parameters to choose from.
[07:17] But again, I will show you a very useful tool towards the end of this video to generate this theme object to make it as simple as possible to customize this chatbox. Now let's move on to another example. And in this example, I simply have a vanilla Next.js application running. Of course, you're welcome to use React. But on this channel, we tend to use Next.js for plenty of our projects. So that's why I decided on using Next.js in this demo. So let's add a chatbot to this Next.js application.
[07:49] If we go back to Flow-wise and click on this API button, we can see this option for pop-up React. And what we first need to do is to install this dependency. So back in Next.js, I'm going to run npm install flow-wise-embed-react. I'm then going to start up my development server again, refresh this, and everything is still working. So let's add Flow-wise to this project. With InSource, I'm going to create a new folder called
[08:19] components slash chatbot.jsx. I'm then going to create a React functional component called chatbot. And within this component, we simply need to do a few things. First, we need to import bubble chat from Flow-wise-embed-react. And we can import that at the top of this code. I'm just going to close this window to make it a bit more readable. And this component also needs to be a client-side component. So at the top of this code, let's call use client.
[08:50] This is not necessary if you're only using React. Now, I'll just simply remove this div. And now, I'll return bubble chat as a self-closing component. And bubble chat takes in two properties. And we can actually simply copy these from Flow-wise. And those properties are the chat flow ID as well as the API host. So let's copy this. Let's paste it. And that is all we have to do for this chatbot component. Now, to add this to every page on our project, we can simply
[09:20] go back to our files. Let's go to app. Let's go to layout. And within layout, let's import chatbot from components slash chatbot. And now, all we have to do is return chatbot within this body tag over here. So I'll simply add chatbot and save this. So after saving this, we can see this chat bubble showing up. And when we click on it, we can interact with our chatbot. So let's send something like hello. And we are getting a response back.
[09:52] Awesome. We can also customize the look and feel of this chatbot, just like we did before. By going back to Flow-wise, we can click on Show Embed Chat Config. Then we can copy this theme parameter and all of its values up until these closing braces. We can add this as a property to the bubble chat. And now, on our website, we can see that this icon has changed. We have these little avatars for the chatbot and for the user. And we're now able to make changes to this. For instance, let's change this
[10:22] background color to black. And we can see those changes reflected over here. So now, I want to show you a tool that you can use to easily customize your chat windows so that you don't have to go and guess these values. So I've created this application specifically for you guys as working with the config object is not that straightforward. And I think this will make the changes a bit more visual. So how this application works is you can click on this chat bubble to see the default styles for this chat window.
[10:53] You can paste in your chat flow ID and API host details and then interact with this chat window. In fact, let's do that now. So from this pop-up, we can get the chat flow ID and API host over here. So let's copy the chat flow ID. Let's paste it into this field. And let's do the same for the API host. Let's copy this. Let's paste it into this field. Now, you should be able to interact with your specific chatbot. I'll test this out by sending hello. And I do receive a response back.
[11:26] Now, we can use the attributes on the screen to make changes to this pop-up. So let's say we want to change the color of the button. You can simply click on this color selector. And as I'm making changes, you will see those changes reflected in real time on the screen. So let's say I want to go with a light blue color like this. You can also click on this little button over here. And this will allow you to paste in a x value instead, if that's what you prefer. You can also change the position of the button. So by changing this, you will notice that
[11:56] the button will move from the right side of the screen over to the left. And we can also use this value to change the position from the bottom. We can also change the size of the button from medium to say large. I'll just keep it on medium. You can also change the icon of the URL by providing a link to the icon that you want. We can also make changes to the chat window. So let's say we want to change this color to something extreme, like a dark color. And we can also adjust the height of the window at this stage.
[12:28] So let's make it something like this. We can also change the width. And we can also change the font size. So by changing this, you will see the font size changing as well. Another question I get all the time is how to remove this power by branding. So what you could do is simply go to this power by text color. And by changing this color to something like white, the branding will disappear. I think that's the easiest way to change this. I do have another video on my channel showing you a technical
[12:59] way of removing that branding entirely. But that is quite a complex process to go through. And sometimes the easiest solution is just to change the color of the branding. We can also change the background color for the bot message, the text color. Let's make it something like blue. We can also change the avatar, which is this little icon every year. Or you can simply check this box to remove the avatar entirely. And we can do the same thing for the user message. And we can also change the settings for the text input down here. Now, as we're making changes to this,
[13:30] this JSON code every year is automatically adjusted as well. So once you're done, all you have to do is click on this copy button. This will copy this code to your clipboard. I'll just click on OK over here. And if we flip back to our code, we can simply replace this object within the theme all the way to over here and then paste in everything that we just copied. And after saving this, you will now be left with a chat box containing all the settings that you just created.
[14:01] So if you do find this little application helpful and you do want to support me or thank me, then please consider buying me a coffee by clicking on this Buy me a coffee button. If you like this video, then you might be interested in this other video where we added a customer support agent to a WordPress website. Also, hit the like button, share this video, and please consider subscribing to my channel.