Vue Chatbot 🤖

This component helps to build interactive chatbot inside your Vue app. Built according to instructions on https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

Table of content

• What is included?
• Installation
• Including in project
  • main.js
• Usage
  • Any .vue file
  • Configuration
    • Get Started button
  • Events
  • Classes
    • Button(title, payload, data)
  • Methods
    • sendMessage(text, buttons)
      • Example
    • sendMessageAsUser(text)
    • ask(text, buttons)
      • Example with buttons
      • Example without buttons
• Styling
• Author
• License

What is included?

Component contains logic of chatbot functionalities and default styling, so you have to write interactions logic only ⚡

Installation

In ypur project root run npm i vue-chatbot --save

Including in project

main.js

import Vue from 'vue'
import VueChatbot from 'vue-chatbot/sfc'

Vue.component('chatbot', VueChatbot)

Usage

Use it in your vue files like any component but don't forget to wrap it in some container.

Any .vue file

<div class="chat">
  <chatbot ref="bot" :config="chatbotConfig" @postback="handleButton" @text="handleText"></chatbot>
</div>

Configuration

Configure component by passing config object as shown above. All configuration optioons are listed below.

| Name | Description | Default value | Type | | -------------- | -------------------------------------------------------------- | -------------- | ------- | | sendButton | Message send button content | 'Send' | string | | msgPlaceholder | Placeholder of message input field | 'Your message' | string | | showGetStarted | Determines if should show start when component loaded | true | boolean | | getStarted | Text inside get started button | 'Get started' | string | | typingSpeed | Speed of typing (used to calculate length of typing animation) | 50 | integer |

Get Started button

If get started button exists, it's payload is always 'GET_STARTED'.

Events

Data flow structure is based on events emitted from component

| Event | When | Arguments | | -------- | ------------------ | ------------- | | text | User texts to bot | text | | postback | User clicks button | payload, data | | echo | Bot texts to user | message |

Classes

Button(title, payload, data)

Use this class to create button for bot message in fast way.

const button = new this.$refs.bot.Button('Ok', 'OK_PRESSED', {prop: 'value'})

Methods

sendMessage(text, buttons)

Sends message as bot, if buttons provided locks text input and shows buttons.

Example

This example access to bot object via reference, but you can also assign this.$refs.bot to some property defined in data. Remember to do it in mounted() functios as this component reference isn't available inside created().

await this.$refs.bot.sendMessage('Shall we start?', [new this.bot.Button('Ok')])

sendMessageAsUser(text)

Sends message as user. You can use it to send message as user from your app without user interaction with chat window.

ask(text, buttons)

This method allows to ask user for something and catch his answer into variable using await keyword. Consider example below.

IMPORTANT! Using ask method locks events, so component will not emit any event for user answer for message sent with ask() method.

Example with buttons

let shouldBe = await this.bot.ask('To Be or Not To Be?', [
  new this.bot.Button('To Be', true),
  new this.bot.Button('Not To Be', false)
])

console.log(shouldBe) // true or false

As you see above, ask functions returns second argument of Button constructor (normally, data argument is third, but in ask method you don't need postback parameter)

You can also ask for data which needs to be written, for example user's name

Example without buttons

let userName = await this.bot.ask('What\'s your name?')

console.log(userName) // user reply for message

Styling

All elements of chat window are named with classes, so you can freely override style.

Author

Made with ❤️ by Maksymilian Tomczyk

License

This code is licensed on MIT license.