How to Create a Chatbot for Your Website


In the digital age, chatbots have become essential for enhancing user experience and streamlining customer interactions. This guide provides a step-by-step process to build a chatbot tailored to your website’s needs.


Whether you’re a seasoned developer or a beginner, you’ll find this guide useful in navigating the complexities of chatbot development. Let’s embark on this journey to create a chatbot that will engage your website visitors and transform their experience.


Watch this quick video guide on setting up a ProProfs chatbot on your website.



Why should you use a chatbot?


This article covers the following:


1. Creating a bot from scratch

2. Personalizing bot interactions

3. Managing your bots

4. Configuring bot settings


Here's how you can create a bot in ProProfs:


1. In your ProProfs Live Chat account, go to Bots in the top navigation banner.


Navigate to Bots in the top menu


2. Hover your mouse over the Create New Bot button. You can select any of the following: 

a. Create From Scratch  

b. Create Using Templates


For this guide, we will create a bot from scratch.


Create a new bot from scratch


3. Here’s what the bot builder interface will look like. You can perform the following actions:


a. Assign a name to your bot.

b. Modify the Welcome Message.

c. Add a new interaction panel to create a conversation flow.

d. Preview your bot.


Bot Builder Interface


4. Let us see how you can modify the Welcome Message interaction panel.


  • Click on the box to open the interaction panel. Here, you can perform the following actions:

    a. Interaction Name: The first interaction panel consists of the opening message for the visitor. It is preferable to give the interaction panels a name to differentiate between various interaction messages or responses. Here, we name it "Welcome Message."

    b. Type the Bot response below: You can add the message you want the bot to display to the visitor in this box. Enter a "welcome message" in this case. For example, Hi! I am your virtual assistant. How can I help you today?

    You can attach media files and add CTAs to personalize the bot responses.

    c. Allow/restrict User response: If you want visitors to respond to your message, use the toggle to activate. Since we welcomed the visitor in the first interaction panel, we would keep it as is.


Modify the Welcome Message interaction panel


Important: If you enable the option “Would you like the user to respond?”, the bot will wait for the user’s response before sending the next message. This is useful when the bot’s response depends on the user’s input.


Once done, click Save.


5. Create the flow of your chatbot based on the current message and anticipated response by the user, if applicable.


  • Click the + button as shown below.


Add a new interaction panel


  • Select the interaction type from the list. You can choose from the options to develop a conversation flow that will require user responses.

    - Keep it as a simple interaction where the bot sends a message or a response.
    - You can add an open-ended question and seek a visitor's response in any of the given formats.
    - You can assign an action to the bot based on the interaction with the visitor.

Let's say you may ask the visitor's name in the next step. Choose Text Response as the response type. Learn more about available bot interactions and how to use them.

Choose an interaction type


6. Design the interaction panel to ask pertinent questions and obtain relevant responses from the visitor.


Configure the intteraction panel for response type


Continue with steps 5 and 6 to further develop the conversation flow of your bot.


Personalizing Bot Conversations


ProProfs Chatbot allows you to personalize the chat to make it more engaging for the visitor. The ‘‘+Add Attribute” button enables you to send appropriate replies using the visitor’s name, email address, or phone number.


For example,

  1. Thank you, {name}.

  2. You will receive a confirmation email at {email}.

  3. Our support team will call you at {phone}.


Such responses will build a trust factor, and the visitor will feel assured.


Let’s see how to add attributes in the screenshot below.


  • Click on Add Attribute when you are adding the bot response, and choose your preferred attribute to personalize the response.


Add Attribute to personalize Bot Responses


  • You can even add a custom attribute based on your preferences.


Add custom attribute


  • Click Save after selecting the suitable attribute.
  • Preview the chat using the ‘‘Preview” option and see how the interaction looks.


The following screenshot gives a glimpse of the chat flow.


Live Chat Preview with Attribute


Personalization improves the user experience by giving the visitor an authentic and inclusive feeling.


How to Manage Your ChatBots


In your ProProfs Chat account,

  • Go to Bots in the top navigation menu. Here, you can do the following:


Navigate to Bots in the top menu


a. Click the ‘'pencil icon” to edit the chatbot.

b. Click the gear icon to access bot settings.

c. Preview your bot.

d. Create a copy of your existing bot.

e. Delete a bot from your account.

f. Activate/deactivate a bot using the toggle.


Manage bots in your Chat account

How to Access ProProfs Chatbot Settings


1. In your ProProfs Chat account,

  • Navigate to Bots in the top navigation menu. A list of all your bots will appear.
  • Click the gear icon, âš™ï¸, of a bot to access its settings.


Access bot settings


2. In the settings interface, you can customize various options:


a. Name: You can give a name to your chatbot for easy recognition if you have different bots for different purposes on your website. It won’t be visible to the visitor. For example, Pricing Assistance Bot if you want to resolve queries related to the pricing of your products.


b. Display Name: The name will show up on the chat window. It will also be visible to the visitor to know whom they are interacting on your website.


c. Display Image: You can choose an image from our library or upload a new one per your liking and customize your chatbot.


d. Show Bot: Click the ‘‘Show bot when” dropdown to decide when you want the bot to appear. You can choose to show when Chat is Online, Chat is Offline, and Chat is Online/Offline.


You can set conditions related to your website URL for a particular Bot to become active. You can activate a Bot when your website URL:


  • Is all pages: It indicates the Bot will be active on all web pages of your website.
  • Contains: It indicates the Bot will be active only on those URLs that contain the mentioned keyword.
  • Is: Enter a URL where you want the Bot to be active.


Configure Bot Settings


Remember to click Save after making changes.


That is all about building ProProfs Chatbot. If you have any queries or need further assistance, please feel free to contact us. We are here to help and provide you with a seamless support experience on your website.



© 2005 - 2024 ProProfs
add chat to your website