vue-huddle-chat

Introduction

vue-huddle-chat is a VueJs component gives you a ready made interface to the HuddleAI platform that can be dropped into an existing Vue project or into a HTML page. It allows you to quickly deploy a bot to your own site.

Usage

Vue Project

If you have an existing Vue project, you can use this component as you would any other, it does require Vuex so if you already are using this, you just pass the store in and if not, you will need to install Vuex.

Install as normal with npm

npm install --save vue-huddle-chat

and then in your src/main.js file add the following prior to your new Vue() call

import VueHuddleChat from 'vue-huddle-chat'
Vue.use(VueHuddleChat, {store: store})

and in your component you can now use

<vue-huddle-chat token="97207f9a60a465ee3e9a1498c1a04301767237a81eb8d622" />

UMD Package - HTML

If you have a non-vue project you need to add the bot to, then you can use the umd package. In your html call the following scripts:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vue-huddle-chat/dist/VueHuddleChat.umd.js"></script>
<link rel='stylesheet' href="https://unpkg.com/vue-huddle-chat/dist/VueHuddleChat.css">

This will import the necessary code, next we need to create a small Vue app on your page, and import the bot. Now we can place an app tag where we want the bot to appear.

<div id="app">
  <vue-huddle-chat token="your-token-goes-here" />
</div>

Next at the end of the body content, we run a script to finish the setup.

  <script>
    var store = new Vuex.Store()
    Vue.use(VueHuddleChat.default, { store: store })
    var app = new Vue({
      store,
      el: '#app'
    })
  </script>

This will create a Vuex store, then add VueHuddleChat to vue and then run a small Vue app attached, the bot is now integrated and you can start styling to your needs.

Configuration

props

endpoint

Default: 'https://api.huddleai.com/' | Type: String

The endpoint configures where the bot will access the platform, this defaults to the standard api URL, however, if you have an on-premise install or custom configuration, you can alter it here.

token

Required: true | Type: String

You specify the token for your account here in order to get access

placeholder

Default: 'Ask me something...' | Type: String

This is the text that appears in the input box before the user starts typing.

intro

Default: [] | Type: Array

If you want to have the bot introduce themselves, then you can pass a list of messages you wish to show, for example

intro: [
  "Hi, I'm Kevin.",
  'Ask me about something interesting.'
]

introInterval

Default: 1000 | Type: Number

This is the number of milliseconds between intro messages on start.

example

Default: undefined | Type: String

If you are using an intro you may wish to simulate a message sent from the user to get a response from the server, an example could be How many visitors were there at the website yesterday?. The example question is asked at the end of the intro messages and will simulate the user asking the question thereby giving an uptodate data response.

notification

Default: false | Type: Boolean

This enables audio notifications of incoming messages to the user

notificationUrls

Default: (see below) | Type: Object

This is an object containing the mime type as the key and the url to the sound as the value. The default value is as follows:

{
  "audio/mpeg": "https://www.huddleai.com/notification.mp3",
  "audio/ogg": "https://www.huddleai.com/notification.ogg"
}