Introduction: Embedding a Website Chatbot
Up to now we have looked at building several types of AI chatbots using Flowise, but I want to change gears a bit by looking at our first real-world example for implementing Flowise. Here we have a website for a florist. In this example, we are going to add a customer service chatbot to their website. This chatbot is trained on the business's information and can assist visitors with questions related to the business's products, operating hours, and other information about the business.
This chatbot can be accessed by clicking on a chat bubble found at the bottom right of the website. And we can now ask questions related to the business. For instance, this awesome chatbot, what do you sell? And after a second, we will get a response back from the bot. Let's try a few more questions, like what are your operating hours? And the bot will respond with the data that it has been trained on. Let's also ask, who are the owners? And again, we get a response that is specific to this business.
Take note that the chat window follows the same color scheme as the rest of the website, and I will show you how to customize the design of this pop-up. These customer support bots can greatly reduce the amount of queries sent to the client and increase sales by making product recommendations. Let's now have a look at how we can implement Flowise chatbots in web applications. Also take note that you do not need to be a developer to follow along, and this video will benefit anyone interested in learning Flowise.
Prerequisites: OpenAI & Pinecone Setup
This chatbot will be based on the document chatbot video from this series, so please ensure to check out that video if you get stuck during the creation of the Flowise chatbot itself. Let's talk about the prerequisites.
Go to platform.openai.com and create an API key. We will use Pinecone as our vector database, so log on to Pinecone, click on 'Create Index'. Give the index a name; I will give it the same name as the business, which was 'flowers-r-us'. And for the dimensions, enter one five three six. For the pod type, select S1, and then click on 'Create Index'.
Go ahead and note down the index's name, then go to API Keys. Also make a note of the environment as well as the API key value. You can get this by clicking on 'Copy key value'.
Building the Data Upsert Flow
We can now go ahead and create our Flowise chat flows. In a nutshell, we will create two chat flows. One will be responsible for uploading the business data to Pinecone. The second chat flow will be the chatbot, which we will integrate into the website. Let's go ahead and create our upsert chatbot by clicking 'Add New'. Let's save this project, and let's give it a name. I will call it 'Flowers R Us Upsert', and let's save this.
Under nodes, go to chains and select the retrieval QA chain and add it to the canvas. Let's add our language model by again clicking on nodes, chat models. Let's grab the ChatOpenAI model and add it to the canvas and let's connect the model to the chain. Let's also add our OpenAI API key. Let's leave the model as GPT 3.5 turbo and let's set the temperature to 0.5.
Let's add our Pinecone vector store by clicking on nodes, then under Vector Stores we can select the Pinecone Upsert Document node and let's connect this to our chain as well. We can now go ahead and add our Pinecone API key, the Pinecone environment, as well as the Pinecone index name. For the document loader, we will be using the text loader, so under nodes go to document loaders and let's select the text file loader and add that to the canvas, and let's connect that to the Pinecone node.
Let's also add a text splitter. So under nodes go to text splitters, and let's add the recursive character text splitter node, and we'll connect it to our text document loader. For the chunk size, I'll change it to 500 and for the chunk overlap I'll change it to 100. These values are completely up to you. Lastly, let's add our embedding node by going to nodes, embeddings, and we'll use the OpenAI embeddings node, and let's connect this to the Pinecone document node. And for this node, we also need to add our OpenAI API key like so. We can now save our chat flow.
Uploading & Verifying Training Data
Now for the file for our training data. I asked ChatGPT to generate business information about our fictional florist business. This file includes details like the business history and owner details, as well as the location information like the address. We also have a list of frequently asked questions. This is perfect for training our chatbot. If you want, you can go ahead and ask ChatGPT to do the same for you, or if you want to use the same file that I am using, you can download this file from a link in the description of this video.
Now that we have our training file, we can upload it by clicking on the upload file button on the text file node. After selecting the file, save the project, then click on 'Chat'. It really doesn't matter what we say here; we simply want this flow to execute so that the data in the text file is uploaded to Pinecone. So I'll simply say 'hello'. This will take a few seconds to execute, and after we get a response, we can confirm that the data was uploaded by going back to Pinecone. We can then click on the index, and we can now see that 13 vectors or rows have been added to the database. Whenever we make changes to the training file, we can simply apply the new file and execute this chat flow again.
Building the Q&A Chatbot Flow
Let's now go ahead and create a chatbot which will be responsible for answering visitors' questions. Let's go back to the Flowise dashboard. Let's click on 'Add New'. Let's save this and call it 'Flowers R Us chatbot', and let's save this. This chat flow is very simple to set up.
Let's click on 'Add Nodes', then under 'Chains' go to Retrieval QA Chain. Let's add our model by clicking on nodes. Let's add a chat model. We'll add the ChatOpenAI node and let's connect that to our chain. And let's also add our API key. Let's leave the model as GPT 3.5 turbo and let's change the temperature to 0.7. Because this model is interacting with visitors, we want to allow it to be slightly creative.
Let's also add our Vector store node by going to Vector Stores, and this time we'll use the Pinecone Load Existing Index node and let's connect this to the chain as well. Then let's add our Pinecone API key as well as the Pinecone environment and the Pinecone index name. Lastly, let's add the embedding by going to nodes, embeddings, and let's grab the OpenAI embeddings node and let's connect that to the Pinecone node. And let's add our OpenAI API key. And let's save this chat flow.
And that is it. We can now test out our chatbot by clicking on 'Chat' and let's ask it a question related to the business, like who are the owners? And we are getting a response saying the owners are Lisa and Michael Carter. And if we compare that to our training data, we can see that Lisa and Michael Carter are indeed the owners of this business.
Setting Up the Local Web Project
Now that we have our chatbot, let's have a look at embedding this chatbot in a website. If you want to follow along, you can download the website files as well as the training data that I used from this GitHub repository. You can find the link in the description of this video. Open up this repository, then click on code, and then click on download zip. Go ahead and extract the contents of that zip file to a folder on your drive.
This folder contains the following files. You will find a public folder that contains a few images. And then the index file is the home page of the website. style.css contains the styling of the website. And then lastly, the training QA text file contains the training data for this business. Please don't worry if you are not familiar with coding HTML and CSS, as that is not relevant for this video. But in order to add Flowise to the website, we do need to make one or two small changes to this index file.
In order to edit this index file, I recommend using a code editor like VS Code. You can download VS Code by going to visualstudio.com and then clicking on this button to download VS Code for your operating system. Go ahead and install VS Code, and after installing, open VS Code and then click on 'File', 'Open Folder', and then select a folder that contains the project files. You should now see the content of that folder. We can edit the index.html file by double-clicking on it, and you should now see the HTML code for this home page. In order to run this website in the browser, we need to install an extension in VS Code. On the left-hand side, go to extensions, then search for an extension called Live Server and go ahead and click on install. After the extension has installed, you can start a development server by right-clicking on index.html. You can then click on 'Open with Live Server' and this will automatically open up the website in your browser, and it should look something like this.
Embedding the Chatbot with the API
Now let's have a look at how we can embed Flowise into this website. Let's go back to Flowise. Click on this button over here called 'API Endpoint'. You should see a pop-up similar to this. You now have several options for integrating this chatbot into your applications. For web pages, the easiest solution is to click on 'Embed'. But if you do want to call this chat flow from Python or JavaScript applications, you can see the code for that by clicking on Python or JavaScript, and curl will also give you the endpoint that you can call from your application.
But these three tabs are not in scope for this video as this is more technical and I will cover it in a future video. Let's go back to 'Embed'. All we have to do is follow this instruction here: paste this piece of code anywhere in the body tag of your HTML file. So let's go ahead and copy this code like so, or simply click on this copy button over here, then open up VS Code and within this body tag, add a new line and then paste in the code that we just copied.
On the website, we can now see this chat button showing up on the bottom right of the website, and we can now test out the integration with our Flowise chatbot. Let's send a message like, 'Hello, do you sell roses?' And yes, they do. 'Which days are you open?' We are open Monday through Friday. Let's try one more question: 'Who are the owners?' And we are getting the response back.
Let's talk about styling this pop-up. Ideally, we want the style of this pop-up to match the branding of the business, and as we can see, this page contains a lot of pink text. So let's see how we can configure this pop-up to look the way we want it to.
But before we continue, I do want to make you aware that I am starting my own AI automation business. So if you or your business needs assistance with automating any of your business processes using technologies like Flowise, then please go over to cognitive.ai and let's get in touch.
So in order to see all of the attributes that we can change, all we have to do is click on 'Show embed chat config'. And this will now show you a more complete version of the embedding. And the object that we are interested in is 'theme'. Let's say that we want to change the color of this chat button. All we have to do is add this theme object to the code. So let's go back to VS Code. Then just below API host, add a new line, then type theme: { }. And how this works is we can now specify the attributes that we want to override. And I would like to override this button attribute, and within button, the background color attribute. So within theme, let's type in button: { }. Then within button, we want this background color attribute and we can add it like so.
Let's now go ahead and change this color value. In the description of this video, you will find the link to the Tailwind CSS website. The colors page on Tailwind gives you a broad range of colors, including their hash values. So let's say we want to change the bubble to this pinkish color. All we have to do is click on the color. That will automatically copy the hash value and we can then replace this value in the editor with the value that we copied. Let's save this and let's go back to the website, and as you can see, the color of the button has changed.
Let's also change the color of this send arrow. In the config, we can look for the attribute that contains the color of that arrow. So the object we want to change is within the chat window object. Within chat window, we want text input, and within text input, we want to change the color of the send button. So let's do that. Below the button object, within the theme object, let's add chatWindow: {}. Within chat window, we want textInput, like so. And within text input, we want to change the sendButtonColor, like so. Let's make this the same pinkish color, like so, and let's save this. Then going back to the website, we can click on chat, and we can now see that the send arrow is pink.
We also need to change this blue background of the user message. Let's have a look at this. We can see this 'userMessage' object within the 'chatWindow' object, so let's add this. I'll actually add it above the chat input object, like so. And we do need to add a comma at the end. Within this object, let's grab the background color property. Let's paste it in. Let's also change this to a pinkish color, like so. Now back in the website, let's click on chat, send a message like 'hello', and we can see that the background color of the user message has changed.
You can use the same approach to customize pretty much any aspect of the chat window, including the icons that are used. I hope you found this video useful. If you like my content, please subscribe to my channel and please share this video. I will see you in the next one. Bye bye.
