Using CDN

A BotUI page requires following files. You can use these links directly in your page.

// required for basic layout

// default theme - you can create your own theme

// Vue - BotUI requires Vue to be present in page

// BotUI - main file

NPM Install

npm install botui --save

And include the files in build folder according to your setup.

Files you would need are:


Using Webpack

In webpack or rollup, you'll also need to import Vue.

import Vue from 'vue'
import BotUI from 'botui'

const botui = BotUI('my-botui-app', {
  vue: Vue // pass the dependency.

Make sure to use the minified version of Vue. Full version produces errors for some reasons.

You can add an alias in your webpack config like this:

module.exports = {
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.min.js',

Local Download

You can download the latest files from Github repo and link them to your project.

All the required files are in build folder. But you still have to add Vue, either via CDN or local script.

A bare-bone page with all the required files should look like this:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./botui/build/botui.min.css" />
    <link rel="stylesheet" href="./botui/build/botui-theme-default.css" />


    <script src=""></script>
    <script src="./botui/build/botui.min.js"></script>

bot-ui Tag

<bot-ui> tag is where the magic begins.

After you've linked all the required files in the page. Now you can proceed to add <bot-ui> tag where you want the bot to appear in your page.

For example:

<div id="my-botui-app">

Now BotUI will populate #my-botui-app element with all the required DOM. i.e: You'll see your bot here.

Initiate BotUI

After you've added the <bot-ui> to your markup, its time for the last step of installation.

var botui = new BotUI('my-botui-app');

BotUI should a global variable in the page if you've included all the required files correctly.

Pass the id of the element which has the <bot-ui> tag.

That's it. now you can start adding messages and showing actions.