How to Build Custom AI Chatbots 🔥(No Code)

Summary

This tutorial offers a comprehensive guide to creating and deploying AI chatbots using the Flowwise AI platform. It starts with the installation process, including setting up Node.js and Flowwise AI on a local machine. The video then demonstrates building a chatbot with a custom knowledge base, utilizing a drag-and-drop interface. It covers the use of templates, configuring the Open AI API, and testing the chatbot. The tutorial also explains how to deploy the chatbot to the cloud using GitHub and Render.com for a persistent online presence. Finally, it shows how to embed the chatbot into a website, providing a hands-on approach for non-coders to create interactive AI chatbot experiences.

Takeaways

• 🌟 The tutorial introduces Flowwise AI, a drag-and-drop visual AI chatbot builder that allows users to create unique chatbot experiences.
• 🛠️ The tool is entirely free to install and use, as demonstrated through the provided installation instructions.
• 💻 The first step in the installation process is downloading Node.js from nodejs.org, which is essential for non-coders and coders alike.
• 🔍 The tutorial provides a step-by-step guide on how to access and use Flowwise AI, even for those without coding experience.
• 📝 The process involves using the command prompt on a computer to install and run Flowwise AI locally on port 3000.
• 🔗 Flowwise AI offers a user-friendly interface with a dashboard for adding chat flows and deploying chatbots to websites or web apps.
• 📚 The platform includes a marketplace with numerous templates for various use cases to help build complex chatbot models and flows.
• 📑 The tutorial focuses on creating a simple conversation chain using a document module to build a website FAQ-style chatbot.
• 🔑 To function, the chatbot requires an OpenAI API key, which can be obtained from the OpenAI website.
• 🚀 The video also covers deploying the chatbot to the cloud using GitHub and a hosting service like Render.com for wider accessibility.
• 🔒 For security, the tutorial explains how to set up a username and password to protect the chatbot instance in the cloud.

Q & A

What is the purpose of the tutorial in the video?

The tutorial aims to guide viewers on how to create and deploy AI chatbots using a drag and drop visual AI chatbot builder called Flowwise AI.

Is Flowwise AI a free tool?

Yes, Flowwise AI is entirely free to use for creating chatbots.

What is the first step in installing Flowwise AI?

The first step is to download Node.js from nodejs.org.

How do non-coders access and use Flowwise AI?

Non-coders can access Flowwise AI by using the command prompt on their computer to install and run the software.

What does 'npm install -g flowwise' command do in the installation process?

This command installs the Flowwise AI software onto the user's computer.

How can users access the locally installed Flowwise AI?

Users can access Flowwise AI locally by going to localhost:3000 in their web browser.

What is the main dashboard in Flowwise AI used for?

The main dashboard is used to add and manage chat flows, which are individual chatbots with specific functionalities.

What is a chat flow in the context of Flowwise AI?

A chat flow represents a specific chatbot with a certain functionality or ability within Flowwise AI.

How can users get their chatbot online for others to use?

Users can deploy their chatbot to the cloud using services like Render and then embed it into their website or web app.

What is the importance of using 'gpt-3.5-turbo' instead of 'gpt-4' in the tutorial?

Using 'gpt-3.5-turbo' is recommended for testing and playing around as it is cheaper than 'gpt-4', thus avoiding high costs.

How does the tutorial help in building a customer service type chatbot for a website?

The tutorial guides users through building a chatbot that can answer questions about a website's services by using a text document as its knowledge base.

What is GitHub and how is it used in the deployment process?

GitHub is a code repository where developers store and share code. It is used to create a copy of the Flowwise AI application for deployment.

What is Render and how does it relate to deploying Flowwise AI?

Render is an app for hosting web services. It is used to deploy the Flowwise AI application online, making it accessible on the internet.

Why is persistence important when deploying Flowwise AI on Render?

Persistence ensures that the data and chat flows created in the Flowwise AI application are saved and do not get lost when the app is restarted or redeployed.

How can users protect their Flowwise AI cloud instance from unauthorized access?

Users can set up a username and password within the Render environment to protect their Flowwise AI cloud instance from unauthorized access.

How can the chat flow created locally be uploaded to the cloud version of Flowwise AI?

The chat flow can be exported from the local environment and then imported into the cloud version of Flowwise AI through the 'add new' option.

What is the final step to integrate the deployed chatbot into a website?

The final step is to copy the provided HTML snippet from the cloud-hosted version of Flowwise AI and embed it into the website's code.

Outlines

00:00

🤖 Introduction to Flowwise AI Chatbot Builder

This paragraph introduces the tutorial's focus on Flowwise AI, a drag and drop visual AI chatbot builder. The speaker will guide viewers on creating unique AI chatbot experiences, installing the free tool, and deploying it on personal websites or web projects. The tutorial aims to reduce the learning curve for non-coders by providing step-by-step instructions on setting up Flowwise AI, starting with downloading Node.js and using the command prompt to install the necessary software. The goal is to empower users to build and deploy chatbots without coding knowledge.

05:00

📚 Building a Knowledge Base AI Chatbot

The second paragraph delves into the process of building a custom knowledge base AI-powered chatbot using Flowwise AI's drag and drop interface. The speaker discusses the workflow, starting with accessing the marketplace for templates and selecting a simple conversation chain. The template consists of a language model, memory module for context, and a document loader for additional data. The tutorial then moves on to configuring the OpenAI API key and testing the chatbot within the workspace. The aim is to create a chatbot that can answer user queries by referencing a provided document, such as a website's FAQ.

10:01

🚀 Deploying the Chatbot to a Web Hosted Platform

In this paragraph, the focus shifts to deploying the locally built chatbot to a web-hosted platform. The speaker outlines the process of setting up a GitHub account to store and share code, and then using Render.com to deploy the Flowwise AI application online. The tutorial covers creating a GitHub fork of Flowwise, connecting it to Render, and configuring the web service with the appropriate settings for deployment. The speaker emphasizes the importance of persistence, opting for a paid plan to ensure that the chatbot's data and progress are saved across sessions.

15:01

🔐 Ensuring Security and Persistence in the Cloud

The fourth paragraph addresses the importance of security and data persistence when deploying the chatbot in the cloud. The speaker explains how to set up persistence by adding a disk and configuring environment variables in Render. This ensures that the chat flows and user data are saved and retained even when not actively using the application. Additionally, the tutorial covers how to protect the cloud instance by setting up a username and password, preventing unauthorized access to the chatbot's workings.

20:03

🛠️ Embedding the Chatbot into a Live Web Page

The final paragraph concludes the tutorial by demonstrating how to embed the deployed chatbot into a live web page. The speaker shows how to use the embed pop-up HTML snippet provided by Flowwise AI to integrate the chatbot into a website. The process involves copying the HTML code and pasting it into a custom code block within the website's content management system. The result is a functional chatbot that can interact with website visitors, providing information and assistance based on the chat flows created during the tutorial.

Keywords

💡Drag and Drop

Drag and drop is a user interface concept where users can move items by clicking, holding, dragging, and releasing them. In the context of the video, it refers to the ease of use of the AI chatbot builder, allowing users to create chatbot experiences without needing to write code. The script mentions building a chatbot using a 'drag and drop visual AI chatbot builder', emphasizing the simplicity and accessibility of the process.

💡AI Chatbot

An AI chatbot is an artificial intelligence-powered conversational agent designed to interact with humans through text or voice. The video's main theme revolves around creating unique AI chatbot experiences for users. The script discusses how to install and deploy an AI chatbot using 'flowwise AI', which is a tool for building these chatbots.

💡Flowwise AI

Flowwise AI is the specific chatbot builder tool featured in the video. It is used to create and deploy AI chatbots. The script provides a tutorial on how to use Flowwise AI, from installation to embedding the chatbot into websites, showcasing its capabilities and ease of use.

💡Node.js

Node.js is a JavaScript runtime that allows developers to run JavaScript on the server side. In the script, Node.js is mentioned as the first step in the installation process for the Flowwise AI tool, indicating that it is a prerequisite for setting up the chatbot builder environment.

💡Command Prompt

The command prompt is a command-line interface on Windows systems that allows users to interact with the operating system and execute commands. The video script instructs viewers on using the command prompt to install necessary software like 'npm install -g flowwise' for setting up the chatbot builder.

💡NPM

NPM stands for Node Package Manager, a tool that comes with Node.js and allows users to install and manage packages. The script mentions installing Flowwise AI via NPM with the command 'npm install -g flowwise', which is a standard way of adding new functionalities to Node.js applications.

💡Knowledge Base

A knowledge base is a collection of information or data that is used to support decision-making and provide answers to queries. In the context of the video, building a custom knowledge base AI-powered chatbot is discussed, which means creating a chatbot that can access and use information from a specific knowledge base to answer user questions.

💡Deployment

Deployment refers to the process of making a software application or service available for use. The video script covers how to deploy the AI chatbot created with Flowwise AI onto the cloud, making it accessible beyond the local machine and embedding it into websites.

💡GitHub

GitHub is a web-based platform used for version control and collaboration that allows developers to manage and host their code. The script mentions GitHub as a necessary step for deploying the chatbot, where users can fork the Flowwise AI repository to their own GitHub account.

💡Persistence

Persistence in the context of software refers to the ability of an application to retain its data or state over time. The video discusses the importance of setting up persistence for the Flowwise AI application on render.com to ensure that the chat flows and data are saved and do not get lost when the application is restarted.

💡Render.com

Render.com is a cloud computing platform that offers hosting services for web applications. The script describes using Render.com to host the Flowwise AI application, allowing for online access and deployment of the chatbot, and setting up persistence and security measures.

Highlights

Introduction to Flowwise AI, a drag and drop visual AI chatbot builder.

How to create unique AI chatbot experiences for users.

Installation of Flowwise AI tool, which is entirely free.

Deployment and embedding of the chatbot into websites and web projects.

Accessing the Flowwise AI website for installation instructions.

Downloading Node.js as the first step in the installation process.

Instructions for non-coders on how to access and use Flowwise AI.

Using the command prompt to install npm and Flowwise AI.

Running the software on port 3000 to access it through a web browser.

Building a custom knowledge base AI-powered chatbot step by step.

Overview of the Flowwise AI interface and its main dashboard.

Using marketplace templates to build complex chatbot models and flows.

Creating a simple conversation chain with a document and language model.

Using Airtable to feed data into the large language model.

Building a large knowledge base around a specific topic.

Importing chat flows from the desktop version to the cloud version.

Deploying the chatbot to a web-hosted platform using GitHub and Render.

Ensuring persistence of data in the cloud instance of Flowwise AI.

Securing the cloud instance with a username and password.

Embedding the chatbot into a webpage using the provided HTML snippet.

Transcripts

in this tutorial I'm going to show you

everything you need to know about this

amazing drag and drop visual AI chatbot

Builder I'm going to show you how you

can create really unique AI chatbot

experiences for your users how to

install this tool which is entirely free

and most importantly how to get it

deployed and embedded into your own

websites and Web projects

so the two we're going to be using is

called flowwise AI if you come over to

flowwiseai.com and there's a link in the

description of the video below you'll be

able to find the installation

instructions but luckily I'm going to go

through that for you quickly now in the

next minute or so so that you'll be up

set up and ready to go and cut the

learning curve in half so if you just

come over to nodejs.org and again the

link will be in description of the video

and download node.js that's your first

step in this installation process if

you're not a coder and if you're a no

coder like myself you probably will

never have installed node.js if you're a

coder you probably already have this

installed if we now come back to

flowwise AI it gives you very brief

instructions as to how to get started

for me as a no coder I didn't find this

overly useful because I didn't know even

where to go to put these these Snippets

in but luckily I'm here to give a little

bit more information for no coders out

there into how to actually access this

really powerful tool the way you need to

go is on your computer you need to find

the command prompt and where you find

that is by going into your search bar

and searching for command prompt and

we'll get out the command prompt you'll

open that up

and this is where you basically follow

these instructions so I'm gonna install

npm

oops npm install Dash G flowwise now

I've already installed limo system but

what you do is when you type that in you

simply hit enter and you're probably

gonna need to wait a few minutes there's

gonna be a big load of text that flows

down through this the screen here and

it's just basically installing the

flowwise software onto your computer and

when that process is finished it will

let you know that it's finished and then

all you need to do is hit npx slowwise

start and once you hit that what this is

doing there is is running the software

that you've just installed and it is

um

it's going to run it on on a port 3000

essentially and all that means is that

you can access it through your web

browser by simply going to localhost or

colon 3000 and going there and now we've

got flowwise running locally on our

computer this is our own private instant

that is unique to your computer or your

machine that you've installed on and

you're now able to use this software

completely free of charge to build as

many chat Bots as you like and in the

next part of this video that's exactly

what we're going to do we're going to

show you step by step how to build your

very own custom knowledge base AI

powered chatbot and we're going to go

through this workflow here and show you

how to use the glowwise drag and drop

user interface get this all set up and

running and make sure you stick around

to the end because we're going to show

you when you have this build out how you

can then take it from your private

machine and push it into the cloud so

that you can make a version of it

available not just for your own private

use but so that you can make it

available for people on your website

site or inside of a web app that you

might be building or anywhere online

that you might want to use as opposed to

just being local and personal to your

use so first a brief overview of the

flowers AI interface this is your main

dashboard you can add chat flows here

each of these boxes represent an

individual chat flow and a chat flow is

essentially a specific chat bot with a

certain functionality or a certain

ability that you any of these chatbots

you can use personally on your local

machine and you can interact with the

chatbot as you have built it and you can

interact with it in real time as you're

building it and then also you can use

any of these chatbots to deploy them and

to have them embedded on your own web

page or inside your own web app and

again I'll show you how to do that later

on in the video where I'd normally start

is come into marketplaces because it's

got a huge amount of template in here

and I show the sample of the various use

cases that you can use this tool and to

help you build really complex chatbot

models and flows today we're just going

to start with this simple conversation

chain so this lets us preview the

template in this particular template

there's just three components so each

card here represents essentially a

module or a component this chain

component is really what brings it all

together and the chain is basically you

can have various different types of

chains this one is a conversational

chain and it's basically allowing us to

attach a language model or an open AI

language model in this in this context

but you can use other language models

and we'll show you what you have on

offer inside of flowwise when we get

into it and it allows you to attach a

memory in this case it's just using the

buffer memory module and the buffer

memory is basically whereby it just

stores the chat history so that means

usually it would save sort of the last

five messages in the conversation and

send that into the language model every

single time that a user puts in a

message so that it has the context of

the conversation and it can respond as

if it is having a conversation with you

and then this one all also allows you to

attach in a document and so we'll use

that today in our use case we're going

to use we're going to use this to build

essentially a website fac type Chopper

so that you can install it on your

website and you can go to your website

instead of reading your entire website

they can just ask questions directly to

your chatbot and it's a pretty good

starter use case we'll then in future

videos show more complex builds inside

of flowwise and would love to hear if

you've got any particular use cases or

any particular things that you're trying

to build a chatbot around one thing that

I'd love to show next is how to actually

chat with your airtable base for example

and how to use an airtable component in

here to basically feed data from

airtable into your large language model

as and when needed so it pulls only the

relevant bits based on the user's prompt

and other use case will be building up a

large data store a large knowledge base

around a particular topic and it could

be anything from sort of help to

legislation into anything where there's

just Reams and reams of information that

you don't necessarily want to feed the

entirety of it in a single document like

in this use case where you want to have

a system so that you can query that data

use open AI features to basically find

the relevant bits of information inside

of your knowledge base and then feed

that into your into your language model

at the point of the prompt being asked

anyway going on a tangent next step is

to click this use template button okay

so that now creates a working version of

the template into the workspace here

that we can now configure for the

purposes of building our chatbot and

then so what we'll do first is we will

bring in the document module because

it's the only one that's not yet

connected and it'll give us an

opportunity to show you just the menu

over here and the different options that

you have we'll then configure the open

AI API key and I'll show you where to

get that and we'll then show you how to

troubleshoot and to actually test the

chatbot in the workspace environment

here and then after that we'll move on

to the deployment and actually getting

it into a live web page and getting it

functioning so if we come over here

we're going to look for a document

loader component when we click this plus

it shows you all of the different types

of categories of components that you can

have so you can see that agents those

chains there's chat models there's

document loaders and that's where we're

going to need to go and you know and

these are all of the different

components that can be used in a chatbot

build and as you can imagine they can

get relatively complex over time in this

one we're just going to have four

modules so if we come down to document

loaders and I'm gonna try and find just

the text file loader just as sort of a

very basic working example here where

every time you see one of these cards

it's gonna have something down in the

bottom right hand corner and if it's

blue it means that it's available to

attach to something else and so you'll

see here if we just zoom in there

and this one is looking to be attached

to a document node up here so we're

going to actually just click and drag

that up and connect it to our chain so

at the moment now our chain has our

language model the memory and then the

document down here and what we're going

to do is we're going to go to my home

page here and we're actually just going

to copy all of this and put it into a

text file so I've opened up notepad here

and I'm just going to paste it in there

it doesn't really matter about

formatting at all and I'm just going to

save this as a txt file so I've saved

the file as no code homepage.txt and I

can now close out of it and I've got to

come back into the flowwise workspace

here and if I click upload file I found

the file on my desktop and I clicked it

and it's now uploaded here and the only

thing that now won't let this work is

that I don't yet have the open AI API

key so I'm going to come over to open AI

you're going to need to log in here I'm

going to go into the API selection

and then if you come over here to the

top right and find your profile it's

going to have view API Keys here and I'm

going to come in here and I'm going to

create a new secret key and I'll just

call this the flowwise five create

secret key I'm going to copy that and

I'm going to come back into flowwise

here and I'm going to drop that in there

I'm not going to change any of the

settings here I'm definitely going to

keep it on 3.5 turbo because it's far

far cheaper than the gbt4 and when

you're just playing around and testing

with things you definitely don't want to

be using gbt4 because it will start to

to rack up costs whereas gbt 3.5 turbo

you can feed a huge amount of prompting

into it and only incur sort of sense or

you know not not too much of a spend so

you can you can play at it and then be

be sure that you won't be breaking the

bank and so now that we've done all of

that your Chapel won't work yet over

here until you've actually clicked save

so I'm going to click save I'm actually

asking me for the name of the chat flow

and I'm just going to call it simple

a conversation with text Doc and just

same as that

and it's now saved so now you can test

as you're building your chat bot okay so

we're gonna ask it a question that I

suppose proves that it's using the

information that we just drew from the

web page so I'm gonna ask it something

that a user to the web page might ask

like what services do you offer

and see what it comes up with training

consultancy one-to-one online community

so that looks pretty spot on if we go to

the website we have this section here we

offer training wonderful consultancy and

we're running online community so yeah

that seems to be doing a really good job

there and um you know this is a really

effective and simple way to build a

customer service type chatbot for your

website

so we'll move on to the deployment now

of this chatbot of out of our sort of

local environment and onto a web hosted

platform and then from there we're going

to show you how to take anything that

you've built from the local environment

and how to put it into your now web

hosted environment so that you're able

to utilize whatever scenarios or models

that you build locally on the internet

essentially or anywhere that you want to

use it because we can't use it directly

from our local machine because there's

no server there's no API access to this

local instance Overton that's why we

need to deploy and use a web instance so

to deploy the app you're going to need

to come and set up a GitHub account

GitHub is a repository essentially

whereby coders come in here and they

store all of their code and they allow

other coders and developers to share the

code we won't need to know anything more

about GitHub other than how to set up

and sign up an account on it and then

how to take the application that we want

to use in the next step so if you come

here click sign up and you're logged in

you can then just type and what we're

looking for is flowwise and that should

come up top here so this one here click

on flowwise and then what you're going

to want to do is just click this button

here called fork and what that's going

to do is it's actually just going to

make a complete copy of flowwise onto

your

in onto your GitHub so that you can now

use the flowey software wherever it is

that you would like to use it so if we

just go create Fork

and it's now running down in the

background well that's running I'll show

you the next tool that we're going to

need to use to actually get the app

deployed and so that we can actually use

it online as this app called render.com

this app again we will sign up and start

using on the free plan so if we go get

started I'm gonna sign in with my Google

account and I'm going to hit complete

sign up so when you log into your render

account for the first time what we're

going to want to do is create a web

service so if we click new web service

and I'm going to connect the GitHub that

we just set up so connect GitHub I'm

already logged into my GitHub account

and so I'm just gonna go authorize

render you are being redirected I've

connected my thing and it's going to

save which repositories I'm going to say

select repositories and I'm going to

find flowwise and click that I'm then

going to click install

brings it back to the screen and you

just go new web servers again we're now

connected to our flowwise repository so

click connect here

and you need to just give it a name and

a region so I'm just going to call it no

code IE no code Ireland

chatbot

region I'm just going to choose noted

either overly close to me EU Central

probably is the closest and I got that

if you're in the US or if you're in Asia

probably choose one of the other options

that'd probably be quicker for you to

come down here now to your runtime and

you will need to change this to node and

then if we just change it to yarn

install here leave yarn build as and

then down here yarn start and that

should all be fine exactly as it is

there and I'm gonna actually sign up on

the starter plan here at seven dollars a

month and the reason I'm going for a

paid plan is for persistence so

persistence is the concept whereby you

want the data that you actually create

inside of your flowwise application to

persist meaning that it will live on

every single time that you come back to

that app to use it again it will have

everything that you have created

previously saved in there and it won't

be deleted every time that you return to

the app essentially if you go for the

free plan currently render doesn't allow

the persistence feature under the free

plan so that's why I'm going with the

seven dollars per month if you do want

to just use flowwise for just building

things purely without actually

publishing it or deploying it online you

can always install it locally on your

machine and use it as much as you want

and it will process for as long as you

have that computer and then when you are

ready to deploy something you can then

come to a service like render and deploy

it to the cloud and start paying seven

dollars a month or you could find a

different service for example replit

Amazon web services there's lots of

other hosting providers and you might

have one that you prefer already or you

might not have heard of any of these

types of tools before and in which case

render is a great option in terms of

Simplicity and in terms of it working

well with flowwise so after a few

minutes your instance will show us live

and that's when you know everything has

worked and that you're up and running

and now to access your flowwise instance

in the cloud all you need to do is Click

your url here and it should open your

flowwise in interface you can see this

is a brand new version of flowwise AI so

anything that we've built already in the

desktop version is not yet presented

here however it's very easy to import

chat flows from your desktop version

into the cloud version and when you load

it into Cloud version you can now use it

for deployment online in any web project

or web app that you would like to use it

in before we do that what I think we

should do is talk about the persistence

point that I spoke about earlier which

is whereby any chat flow that you have

inside of your cloudflowwise AI instance

you don't want that chat flow to be lost

every time that you go outside of render

and you log out or render and then you

come back into render and log back in

and you'd start backup flowwise or you

click on this URL and you're back into

flowwise there's a risk that your chat

flow the memory that stores the chat

flows might actually be lost so the

actual chat flows that you've built may

be lost and thus this whole important

concept of persistence so we should go

and set that up now with that now that

we're on a paid plan and if you come

into disks this is where you can do it

and you simply click add disk we'll just

leave it as my disk and then the path

here you're going to want to use this

specific path leave the size at 10

gigabits and click save we now need to

go into the environment section here and

we need to add three new environment

variables these are the three

environment variables that we need

database path API keypath and log path

and the values for each of them are opt

render dot flowwise same for this one

for API keypath and then the last one

did the same but we add on logs at the

end once we've done that we'll hit save

changes the other thing that's really

important to update if you're going to

use flowwise AI in the cloud rather than

locally on your machine is that anybody

that now has this URL can essentially

access your instance or your Cloud

instance of flow wise and so if you've

been starting to build out chat flows in

here you know when you have API Keys

possibly in those chat flows anybody

that comes along to this URL address

will be able to get into your workings

and see what you're doing they'll be

able to basically act as if they are you

at this website so what we should do

there is go back into render and we'll

actually create a username and a

password so that anybody that lands on

this web URL will need to know the

password to be able to log in to start

actually working on your check flows or

looking at your chat flows so we come

back over to render and we come down and

go into environment so these are the two

additional environment variables that

we'll need the first one being flowwise

underscore password and the cycle being

flowwise underscore username and you

just fill in whatever you want so I've

made password password and username

Jamie and you use whatever details you

would like and that's what you're going

to be asked to import every time you go

to your Cloud instance of flowwise

you're going to be asked for whatever

username and password that you've input

here and only you will know that so only

you can work in your flowwise account

and hit save changes the last step is to

go to manual deploy click shared build

cash and deploy it is now redeploying so

you'll have to wait just another few

minutes while it redeploys and we'll

come back in just a sec so the instance

is updated now and I've clicked back

into the link and it asked me for a

username and passwords I've entered my

details and I hit login and I'm now back

into my flowwise AI dashboard in the

cloud and so now all we need to do is

take the chat flow that we built in our

local environment and upload it into our

Cloud environment and the way to do that

is if you come back to the local

environment here on localhost we'll find

our chat which is here simple

conversation with tech stock and what

we're going to do is go to settings here

and go export chat flow okay so that's

exported the chat flow now so we're

going to come back into the cloud

version of it and rather than clicking

on settings we're actually going to

click on add new because this is how you

actually add a an individual chat flow

and if we go over the settings now up

here and go low chat flow we found our

file and we double clicked it and it is

now uploaded as an title chat flow so

we'll just save this as

simple

chat with text

Dock and click save

okay and now that is saved and if we

click save here and I'll just double

check that everything is working okay

class services do you offer

okay so it didn't work and it's

obviously because I need to actually

input the open AI API key again and I

also need to upload the document again

so bear with me one second

okay I've done both of those things now

so I'm going to come in here and I'm

just going to clear the the chat clear

and I'm gonna come back in and I'm gonna

ask it the same question what services

do you offer and let's see here we go

so it seems to be working Consulting

service looking to learn our goals teach

business owners how to use no code build

okay and that all looks really good and

it looks like it's coming directly from

the web page so that's brilliant so if

we just hit save and

um that's essentially it so now if you

want to actually use it inside of a web

page what you do is you click this

little blue button here

in your Cloud hosted version and I

usually just use this embed pop-up HTML

version and so you literally just copy

this

snippet here and I'm my website is built

inside of software so I'm going to go

into the software studio and I'm going

to add a custom code block the custom

code block is under the static category

here here's the custom code block I'm

going to add it in it's going to appear

up here and I'll paste in the exact

snippet that came directly from the flow

it's Cloud version from this blue

section here and then if I come back and

if I just hit publish

and in software this is probably

software specific I'm just going to get

rid of the padding on that code block

actually so that you don't see a big

white space at the top of the screen and

if we hit publish and if we come back

here and there's currently no chat bot

on the side so if we refresh it

and let's just see it's now showing on

the site and if we just go over what

services do you offer

so here it goes for training multiple

consultancy in online community looks

absolutely perfect so look that brings

to see into today's tutorial if you

enjoyed the video I would really

appreciate if you'd click like and the

video consider subscribing to the

channel also if you'd like to see any

future content in this area or any

future tutorials around chatbots or no

code or anything like that let me know

and please leave a comment below thank

you very much for watching and talk to

you soon