Getting Started 🚀

Installation

npm i i-chatbot --save

Basic Usage

Import component

import ChatBot, { ChatBotUtil } from 'i-chatbot'

Create methods that will handle postback events from a chatbot. It should return an array of message objects to reply on user's action with a callback.

  getStarted () {
    return [
      ChatBotUtil.textMessage(['Hi!', 'Hey there!'].any()),
      ChatBotUtil.textMessage(['How is life?', 'What\'s up?'].any(),
        ChatBotUtil.makeReplyButton('Great!', this.intro))
    ]
  }

  intro () {
    return [
      ChatBotUtil.textMessage('That\'s good to hear!')
    ]
  }

Render ChatBot with a get started callback method and a start button.

<ChatBot onGetStarted={this.getStarted}
         getStartedButton={ChatBotUtil.makeGetStartedButton('Get Started')} />

ChatBot

Props

| Prop | Default | Type | Description | | ------------------ |:-------------:| :-----:| -----------| | onGetStarted | - | func | Inital callback method to return first messages | | getStartedButton | - | object | Start button parameters |

Methods

startOver (message)

Resets a state of chat and adds a message object if no get started button set.

ChatBotUtil

Methods

textMessage (text, ...actions)

Create a text message object.

Parameters:

| Name | Type | Description | | ------- |:---------:| ------------| | text | string | Message text | | actions | object(s) | Quick reply button(s) object |

userTextMessage (text)

Create a user's text message object.

Parameters:

| Name | Type | Description | | ------- |:---------:| ------------| | text | string | Message text |

makeReplyButton (title)

Create a get started button.

Parameters:

| Name | Type | Description | | -------- |:------:| ------------| | title | string | Title |

makeReplyButton (title, postback)

Create a quick reply button.

Parameters:

| Name | Type | Description | | -------- |:------:| ------------| | title | string | Title | | postback | string | Postback value |

makeTextInputField (title, postback)

Create a text input field.

Parameters:

| Name | Type | Description | | ----------- |:------:| ------------| | send | string | Title of the submit button | | placeholder | string | Placeholder for input field | | postback | string | Postback value |

Style

As CSS pre-processor is used LESS. Copy and modify styles from demo/src/i-chatbot.less and then import in your app.

Built with i-chatbot 🤘

• Personal website of Oleh Stasula
• Landing page of Justin Case

Have you built something cool with i-chatbot? Submit a pull-request and add it to this list! 😉

To-do 🛠

• Bottom-up chat direction
• Better input validation
• Avatar placeholder

Contribution 💪

Your contribution is welcomed, no matter how big or small!

Please have a look at the contribution guide for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the changelog.

License 🔖

The library is available as open source under the terms of the MIT License.