Why You Should Add an AI Chatbot to Your Website
Why did I create an AI chatbot for my website?
Users coming to my website come from different countries. Their arrival times vary depending on the countries they live in. So if I go to chat with them, I have to put my life under my website.
I wanted to overcome that barrier and provide instant responses to user queries, improving engagement and satisfaction.
It also allowed me to increase my website’s efficiency, automate repetitive tasks, and free up time for more complex issues. Plus it allowed me to increase conversions.
How would you like to be able to go to a website and get instant answers to your questions without waiting for someone to respond?
Basically that is the main task an AI chatbot can do for your website!
Hence AI chatbots are becoming a must for any website. That’s because it can accomplish tasks ranging from improving user experience to improving website efficiency and increasing conversions.
Here I will introduce you the steps to create a similar or more improved AI chat bot for your website.
By adding an AI chatbot to your website, you can:
Improving user experience
The biggest advantage of an AI chatbot is that it can give very accurate answers to user queries instantly. Imagine a user lands on your website in the middle of the night with a question. A chatbot can provide an immediate response instead of waiting for someone to get back to them. This will make your website more attractive and make your visitors happy.
Increasing efficiency
By automating repetitive tasks, an AI chatbot saves you time. Think about it. Instead of answering the same questions over and over again, you can do it through your chatbot. This allows you to focus on the more complex and important tasks of your website.
Increase conversions
AI chatbots can guide users through your website, helping them find what they’re looking for faster. This can lead to more sales, signups, or whatever else your website may be aiming for and have a positive impact.
In this guide, I’ll walk you through everything you need to know to build your own AI chatbot and integrate it into your WordPress site.
Understanding AI Chatbots: The Core Structure
Before we dive into the technical aspects, it is essential to understand the basic structure of an AI chatbot. It will be very useful for you while building or improving this chatbot.
Key components of an AI chatbot
User Interface (UI): The visual part through which users interact with the chatbot. This is shown in the image above.
Backend: Server-side logic that processes user input and generates responses.
AI Integration: The brain of the chatbot is powered by models like OpenAI.
Overview of how it works
Chatbots capture user input, send it to the backend, where AI processes it, and then displays the response to the user on the frontend.
Step-by-step guide to building your AI Chatbot
Now that you have a basic understanding of AI Chatbot, let’s start building your Chatbot.
I will guide you step by step. Follow these steps very carefully. I have used PHP, HTML, CSS, and JavaScript for this process. Don’t worry I’m not an expert in these things like you. But you can make this process very easy by using ChatGPT as a support.
However, I am providing all the codes you need here. (Special thanks to Mr.Hasan Aboul Hasan)
Â
Creating a Chatbot UI
First impressions are the foundation of anything. A good looking chatbot makes a big difference to your website. Here’s how to design a simple yet attractive chatbot interface.
Essential UI elements
Chat Box: This is where the conversation happens. It shows the chat history between the user and the chatbot.
Input Field: Allows users to type their messages here.
Send Button: This is used to send the message to the chatbot.
To create this UI, you will use HTML and CSS. You can download all related files below.
After entering the AI-chatbot folder, you can see two folders: front and back. Go inside the front folder. There are 4 files as shown below.
Here the chatbot.html file contains everything. But the Index.html, script.js, and style.css files contain only the related things. From there you can use these files appropriately.
Either way, open chatbot.html or Index.html in your browser. Then you will see the chatbot as below.
But you still can’t chat with this.
Setup Chatbot code in the backend
Now that your UI is ready, it’s time to access the code that will make your chatbot work.
Install and activate WPCode Lite.
- Paste the code in the back folder here. Note, the Code Type should be changed to PHP Snippet.
- Connecting the OpenAI API Key.
Register on the OpenAI website and get an OpenAI API key. Because our chatbot is powered by the OpenAI API.
You can get the OpenAI API key as shown in the image above. Keep this confidential. Next, enter the OpenAI API key in the snippet shown below and save the snippet.
// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'sk-proj-0000000000000000000000000000000'; // Replace with your actual API key
Linking the UI with the backend
Now that your front and back panels are ready, it’s time to connect them together. This is where JavaScript comes into play.
Now open the script.js file in the front folder. You can use notepad for this. Go there and update your domain name and searve the file.
Eg: replace https://YourWebsite.com with your site domain name.
const apiUrl = 'https://YourWebsite/wp-json/myapi/v1/chat-bot/';
const botConfigurationUrl = 'https://YourWebsite.com/wp-json/myapi/v1/chat-bot-config';
If you did everything correctly, now you just have to open the index.html file again. To your surprise, your chatbot will work like the image below.
Advanced Customization: Taking Your Chatbot to the Next Level
This chatbot is designed to suit my site. That is, only matters related to WordPress can be chatted through this chat button. When asked about a matter not related to WordPress, it replies “I am trained to assist with WordPress-related questions. Feel free to ask me anything about WordPress”.
So how to customize this chat bot for you?
System Prompt Customization
Customizing your AI chatbot’s system prompt is essential to ensure it aligns with the specific needs of your website and the type of interaction you want to have with your users. So here’s how to adjust your system prompt to suit different websites:
1. Understand the purpose of your website
Identify the primary function of your website. Is it an e-commerce site, a blog, a tech support platform or a content-driven site? Your chatbot’s system prompt should reflect the primary purpose and type of queries users might have.
2. Define the scope of the interaction
Clearly state the purpose for which your chatbot is designed. For example, if your website focuses on e-commerce, chatbots can assist with product inquiries, order tracking, or product recommendations. The scope should be narrow enough to keep the chatbot focused but broad enough to handle common user needs.
3. Crafting the System Prompt
Change the language and focus of the system prompt based on the context of the site. Here’s how you can adjust the provided trigger for different types of websites:
Example 1: E-commerce Website:
You are a knowledgeable shopping assistant on our online store. Your task is to help users find products, answer questions about orders, provide product recommendations, and assist with any inquiries related to our store. Engage users in friendly conversations to enhance their shopping experience. Do not respond to questions unrelated to shopping or our products. If asked, politely state that you are here to assist with shopping-related queries.
Example 2: Tech Support Website
You are a tech support specialist. Your task is to help users troubleshoot technical issues, provide guidance on software and hardware products, and assist with inquiries related to our tech support services. Engage users in problem-solving conversations to resolve their technical problems. Do not respond to questions outside of tech support. If asked, politely inform them that you specialize in providing tech support assistance.
Example 3: Blog or Content-Focused Website
You are an expert content guide for our website. Your task is to help users find articles, explain content topics, suggest related posts, and assist with any questions about our blog content. Engage users in informative conversations to enrich their reading experience. Do not respond to questions unrelated to our content. If asked, gently redirect them to the relevant blog topics.
Example 4: Educational Platform
You are an educational assistant for our online learning platform. Your task is to help users navigate courses, answer questions about course content, provide study tips, and assist with any inquiries related to learning on our platform. Engage users in supportive conversations to enhance their learning journey. Do not respond to questions outside of education-related topics. If asked, kindly direct them to the appropriate course material.
4. Enter the brand identity
Make sure the tone and style of the prompt aligns with your brand’s voice. If your brand is casual and fun, the query should reflect that. For a more professional brand, use formal and precise language.
5. Test and Iterate
After customizing your system prompt, test it with real user interactions to see if it meets the intended objectives. Gather feedback and make adjustments as needed to fine-tune the chatbot’s performance.
By customizing your chatbot’s system prompts, you can ensure that it provides relevant, useful and on-brand responses, making your website’s user experience more engaging and effective.
After you prepare your prompt, go to “Add the last prompt to the conversation history” in the Backend Snippet and enter the prompt you prepared.
Then save the code snippet. Depending on the success of your prompting, the output of your chatbot will be successful.
Icon Customization
But your chatbot still has the same icon as my chatbot. Let’s change that too.
Go to “load_chat_bot_base_configuration” and change your user_avatar_url and bot_image_url to the icon you require.
function load_chat_bot_base_configuration(WP_REST_Request $request) {
// You can retrieve user data or other dynamic information here
$user_avatar_url = "http://ceeveeglobal.local/wp-content/uploads/user_image.webp";
// Implement this function
$bot_image_url = "http://ceeveeglobal.local/wp-content/uploads/Dimuthu.png";
Other minor changes
You can change the Startup Message to suit you. You can also change the font size and commonButtons of your chatbot.
$response = array(
'botStatus' => 1,
'StartUpMessage' => "Hello and welcome to Ceevee Global! I'm your AI assistant, here to help you with all things WordPress. How can I assist you today?",
'fontSize' => '16',
'userAvatarURL' => $user_avatar_url,
'botImageURL' => $bot_image_url,
// Adding the new field
'commonButtons' => array(
array(
'buttonText' => 'Need WordPress Help!!!',
'buttonPrompt' => 'I need help with a WordPress issue'
),
array(
'buttonText' => 'Improve My Website',
'buttonPrompt' => 'How can I enhance my website?'
)
)
);
Final Steps: Publishing Your Chatbot on WordPress
Now you can integrate your chatbot into your WordPress website pages.
For that, we are again asking for help in the code snippet.
Go to Header and Footer in the code snippet. Go there and paste the full code, HTML, CSS, and JavaScript, in the footer.
Bonus Tip: If you run into any WordPress errors while setting up your chatbot, don’t worry. My WP Error Expert AI tool can help you fix many errors easily. And if you’re a web developer, check out my other AI tools designed to make your life easier.
Conclusion
In conclusion, integrating an AI chatbot into your WordPress site can significantly enhance user experience, increase efficiency, and drive conversions.
By automating responses to common queries, an AI chatbot ensures that visitors receive instant support, no matter the time of day.
This guide provides a comprehensive, step-by-step process to build and customize an AI chatbot that aligns with your website’s specific needs, whether it’s for e-commerce, tech support, content guidance, or education.
By following these steps, you can create a chatbot that improves customer satisfaction and optimizes your website’s performance, ultimately leading to better engagement and outcomes.
