A modern chat support application with Slack integration.
git clone https://github.com/Designveloper/dsv-chat-support
cd dsv-chat-supportCopy the example environment file and update it with your secrets:
cp .env.example .envEdit .env and fill in your configuration:
# Database
DB_HOST=your-db-host
DB_PORT=your-db-port
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password
DB_NAME=your-db-name
# Slack configuration
SLACK_CLIENT_ID=your-slack-client-id
SLACK_SIGNING_SECRET=your-slack-signing-secret
SLACK_REDIRECT_URI=your-slack-redirect-uri
# JWT signing key
JWT_SECRET=your-jwt-secretTo enable Slack integration:
Create a Slack App
- Go to Slack API: Your Apps and click "Create New App".
- Choose "From scratch" and give your app a name and workspace.
Configure OAuth & Permissions
- Add the following OAuth scopes:
channels:historychannels:managechannels:readchannels:joinchat:writechat:write.customizeusers:readusers:read.emailcommands
- Set the Redirect URL to:
(Replace with your own backend UR if self-hosting.)
https://chat-support-server.onrender.com/slack/oauth_redirect
Enable Event Subscriptions
- Go to the Event Subscriptions tab in your Slack app settings.
- Enable events.
- Set the Request URL to:
(Replace with your own backend URL if self-hosting.)
https://chat-support-server.onrender.com/slack/events
Get your credentials
- Copy the Client ID and Signing Secret from your Slack app settings.
- Add them to your .env file:
SLACK_CLIENT_ID=your-client-id SLACK_SIGNING_SECRET=your-signing-secret SLACK_REDIRECT_URI=https://<your-domain>/slack/oauth_redirect
Connect Slack in the Dashboard
- After running the app, log in and use the dashboard to connect your Slack workspace and select a channel for notifications.
For more details, see Slack API documentation.
This project uses Docker Compose to run both the frontend and backend services.
Make sure Docker and Docker Compose are installed on your machine.
docker-compose up --build- The frontend will be available at http://localhost
- The backend will be available at http://localhost:3000
The backend service uses environment variables from your .env file. Ensure all required variables are set.
To stop the running containers:
docker-compose downTo embed the chat widget on your website, follow these steps:
Place this script tag in the <head> section of your HTML file (e.g., index.html):
<script
src="https://chat-support-7j2g.onrender.com/chat-widget.js"
async
></script>Replace the
srcURL with your deployed server address if self-hosting.
Insert the following custom element where you want the chat widget to appear, replacing your-widget-id with your actual widget ID:
<chat-support-widget widgetid="your-widget-id"></chat-support-widget>You can find your widgetid in your workspace settings.
After adding both code snippets, check your website to ensure the chat widget appears.
If you encounter any issues, please contact our support team.
Open an issue or contact the maintainers for support.