xatkit-chat-widget

Chat web widget for Xatkit

Usage no npm install needed!

<script type="module">
  import xatkitChatWidget from 'https://cdn.skypack.dev/xatkit-chat-widget';
</script>

README

xatkit-chat-widget

Build Status npm

A React component to embed Xatkit chatbots in websites.

Installation

npm

npm install --save xatkit-chat-widget

yarn

yarn add xatkit-chat-widget

Usage

Using default values:

import {renderXatkitWidget} from 'xatkit-chat-widget'
import 'xatkit-chat-widget/lib/xatkit.css';

renderXatkitWidget();

Your HTML page should include:

<div id="xatkit-chat"></div>

Default Xatkit Widget

Using custom values

import {renderXatkitWidget} from 'xatkit-chat-widget'
import 'xatkit-chat-widget/lib/xatkit.css';

renderXatkitWidget(args);

Using the bundle directly in your HTML page

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My title</title>
    <link href="./assets/xatkit.min.css" rel="stylesheet">
</head>
<body>
<div id="xatkit-chat"></div>
<!-- <div id="my-id"></div> -->

<script src="assets/xatkit.min.js"></script>
<script>
   xatkit.renderXatkitWidget();
  //xatkit.renderXatkitWidget(args);
</script>
</body>
</html>

API

Methods

  • renderXatkitWidget:

    • Renders the Xatkit chat widget using custom parameters.
    • Parameters:
      • args: an object that holds the widget configuration. The structure of the object is the following:
{
   server,
   username,
   widget: {
      title,
      subtitle,
      startMinimized,
      placeHolders:{
         sender,
         buttons
      },
      images:{
         ProfileAvatar,
         launcherImage
      }
   },
   location:{
      hostname,
      url,
      origin
   },
   storage:{
      location,
      autoClear
   }
}
Parameter Type Required Description Default Value
server String NO The location of the Xatkit server to connect the component to (this URL must be the URL of the ReactPlatform socket.io endpoint) "http://localhost:5001" (the default location of the ReactPlatform's socket.io server )
username String NO The name of the user currently conversing with the bot 'username'
elementId String NO The identifier of the DOM element to attach the component to. 'xatkit-chat' (this means that you need to have a <div id="xatkit-chat"></div> element in your DOM)
widget.title String NO The title of the bot's widget 'Xatkit Chat'
widget.subtitle String NO The subtitle of the bot's widget 'Test your Xatkit bot here!'
widget.startMinimized Boolean NO A flag telling whether the bot should start minimized false
widget.placeHolders.sender String NO The place holder text in the input field when no input is provided "Type a message"
widget.placeHolders.buttons String NO The place holder text in the input field when quick buttons are provided 'Choose an option'
widget.images.profileAvatar String NO The URL of the image to display next to bot messages
widget.images.launcherImage String NO The URL of the image to use in the launcher drawing
location.hostname String NO Custom hostname of the web page loading the widget The result of location.hostname
location.url String NO Custom URL of the web page loading the widget The result of location.href
storage.location String NO Storage location of the user session. The possible values are local for localStorage and session for sessionStorage
storage.autoClear Boolean NO A flag telling wether to clear the session after reloading the page false

Notes: