tiledesk/tiledesk-dashboard repository overview

⁠Quick Reference

• Maintained by: Tiledesk⁠
• Where to get help: Tiledesk Community Forum⁠ | Tiledesk Community Discord Server⁠
• Documentation: Tiledesk Deployment Code Starting⁠ |Tiledesk Developer Hub⁠

⁠Tiledesk Introduction

Tiledesk is the full-stack Open Source Live Chat platform with built-in Chatbots written in Node.js and Express. Build your own automated customer support with a multi-channel platform for Web, Android and iOS. Tiledesk supports also WhatsApp for Business, FB Messenger, Telegram and many more channels...

Tiledesk has been designed to be open source since the beginning. We actively worked on Tiledesk to create a totally new, first class customer service platform based on instant messaging.

This is the repository dedicated to Tiledesk Dashboard for admins and agents.

Tiledesk dashboard⁠, as well as all other components of the solution, are available on GitHub⁠ under MIT licence.

Main components

• Web Widget
• iOS Widget API (work in progress)
• full iOS App
• full Android App
• Tiledesk Dashboard (this repo)
• All the chat components are available thanks to the Chat21 open source project, also available on GitHub⁠.

Please find below the instructions to setup the environment.

Feel free to ask for support on Tiledesk website⁠, our [Community Forum] or Discord official server⁠.

⁠Tiledesk Dashboard Features

• Angular 5.0
• Firebase Aut
• Firebase Database CRUD (Firestore & Realtime DB)
• MongoDB CRUD

⁠Prerequisites

• Install Node and NPM (https://nodejs.org/en⁠)

• Install angular-cli v7.3.5 with npm install -g @angular/[email protected]

• A Firebase project (https://firebase.google.com⁠)

• tiledesk-server installed and running (https://github.com/Tiledesk/tiledesk-server.git⁠)

⁠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⁠

⁠Install from source code

Install the latest stable release. Check on Github page the last release under the Releases tab and then run

• git clone https://github.com/Tiledesk/tiledesk-dashboard.git --branch <LATEST-RELEASE-VERSION>

• cd tiledesk-dashboard

• npm install

⁠Dev configuration

You can put your API URL and the other settings directly in the environment.*.ts if remoteConfig is set to false or in the dashboard-config.json if remoteConfig is set to true.

An example of the configuration of the environment.ts file in src/environments/

⁠environment.ts

export  const environment = {

	production: false,

	remoteConfig: true,

	remoteConfigUrl: "/dashboard-config.json",

	VERSION: require('../../package.json').version,

}

⁠dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",

CHAT_BASE_URL: "https://<YOUR_CHAT21_IONIC_URL>/chat",

testsiteBaseUrl: 'http://localhost:4200/assets/test_widget_page/index.html',

wsUrl: 'ws://' + window.location.hostname + '/ws/',

	firebase: {

		apiKey: "123ABC..",

		authDomain: "XYZ.firebaseapp.com",

		databaseURL: "https://XYZ.firebaseio.com",

		projectId: "XYZ",

		storageBucket: "XYZ.appspot.com",

		messagingSenderId: "123456"

	}

};

⁠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: false,

	remoteConfig: false,

	VERSION: require('../../package.json').version,

	...

	// same as in the above "dashboard-config.json"
	// note: for Firebase settings you can use a different firebase project to isolate environments
}

⁠Build

Run ng build --prod --base-href ./

⁠Deploy

⁠Deploy to a Web Server

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

⁠Deploy on AWS CloudFront and AWS S3

aws s3 sync ./dist/ s3://tiledesk-dashboard/dashboard

aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*

⁠Run with docker

To run Tiledesk-dashboard on port 4500 run:

curl https://raw.githubusercontent.com/Tiledesk/tiledesk-dashboard/master/.env.sample --output .env

nano .env #configure .env file properly

docker run -p 4500:80 --env-file .env tiledesk/tiledesk-dashboard

⁠Run with npm

To run Tiledesk-dashboard with npm:

UNDER DEVELOPMENT

curl https://raw.githubusercontent.com/Tiledesk/tiledesk-dashboard/master/.env.sample --output .env

nano .env #configure .env file properly

npm install -g @tiledesk/tiledesk-dashboard

tiledesk-dashboard

⁠Brand

Edit the file brand.json in the folder src/assets/brand/ or load an external json by adding in environment.*.ts (or in the dashboard-config.json if remoteConfig is set to true) brandSrc :"https://<YOUR_BRAND_JSON>/ to customize:

• company name,

• logo images,

• navigation,

• contact email and more

Note: enable CORS if brand json is loaded from a different domain

⁠dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",

...

brandSrc :"https://<YOUR_BRAND_JSON>/",

...

};

Edit the file _variables.scss in the folder src/assets/sass/md/ to customize the colors

⁠Load external scripts

Load external scripts by adding in environment.*.ts (if remoteConfig is set to false or in the dashboard-config.json if remoteConfig is set to true) the key globalRemoteJSSrc with value your scripts separated by commas

⁠dashboard-config.json

widgetUrl: "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",

botcredendialsURL: "https://<YOUR_BOT_CREDENTIALS_URL>",

SERVER_BASE_URL: "https://<YOUR_TILEDESK_SERVER>/",

...

globalRemoteJSSrc :"https://<YOUR_CUSTOM_SCRIPT_1>, https://<YOUR_CUSTOM_SCRIPT_2>",

...

};