NAV Navbar
JavaScript

Introduction

BotStar's Website Chat Plugin ("widget" for short) provide the easiest way for your website to open engagement channel with your visitor.

Installation

var BotStar = {
  appId: "APP_ID"
};

!function(t,a){var e=function(){(e.q=e.q||[]).push(arguments)};e.q=e.q||[],t.BotStarApi=e;var n=function(){var t=a.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.botstar.com/embed/bundle.js";var e=a.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)};t.attachEvent?t.attachEvent("onload",n):t.addEventListener("load",n,!1)}(window,document);

To get the widget to appear on your web app, simply copy and paste the snippet below before the </body> tag on every page where you want the widget to appear for website visitors.

Configuration

var BotStar = {
  appId: "APP_ID", // required
  mode: "livechat" // optional: "popup" | "inline" | "fullpage"
};

Once you have installed widget on your site, you should see the launcher in the bottom right of your screen.
You may now want to tailor how the widget appears on your site by changing mode attribute.

Inline Mode

<div class="chatbot-container" style="height: 100%"></div>

Inline mode requires one specific HTML element to be existed on your page.

inline mode

<div class="chatbot-container" style="height: 500px"></div>

By default, the element .chatbot-container will try to take up available space of its HTML parent element.
You can also specify fixed height to the .chatbot-container element, example:

JavaScript API

Methods

BotStarApi('open')

BotStarApi('open');

This will show the chat window.

BotStarApi('close')

BotStarApi('close');

This will hide the chat window if it is open. It will not hide the widget launcher.

BotStarApi('update', updateData)

BotStarApi('update', {
  user_id: "UNIQUE_USER_ID",
  name: "Your User Name",
  email: "your@user.email"
});

Calling the update method with a JSON object of user details will update those fields on the current user.
Learn more about available attributes in updateData in User Data Attributes section.

BotStarApi('onOpen', onOpenListener)

BotStarApi('onOpen', function () {
  // Do something when chat window opened
});

When we show the chat window, you can hook into the event. This requires a function argument.

BotStarApi('onClose', onCloseListener)

BotStarApi('onClose', function () {
  // Do something when chat window closed
});

When we hide the chat window, you can hook into the event. This requires a function argument.

Attributes

Configuration Attributes

Attribute Type Description
appId string Your bot's ID
mode string Display mode

User Data Attributes

Attribute Type Description
user_id string Unique ID for your user
email string Associated email on your user account
name string Name of your user
first_name string Specific your user's first name
last_name string Specific your user's last name
avatar string Avatar/profile image of your user
tags array of string Additional tag for your user. Notice: it will replace current tags of chat user in BotStar record

Custom User Attributes

You can also include pre-defined attributes from "Manage User Attributes" in your bot's Audience page, respectively.

custom attributes