@cloudbot-cx/chat-frontend

v2.0.2-carabinieri

Published

2 months ago

Chatbot custom

Downloads

0High
0Medium
0Low

va-cloudbot

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 [email protected] 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.

languageMenuFeature: boolean

Remember: if you don't set multilanguage variables the bot use variables passed as props in index.html

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme