These days, customers want fast answers whether they’re shopping at noon or midnight. A chatbot can be your secret weapon, providing personalised support, answering questions instantly, and guiding customers towards the perfect product.
But what if you’re not a developer? That’s where Flowise comes in. It’s a low-code tool that lets you design intelligent workflows with minimal technical knowledge. Pair it with GPT-4O-Mini, and you’ve got a chatbot that feels like a real assistant. It’s perfect for businesses looking to step up their customer experience without spending weeks (or months) on development.
This guide is building on the local RAG guide found here, it will walk you through everything from building your chatbot to embedding it on your website. We will be using a fictional company called "ABC Computing" that sells computer components.
Why Use a Low-Code Chatbot?
If you’ve ever thought about adding a chatbot to your site but felt intimidated by the coding, low-code platforms like Flowise are a game-changer. They let you skip the technical complexity and focus on what matters: creating a tool that works for your business.
Here’s what makes a low-code chatbot worth it:
Faster Deployment: Build it in hours, not weeks.
Customisation Made Simple: Easily tweak its behaviour and appearance to fit your brand.
Affordable and Accessible: No need to hire developers—Flowise makes it easy for anyone to create a chatbot.
Step 1: Building Your Chatbot Workflow
The heart of your chatbot is its workflow. Think of it as the behind-the-scenes setup that allows your chatbot to retrieve information, understand questions, and respond intelligently.
To setup Flowise please view my article here for a step by step guide.
1. Start with Your Product Catalogue
Your chatbot can only answer questions if it has the information it needs. To get started:
Upload your PDF product catalogue to Flowise. This might include details like pricing, specs, or FAQs. The example I have for "ABC Computing" is a PDF document called sales.pdf
Use the Recursive Character Text Splitter to break it into smaller chunks (e.g., 1,000 characters with a 200-character overlap). This ensures the AI has enough context to provide accurate answers.
2. Make the Information AI-Friendly
To help your chatbot “understand” the product catalogue:
For this example we have decided to use OpenAI Embeddings, just be mindful this is using the OpenAI API that will cost unlike the local example in the last article Add the OpenAI Embeddings node. This converts text into data the AI can work with. For the best results, use the text-embedding-ada-002 model.
You will need to get your OpenAI key from the OpenAI playground. Click on the down arrow of the connect credential box and create a new key, give it a name and paste in your OpenAPI key.
For simplicity we are using the In-Memory Vector Store as our example data is small, for production you will need to use a vector database like ChromaDB. The In-Memory Vector Store, acts like a quick-access library for your chatbot.
3. Configure the Chat Engine
This is where your chatbot becomes conversational:
Add the ChatOpenAI node and connect it to GPT-4o-Mini (defualt will be ChatGPT 3.5 show please chnage it). Set the temperature to 0.2 so responses stay consistent and professional. Again youu will have to slect the drop down arrow in the connect credential and your API key you made earlier should be shown, select that key.
Use Buffer Memory to keep track of ongoing conversations. This ensures the chatbot doesn’t forget what the customer asked two minutes ago.
4. Bring It All Together
Link everything with a Conversational Retrieval QA Chain:
It retrieves the right product details from the vector store.
Then it uses pre-written prompts to generate clear, helpful responses.
Make sure to save the workflow.
Step 2: Giving Your Chatbot a Personality
A chatbot shouldn’t sound robotic it should feel like an extension of your team. Here’s how to give yours a friendly, professional personality. To do this we need to click on additional parameters of the Conversational Retrieval QA Chain. The below shows the default settings. Click on the blue arrows to get into the text box and change the information.
Modify the Rephrase prompt and the Response prompt. They are on my GitHub, see the bottom of the page fo the link.
1. Start with a Warm Greeting
When a customer opens the chat, make them feel welcome:
“Hi there! Welcome to ABC Computing. How can I help you today?”
2. Set Clear Rules
Your chatbot needs some boundaries to ensure it’s helpful and accurate:
Always display prices in UK Pounds (£).
Mention warranties and shipping details when applicable.
If the chatbot doesn’t have an answer, it’s better to admit it and offer alternatives:
“I’m sorry, I don’t have that specific information. But I can recommend similar products if you’d like.”
3. Adopt the Right Tone
Your chatbot’s tone should match your brand. For example:
Friendly but professional: Think of it as a knowledgeable sales assistant.
Clear and concise: Avoid unnecessary jargon.
Solution-focused: Guide customers toward the best products for their needs.
. Use Prompts for Better Responses
Custom prompts help your chatbot handle tricky questions. For example:
If a customer follows up with “What about shipping?” the chatbot can rephrase it as, “What are the shipping options for this product?” for clarity
Step 3: Upsert the document for the RAG
Its import we do this step so that the information from the PDF document is pushed in to the vector store. Click the green icon at the top right of the page. Then clikc on upsert.
Now save the workflow and test it out. Click on the chat icon and chat with the bot. If its worked you will get a response.
Step 4: Embedding the Chatbot on Your Website
This is where all the behind-the-scenes work pays off. Embedding your chatbot is surprisingly simple, even if you’re not tech-savvy.
1. Generate the Embed Code
In Flowise:
Go to the Embed in Website or Use as API section.
Choose Popup HTML and copy the provided JavaScript code.
Here’s an example of what it might look like:
Make sure to tick the box for show embed chat config, this is important is you want to customise the look and feel of the chatbot later.
2. Add the Code to Your Website
Paste this script into the <body> section of your site’s HTML. Once live, a floating chat button will appear on your site, ready to assist visitors.
3. Customise Its Look
Open the webpage, by defaut, you should have the Flowise branding.
Make sure the chatbot aligns with your brand:
Adjust the colours, sizes, and placement in the code.
Use a custom icon if you want to add a unique touch.
For the full code visit my GitHub.
Now you can see we have chnage the branding to suit "ABC Computing" and the bot is working correctly!
Step 4: Testing and Fine-Tuning
Before you unleash your chatbot on the world, give it a proper test:
Simulate Common Questions: Check how it handles FAQs, product recommendations, and technical queries.
Test for Context Awareness: Make sure it remembers the flow of the conversation.
Refine Responses: Adjust prompts and parameters to improve accuracy and tone.
Step 5: Security
This is just an example and its important you think about security of the chatbot. Think about imput moderation and domain restrictions.
To make the chatbot only work on your website you can use domain restrictions. Select the settings icon and configuuratrion.
Select Allowed Domains and eneter your web address. Now the chatbot should only work on your webpage.
Step 6: Go Live and Start Helping Customers
Once everything’s working smoothly, it’s time to go live. Your chatbot will:
Provide instant answers to customer queries.
Suggest products based on specific needs.
Handle repetitive questions, freeing up your team for more complex tasks.
Final Thoughts
Adding a chatbot to your website doesn’t have to be overwhelming or expensive. With Flowise’s low-code tools and GPT-4o-Mini’s conversational low cost API, you can create an intelligent, engaging assistant that transforms how you interact with customers.
Whether you’re helping someone pick out the perfect gaming setup or answering questions about warranties, your chatbot will provide the personalised service customers love.
To access all the code for this article, please visit my Github.
Comments