@cloudbot-cx/chat-frontend NPM

Cloudbot Chat Component

A web component that can be embedded in a web site to provide a support or customer services.

Introduction

This is a full featured web chat component that can be added to any web page. The component allows visitors of a web site to chat directly with a virtual assistant through an integrated web client. The web component can be customised.

Framework

Lit + Vite The framework used to build CC is Lit. Lit is a simple library for building fast, lightweight web components. At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

Tech

CC allow users to interact with the chat via both text chat and voice commands.

STT service: SpeechRecognition interface of the Web Speech API. Google Speech To Text API
TTS service: Google Text To Speech API

Note: apiKey is required for TTS service. Contact cloudbot@cloudtec.it for info

Dependencies

Service	Description
CX Chat Backend	dialoglow cx gateway

Integration

First of all you need to download component as dependency:

npm i @cloudbot-cx/<package-name>

Let’s assume that you have the following pre-existing index.html page on your web site:

<html>
    <head>
    </head>
  <body>
    <h1>Website</h1>
  </body>
</html>

Now, you want to add the Cloudbot Chat component.

<html>
  <head>
    <script type="module" src="./node_modules/@cloudbot-cx/chat-frontend/dist/bundle.js"></script>
  </head>
  <body>
    <h1>Website</h1>

    <chat-bot
      chatId="<firebaseAppId>" //unique and uneditable for a single customer (without this parameter chat cannot work)
      languageCode="en-US"
      botName="Cloudbot"
      image="https://img.icons8.com/color/344/free-bsd.png"
      welcomeMessage="Hello"
    >
    </chat-bot>
  </body>
</html>

Note: need to import fonts the bundle.js of the chat

Attributes

Below table show a series of attribute can be inserted into html component to customize some behaviour.

Name	Required	Description	Default
chatId	X	app id firebase
botName		the name of the bot inside header	cloudbot
languageCode		the language code	en-US
image		the image shown in header	Cloudbot logo
welcomeMessage		the first message sent when bot is triggered manually	Hi
errorMessage	X	message shown when an error occurred
triggerCardTitle		title of the trigger card	Benvenuto/a
triggerCardDescription		description of the trigger card	Ciao, sono l'assistente virtuale di Cloudbot
triggerCardLogo		logo shown inside trigger card (URL of the image)	cloudbot logo
triggerCardPrivacy		Privacy text on trigger card (text or html)
usertoken		Authentication token to access customer services

Multilanguage

It is possible to use bot with multi language. If you want use only a language you can insert on array language menu in remote config the language code:

languageMenu: ['it']
welcomeMessageIt: string
triggerCardTitleIt: string
triggerCardBodyIt: string
privacyCardTextIt: string

If you want use other language you must configure variables of other language

languageMenu: ['it', 'en']
welcomeMessageIt: string
welcomeMessageEn: string
triggerCardTitleIt: string
triggerCardTitleEn: string
triggerCardBodyIt: string
privacyCardTextIt: string
privacyCardTextEn: string

If you don't want to show language menu set 'languageMenuFeature' to false otherwise you must set it true.