Chat21-web-widget is a Free Live Chat Widget built on Firebase with Angular5 that lets you support and chat with visitors and customers on your website.
With Chat21-web-widget you can:
- Invite your website visitors to share feedback and suggestions to better understand their needs.
- Answer questions from website visitors instantly to increase trust
- Add a code snippet to your website easly
- It's a HTML5 widget built with Google Firebase, Angular5 and Bootstrap
- Send a direct message to a preset user
- Receive realtime support from your team
- Form to enter the chat sentiment
- Configure the widget with company logo and colors
- Chat21 Web Widget is free and open source.
- Install git:
https://git-scm.com/book/id/v2/Getting-Started-Installing-Git
- Install Angular CLI with
npm install -g @angular/cli
. More info here https://github.com/angular/angular-cli#installation - A Firebase project. Create one free on
https://firebase.google.com
- "Chat21 Firebase cloud functions" installed. Instructions:
https://github.com/chat21/chat21-cloud-functions
- Clone the repository with :
git clone https://github.com/chat21/chat21-web-widget <YOUR_PATH>
- Move to the downloaded project path
cd <YOUR_PATH>
- Compile the project with
npm install
Copy this code into your html pages:
<app-root preChatForm tenant='' recipientId='' projectid='' userId='' userEmail='' userPassword='' userFullname=''></app-root>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/inline.bundle.js"></script>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/polyfills.bundle.js"></script>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/scripts.bundle.js"></script>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/styles.bundle.js"></script>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/vendor.bundle.js"></script>
<script type="text/javascript" src="https://chat21-web.firebaseapp.com/main.bundle.js">
</script>
info passing variables:
-
preChatForm , if exist enable form email and fullname
-
recipientId
-
projectid
-
userId
-
userEmail
-
userPassword
-
userFullname
-
chatName , i.e.: TileDesk
-
poweredBy , i.e.:
<a target="_blank" href="http://www.chat21.org/">Powered by <b>TileDesk</b></a>
-
lang , (optional) with this configuration it is possible to force the widget lang. The widget will try to get the browser lang, if it is not possible it will use the default "en" lang
-
Install and configure the webapp chat for agent here : https://github.com/chat21/chat21-ionic
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
To see this widget in action you can go on 'http://chat21.org'