@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
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
usertoken		Authentication token to access customer services
triggerCardPrivacy		Text for privacy disclaimer	Cliccando su “Inizia” accetti la no....
parentName	X	Agent parent name