Flowise AI Tutorial #12 - How To REMOVE the Flowise Branding from the Chat Window

so you've created the perfect customer chatbot and added it to your website but when opening the chat window you notice this message powered by flowwise there are many reasons why you might want to remove or change this Watermark and in this video I will show you how this is the process that the flowwise team recommends as well in order to follow along you will need the following you need to install git for your operating system and you will also need to have a GitHub account you will also need a code editor like vs code I will leave a link to all of these in the description of this video the first thing we need to do is to go over to this page on GitHub in order to change the chatbots interface we need to create a copy of this repository in order to create a copy click on Fork then give your repository a name and then scroll down and click on create Fork we now have a copy of this flowwise chat embed in our own personal namespace we now need to download this fault repository to our own machines to do this click on code then copy this URL then create a new folder on your machine and open the command prompt on Windows we can simply click on the address bar then type in CMD and press enter in the command prompt enter git clone and then paste in that URL and press enter and this will now create a new folder on your machine now go ahead and open that folder with your code editor like vs code and it should be presented with a screen like this before we make any changes we need to run two commands open the integrated terminal and run the following command yarn install this will set up the project dependencies and will allow us to rebuild the distribution files after making a change it is the false in this District attribution folder that is served to our website to display the chatbot after installation is complete we need to run yarn bold this will ensure that the distribution files are up to date now we can go ahead and remove that branding go to Source within Source go to components and within components there are two important files batch and Bot batch contains the text of that Watermark so if you simply wanted to change the values instead of removing it all together you can open badge and then scroll down and in this fall you will see the text powered by and then flowwise which is wrapped in a link so if you want you can change this text and then for the link you can change the text over here as well as the link that this should navigate to but for this demo we will remove The Branding all together so let's close by badge and let's open bot then to remove the badge we can simply scroll down in this file until we get to this batch component so if you want you can simply delete this line completely and save this file alternatively we can simply comment out this line and that will remove the batch as well now that we've made our change we need to rebolt the distribution files by going to the terminal and then executing yarn bold and this will pick up our latest change and then included in the distribution folder after Builders executed we need to push our changes back to GitHub you're more than welcome to push your changes using the terminal but because I'm using vs code I'll simply use the source control tab I will write a description for this change like remove branding I will then click on Commit and I will then click on sync changes if this is your first time using Git You might be prompted to enter your GitHub username and password if we go back to our fourth repo we can see that the remove branding change has been pushed to this repository now we have a version of the flowwise chat pop-up which does not include The Branding all we have to do now is to update the code snippet in our website if you would like to learn how to embed flow voice chatbots into your websites then please check out my video every year for this demo we'll continue working on the flowers website that we looked at in the previous tutorial if I open the chat bubble we can test out that the chatbot is working by typing something like hello and we do get a response and at the moment we can see that powered by flow wise branding if we have a look at the code snippet for this web page we can see this section over here especially this chatbot import which references this URL this URL is pointing to the default slow voice embed logic so we will change this to reference our implementation instead what we need to do here is replace npm with GH for GitHub and then we will replace this flowwise embed with something else and that something else is if you go back to your GitHub repo you can simply copy everything from your username slash and then the name of your fort repository and then back in the code we can simply replace this part with the username slash flowwise chat embed and if I save this and go back to my website I'll actually give this a refresh I can still see the chat pop-up showing up over here and that means that the link to the new URL is working however when we click on this we can still see The Branding and this is something that a lot of you seem to be struggling with the reason we are still seeing The Branding Although our repo does not include The Branding logic is because of how the CDN caches these changes if we look at our logic we are referencing a CDN which has now buffered our code so when we initially created our Fork the creation of this repo created a version of this code in the CDN but it seems that when we make changes to this code the CDN is not updated or it is delayed by days so what we can do to ensure that we always fetch the latest version of this guide from the CDN is to add the following at the end of the repository name at latest let's save this and let's go back to our website I'll also go ahead and refresh this page just to make sure that everything is up to date and let's now go ahead and click on chat and as you can see The Branding is gone and the chatbot is still working great stuff and now you know how to remove The flowwise Branding from your own chat Bots if you like my content then please consider subscribing to my channel and like and share this video I'll see you in the next one bye bye

Channel: Leon van Zyl

Views: 7,919

Keywords: langchain, langchain tutorial, flowise ai, flowise ai tutorial, flowise tutorial, flowise setup, flowise install, artificial intelligence, ai, llm, openai, gpt4, flowise, chatbot, artificial intelligence course, langchain tools, langchain agents, langchain memory, ai chatbot, chatbot tutorial, chat with data, ai for business, chatgpt for company data, Flowise API tutorial, flowise custom tools, openai functions, How to remove Flowise branding, Remove flowise badge, fork flowise

Id: 4MSxi6-RYCI

Length: 7min 16sec (436 seconds)

Published: Sun Sep 17 2023