🤖
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?
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
License
This code is licensed on MIT license.