top of page

Just Jolly Professional Tools

Professional Tools: Using a Chatbot Builder

The Chatbot Builder is a user-friendly tool that allows you to create and customize a chatbot for your website. With this builder, you can create a fully functional, customizable chatbot without any coding experience. The tool helps streamline the process of integrating a chatbot by providing pre-built code ready to be copied and pasted into your web project. Whether you're creating a simple FAQ bot or a more interactive chatbot, this tool simplifies the development process, making it accessible for anyone!


Instructions for Using the Chatbot Builder


Welcome to the Chatbot Builder! This tool allows you to easily create a custom chatbot for your website. Follow the steps below to set up and generate your personalized chatbot.


1. Set Chatbot Name

  • What to Do: In the "Chatbot Name" field, type your desired chatbot name.

  • How to Use: Click the Set Chatbot Name button to apply the name. Your chatbot will now display the name you've chosen throughout the builder and the generated code.

2. Choose Send Button Color

  • What to Do: Click the color picker to choose a color for your chatbot's send button.

  • How to Use: After selecting a color, click the Apply Color button to see the color update. If you wish to revert to the default color, click the Reset Color button.

3. Add Questions and Responses

  • What to Do: Under the "Add Responses" section, enter a Question and a Response for your chatbot.

  • How to Use: After filling in both fields, click the Add Response button to save your question and response.

    • The responses will appear in the list below where you can view, edit, or delete them.

    Edit a Response: Click the Edit button next to a response to modify the question and response.

    Delete a Response: Click the Delete button to remove a response.

    Copy a Response: Click the Copy Response button to copy the question and answer to your clipboard.

4. Enable/Disable Voice Response

  • What to Do: Toggle the checkbox under the "Enable Voice Response" section to turn on or off voice responses.

  • How to Use: When enabled, the chatbot will speak its responses using speech synthesis. You can toggle this setting on or off as needed.

5. Generate Code

  • What to Do: Once you've customized your chatbot's name, responses, and voice settings, click the Generate Code button.

  • How to Use: This will generate:

    • HTML Code: The structure of your chatbot.

    • CSS Code: The styles to make your chatbot look nice.

    • JavaScript Code: The logic to handle chatbot interactions.

    • Integrated Code: The entire code (HTML, CSS, JS) ready for integration into your website.

    After generating the code, you can copy it to your clipboard by clicking the Copy buttons next to each section.

6. How to Use the Generated Code

  • Copy the generated HTML, CSS, or JavaScript code and paste them into your website's files.

  • For the integrated code, copy everything in the Integrated Code box and paste it into your website's HTML where you want the chatbot to appear.

7. Copy Responses Code

  • What to Do: If you want to quickly copy all the responses you've added, click the Copy Responses Code button.

  • How to Use: This will copy the list of questions and responses in a format that you can paste directly into the responses array in the JavaScript section of your code.



Chatbot Example: The chatbot responds to basic greetings such as "Hello," "Hi," "Good morning," "Good evening," and more. These are common ways you can start a conversation with the chatbot. Example Questions to Ask:

  • "Hello" — Chatbot will greet you.

  • "How do I set the name of my chatbot?" — It will give you the steps.

  • "Can I make my chatbot speak?" — The chatbot will explain how to enable speech synthesis.

  • "What is your name?" — It will tell you it’s a chatbot and can be named anything.

  • "Bye" — Chatbot will say goodbye and offer to help again.



Tips for Using the Chatbot Builder
  • Customize Responses: Add as many questions and responses as needed. The chatbot will match user inputs with the saved questions to provide relevant answers.

  • Preview Your Bot: Once you’ve generated the code, you can embed it into your website and interact with the chatbot to test its functionality.

  • Use the Voice Option: If you want a more interactive experience, enable the voice response feature to allow the chatbot to speak its responses.


That's it! You've now set up your personalized chatbot. Enjoy using it on your website!

bottom of page