My FeedDiscussionsHeadless CMS
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Creating a chatbot with ReactJS

DK's photo
DK
·Dec 22, 2017

I'm creating a simple chatbot with ReactJS and want to share some informations with you. I'll use it for my upcoming portfolio website (my first self-programmed site ever).

I've created an easy way to manage the messages of the bot. There's a steps file that defines when the user can see options, when he can write sth in an input field or when the bot end the conversation. An id , msg and next are always needed. And there has to be one end . Here's a short example with placeholder messages showing some of the available options that you can write in the steps file:

steps = [
  {
    id: 0,
    msg: 'Hello.',
    next: 1
  },
  {
    id: 1,
    msg: 'I am a chatbot. What’s your name?',
    delay: 1500,
    user: true,
    input: [],
    next: 2
  },
  {
    id: 2,
    msg: 'Nice to meet you. Do you like the site?',
    user: true,
    options: [
      {option: 'yes', next: 3},
      {option: 'no', next: 4}
    ]
  },
  {
    id: 4,
    msg: 'Bye',
    end: true
  }
]

The bot will start at id: 0 so there has to be one id with 0. It will post one message after another, searching for next with a standard delay of 1000ms. If you define delay in the steps it will use the custom value. If the step has user: true then it will stop and search for either options or input. It will show options and waits for the user to click on one option or it will make the input field writeable and waits for the user to send a message.

There are some more features that I'll post at a later time.