How We Built Discord's First Web Chatbot

clyde.chat is the first real-time chatbot built for Discord. We wanted to create a solution that let our team interact with our web visitors right from our team's Discord server. We also wanted to share this project with the community, which is why clyde.chat is a completely free product for you to use today!

How clyde.chat works in real-time!

The Widget

The first challenge was to create a clean yet functional chat experience. Many chatbots are bloated and a nuisance for visitors. We wanted clyde.chat to be a simple yet effective means of communication for our web visitors.

The widget with customizable welcome messaging

The chat interface

We built the widget with React.js, and it is quickly integrated into your website with a single line of code. All of the content and web socket connections are managed through our bot application server.

The Dashboard

We wanted a simple way for users to signup for clyde.chat using their existing Discord accounts. The signup flow looks like this:

1. A user signs up with their Discord account

There is no email or password necessary. A new or returning customer can quickly sign into the dashboard using their existing Discord account.

The sign in screen

Authenticating the bot

2. A user chooses the Discord server they want to add the bot to

A user will see a list of the guilds that they can add the clyde.chat bot to based on their account's permissions. After clyde.chat is connected, they will receive a message in their Discord server from the bot saying that the integration was successful!

One-click integration into your Discord server

More info can be found using the /help command

3. A user can get the widget script tag from the dashboard

The last step to getting the bot live on your website is adding the widget script tag to your existing website. This can be copied and pasted into the head element on the page(s) you want the widget to appear.

Quick access to the widget code to integrate into your website

Chatting with Visitors

Now the widget is live on your website! When a visitor sends a chat through the widget, the bot will kick off a new thread on our Discord server. Here's an example of what a new chat interaction looks like in real time:

Real-time communication with your visitors, right from Discord!

How We Did It

Our team uses Discord.js to build our custom bot integrations. Discord's robust API allows us to interact directly with users on Discord, and even integrate other custom services like our web chat widget.

When a user visits your website after the widget is integrated, our bot server renders the React widget on your web page. It also opens up a socket connection that connects the visitor directly to your chatbot. The chatbot acts as a "middleman" and receives messages from either the web user, or from your team on Discord. It handles all of the message delivery. Multiple team members on your Discord server can even interact with the same visitor through the same socket connection!

The bot also provides details to you about where the visitor is located and their timezone, as well as other useful metadata. This is helpful if you need to change your communication or messaging for different visitor locations.

We have also created several "slash commands" that you can use to manage your bot directly from Discord such as turning the widget on and off, adding team members to your clyde.chat team, archiving chats, and much more.

Future Integrations

This is just the beginning for clyde.chat. We will be adding many new features in the future, and would love your feedback. We have created a feature request forum on the dashboard where you can ask for new features, comment and upvote other feature requests, and interact with the community. You can request new features here.

Request a feature

Comment and reply to feature requests

Custom Discord Chatbots

Using web sockets, we can create real-time communication and seamless experiences as we have with clyde.chat. The possibilities for custom integrations are endless, and Discord is an extremely powerful communication tool that is quickly picking up steam. Are you looking to build a custom Discord integration or chatbot? Our team of experts would love to learn more and help you build an incredible and cutting-edge digital experience. Please reach out to us, and we'd love to chat.