Tailoring a Chatbot: A React ChatBotify Guide (Part 2)

Introduction

Welcome to the second installment of our tutorial series on building your own chatbots using React ChatBotify. If you have yet to set up your chatbot, be sure to check out the setup guide. Now, let’s delve into the exciting realm of customizing both the appearance and conversations of your chatbot for a more tailored experience.

Setting the Stage

In the previous guide, we laid the foundation for bringing up a working chatbot. As we embark on this second part of our series, it’s crucial to understand the pivotal role customization plays in crafting a unique user experience. Tailoring both appearances and conversations allows us to not only meet but exceed user expectations. This customization journey is not just about aesthetics; it’s about creating an interactive and memorable encounter for every user engaging with your chatbot.

Building on the foundational setup from Part 1, let’s explore the fascinating realm of customizing your chatbot’s appearances and conversations in greater detail. This is where we turn the ordinary into extraordinary!

Customizing Theme

The general theme of your chatbot delivers a strong first impression to your users. Oftentimes, you will want to ensure that your chatbot is styled to be coherent with the theme on the rest of your website. This could be your color schemes, fonts, or even the layout of your chatbot window.

For a start, the fastest and recommended way to adjust your chatbot theme is via the primaryColor and secondaryColor attributes in the theme option. For example, setting the primaryColor to #F4B41A and secondaryColor to #143D59 will result in a chatbot window themed as below:

You can also find the live example here for the themed changes above. That said, if you require fine-grained changes to the appearance of your chatbot, the bot also exposes a tonne of other attributes for you to transform the chatbot to the looks of your dreams!

Sculpting Detailed Appearances

For the more ambitious users, you may wish to have even more granular control over the changes you can make to your chatbot’s appearance. This will ensure that your chatbot is styled wholly to fit your website best as it can. To help you achieve this, the chatbot exposes several styles that are documented here.

Using the previous example, we now go a step further and look at how the font, color scheme and border radius can all be adjusted to give the chatbot a different look:

Apart from styles, you may also overwrite the CSS styles used in the chatbot. For ease of identifying the relevant styles, styles used by the chatbot are prefixed with “rcb”.

Building Conversations

Conversations play a key role in defining the experience your users will get out of the interactions. Depending on your aim of having a chatbot, conversations can take the form of a FAQ bot or a conversational chatbot. If you are specifically interested in building a FAQ or conversational chatbot, separate guides will be written for them. As this is an introductory tutorial, we will only take a quick look at how we can get started with customizing conversations!

To begin, you need to define your own flow which can be as simple as the example conversation below:

// MyChatBot.js
import React from "react";
import ChatBot from "react-chatbotify";

const MyChatBot = () => {
  const flow = {
    start: {
      message: "Hey, what do you like to eat?",
      path: "end"
    },
    end: {
      message: "I see, good bye!",
      chatDisabled: true
    }
  }

  return (
    <ChatBot/>
  );
};

export default MyChatBot;

In the short code snippet above, we define a flow that contains 2 blocks. In the start block, we ask the user what he/she likes to eat. Upon receiving an input from the user, we path over to the end block which then bids farewell to the user before disabling the chat input to prevent the user from interacting with the text box.

With just this short example, you have successfully added your own conversation flow into the bot. However, this is only the tip of the iceberg in terms of what the bot is capable of. For more examples on the different kinds of conversation flows you may have, take a look at all the examples starting from here.

Conclusion

In this tutorial, we have taken a look at how we can craft the appearance of our chatbot as well as equip it with the ability to have conversations with your users. In the next section, we will visit advance options as we take a look at one of the common use cases for a chatbot — an FAQ bot to answer common questions!