GithubHelp home page GithubHelp logo

chat21 / chat21-web-widget Goto Github PK

View Code? Open in Web Editor NEW
90.0 11.0 70.0 12.63 MB

Chat widget built on top of Firebase/MQTT to emebd chat features into your web/mobile apps.

Home Page: http://www.tiledesk.com

License: MIT License

TypeScript 58.36% JavaScript 3.37% HTML 17.75% CSS 9.89% Shell 0.19% Dockerfile 0.06% SCSS 10.38%
livechat widget firebase angular messaging customer-support bot

chat21-web-widget's Introduction

npm version

chat21-web-widget

πŸš€ Do you want to install Tiledesk on your server with just one click?

Use Docker Compose Tiledesk installation guide

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. More information about web widget here : http://www.tiledesk.com

dialogo_widgetchat_2

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

Features

  • 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.

Prerequisites

  • Install Git
  • Install Angular CLI with npm install -g @angular/cli. More info here https://github.com/angular/angular-cli#installation
  • Create a Firebase project. Create one free on https://firebase.google.com
  • "Chat21 Firebase cloud functions" installed. Instructions:https://github.com/chat21/chat21-cloud-functions

Run Tiledesk with Docker Compose

Do you want to install all the Tiledesk components on your server with just one click? Use Docker Compose Tiledesk installation guide

Installation

  • Clone the repository from master (or use a tagged release) with command: git clone https://github.com/chat21/chat21-web-widget <YOUR_PATH>
  • Move to the downloaded project path cd <YOUR_PATH>
  • Build running: npm install

Dev configuration

Configure the environment.ts file in src/environments/. Use the Firebase configuration file from your Firebase project to correctly configure the 'firebase' section.

environment.ts

export const environment = {
  production: true,
  version: require('../../package.json').version,
  remoteConfig: false, // for performance don't load settings from remote
  remoteConfigUrl: '/widget-config.json',
  loadRemoteTranslations: true,
  remoteTranslationsUrl: 'https://<YOUR_REMOTE_TRANSLATIONS_URL>/',
  chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE
  updloaEngine: "native", // OR YOUR CUSTOM UPLOAD ENGINE
  fileUploadAccept:"*/*",
  logLevel: '<YOUR-PREFERRED-LOG-LEVEL-NUMBER>',
  firebaseConfig: {
    apiKey: '123ABC..',
    authDomain: 'XYZ.firebaseapp.com',
    databaseURL: 'https://XYZ.firebaseio.com',
    projectId: 'XYZ',
    storageBucket: 'XYZ.appspot.com',
    messagingSenderId: '123456',
    appId: "CHANGEIT",
    tenant: 'tilechat', 
  },
  chat21Config: {
    appId: 'tilechat',
    MQTTendpoint: 'mqtt://<YOUR-MQTT-ENPOINT>',
    APIendpoint: 'http://<YOUR-MQTT-API-ENPOINT>'
  },
  apiUrl: 'https://<YOUR-TILEDESK-API-URL>/',
  baseImageUrl: 'https://<YOUR-BASE-IMAGE-URL>/',
  defaultLang : 'en',
  storage_prefix : 'widget_sv5',
  authPersistence: 'LOCAL',
  supportMode: true,
};
  • logLevel: The Chat21-ionic supports 4 log levels. The order is as follows: Error < Warn < Info < Debug

  • fileUploadAccept: The Chat21-ionic allows you to manage the type of files that can be uploaded. By default, all file types are accepted.

RUN in dev

Run the app with ng serve

Prod configuration

For production installation, configure the environment.prod.ts file in src/environments/.

environment.prod.ts

export const environment = {
  production: true,
  ...
};

Build for production

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.

Build for production with : ng build --prod --base-href --output-hashing none

Deploy

Deploy to a Web Server

Copy the content of the dist folder to your Web Server (for example Apache or Nginx)

Development server

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.

Widget in action

You can see a configuration of this widget in action on 'https://www.tiledesk.com'

Deploy

Deploy to a web Server

Copy the content of the dist folder to your Web Server (for example Apache or Nginx)

Deploy to AWS S3 (Optional)

Run : aws s3 sync . s3://tiledesk-widget

Or With a different AWS Profile:

Run : aws --profile f21 s3 sync . s3://tiledesk-widget

If you use AWS Cloud Front enable gzip compression.

Run with docker

To run Chat21-ionic on port 8080 run:


curl https://raw.githubusercontent.com/chat21/chat21-web-widget/master/env.sample --output .env

nano .env #configure .env file properly

docker run -p 4200:80 --env-file .env chat21/chat21-web-widget

chat21-web-widget's People

Contributors

alessandro-giovinazzo avatar andrealeo83 avatar angular-cli avatar dariodepa avatar dariodepa75 avatar gab-95 avatar sponzillo avatar stefanodp91 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

chat21-web-widget's Issues

Widget is not appearing, but giving a lot of 400s

I tried to install web-widget alongside with tiledesk-server, tiledesk-dashboard. I published cloud functions on firebase. And I tried to go to widget location, it was just giving me blank page. I checked console. There was bunch of messages like Failed to load resource: the server responded with a status of 400 (). It was working one day. And then stopped.

Options to integrate chatbots using Dialogflow

Is it possible to have options to integrate chatbots? Probably I would like to integrate dialogflow api's with chat21. Have a chatbot to answer questions, if the bot is not able to answer, I want to handoff it to a live human agent. I think this would be a great feature for chat21.

[question] setup user to user chat (custom token authentication)

Hello Andrea.

We'd like to try your project to organize chat between users on our website. I got a bit confused about how to set up the widget to allow it. My project is on Django and I'm going to use a custom token to authenticate users in Firebase. I see some functionality related to it in the code (file auth.service.ts, function authenticateFirebaseCustomToken), but not sure how to create a proper widget configuration.

I have successfully deployed the cloud functions, created groups (using HTTP API) and created a user to user chat on iOS (derived from your demo apps). It's awesome!

Could you help me to setup the web widget for my use case (user to user chat)? Maybe you have some instructions somewhere or maybe you have some time to give me hints regarding it?

Maybe the right question should be: is it the right piece of software to use for my use case? :)

Thank you for advance!

web application on deploy missing in firebase

I have followed all directions and I was able to deploy the app.
The database, rules and functions are deployed successfully.

In the public folder I see an example web application to test chat service but I see it was not published in Firebase after deploy. How can I publish the content of the public folder to a hosted web app so I can test it?

The custom token corresponds to a different audience.

Hi guys,

We are currently getting the following error: The custom token corresponds to a different audience.

We have double checked our API details and have spoken to Google Firebase support and they are suggesting
that it could be an issue with how chat21 has integrated firebase. Does anyone have any recommendations / suggestions?

Thanks again,
Lewis

Error: firebase config is not defined. Please create your widget-config.json. See the Chat21-Web_widget Installation Page

I have tried tiledesk installation using docker-compose by following the steps in the below link, https://developer.tiledesk.com/installation/install-tiledesk-with-firebase-chat21-engine/running-tiledesk-with-docker-compose#1-run-docker-compose-services which gives me the below error,

Error: firebase config is not defined. Please create your widget-config.json. See the Chat21-Web_widget Installation Page in main.bundle.js

Any help would be highly appreciated

Regards,

npm install error

environment:
npm -v = 6.13.4
node -v = v12.16.1
OS: macOS

i've installed cloud functions , create a firebase database.

git clone git clone https://github.com/chat21/chat21-web-widget.git
npm install
and i got errors:

n=0" "--node_napi_label=node-v72"
gyp ERR! cwd /Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown --napi_version=5 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)
node-pre-gyp ERR! stack at ChildProcess. (/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:311:20)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
node-pre-gyp ERR! System Darwin 17.7.0
node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc
node-pre-gyp ERR! node -v v12.16.1
node-pre-gyp ERR! node-pre-gyp -v v0.12.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/fer/Documents/desarrollo/javascript/chat21-web-widget/node_modules/grpc/src/node/extension_binary/node-v72-darwin-x64-unknown --napi_version=5 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-pre-gyp install --fallback-to-build --library=static_library
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Globals defintions and setups

Cciao team,
Looking to run this on my desktop a couple of question if you don't mind :
On the environments.ts

  • remoteTranslationsUrl is the apiUrl are the URL for api_function deployed ? vero ?

On the utils globals.ts
BASE_LOCATION = Api URL ? ( currently https://widget.tiledesk.com/v2 )
POWERED = include the hosting file right ?

I got innumerable errors on undefined getBaseLocation function

Thanks for your help again.
Cecilio

how to config mqtt

i'm install it by source code with tiledesk-server, but i can not find mqtt server, how can i config the mqtt?

Deploy to Web Server

From the README file, it states to copy the content of dist folder to your webserver.

But there seems to be no dist folder

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.