Build Discord Clone using Dead Simple Chat
Tags: javascript, webdev, discord
Published: 2023-01-19 14:18:13

> This post was originally published at https://deadsimplechat.com/blog/how-to-build-a-discord-clone-using-dead-simple-chat/

**Dead Simple Chat is a highly scale-able chat solution, using Dead Simple Chat you can easily build Chat for any use-case.**

In this blog post, we will build a Discord like Chat using Dead Simple Chat, let's get started, and the great thing about our Discord Clone is that it can be embedded on your website, unlike discord.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08s40tad5iq5bcn5bjsz.png)

A discord chat room looks like the image above. We will customise our Dead Simple Chat, Chat Room to look like the discord chatroom above.

We will customize Dead Simple Chat to look like Discord Chat, and our final Chat UI will look like the image below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yxdriix4415fh6p4fw3.png)

## Step 1: Signup for Free Dead Simple Chat Account

The first step would be to signup for a free Dead Simple Chat account. You can signup by going to [https://deadsimplechat.com/getstarted](https://deadsimplechat.com/getstarted)

After you have signed up you will be taken to the Dead Simple Chat dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx2hupiv1vopjxh8134w.png)

## Step 2: Create a Chat Room

On the dashboard click on the "Create Chat Room" button to create your first chat room.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6og9q3pivl1wga23hgw.png)

You can name your chat room anything you like and then press the save button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q2noyxkrcxa5lduabui.png)

After you press the save button you will be taken to the Chat Room Setting page, for this page you can customise the setting for your chat room.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x3libtk45c5hu8ea07y.png)

Press the "Open Button" to open the chat in a new tab

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv50jzqdjsy063q01q9w.png)

This is how our Dead Simple Chat Chat Room looks like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ha309810miv3r4foqic0.png)

Now in the next step we will customise it to look like Discord Chat Room.

## Step 3: Customizing the Chat Room to Look Like Discord Chat

Let's Customize the look and feel of our Dead Simple Chat, Chat Room and features to match Discord Chat.

### Enable Channels

Discord has channels, in Dead Simple Chat we can enable channels as well in our chat Room.

To Enable Channel Go to Chat Room Settings page, scroll down and turn on the "Sub Chat Room / Channels" Option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwnrizme3hhltuwuxmok.png)

This will result in Channels/Sub-Room tab to appear in the Settings

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8bq8ocs7dodqp7zhl7a.png)

From the Channels/Sub-Room page we can add the Channels, we have created a channel named my channel

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c75c3fc3m1u6g24od65l.png)

When we enable channels, we can see the channels list on the chat room sidebar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s03ab4i2ydp3wn4e31hc.png)

### Customizing Colors

We will update the colours to match Discord. To update colors, we will go back to our chat room settings page and then go to the Customize tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72nymz822dg1bxfkypmn.png)

We will set the background color to `#36393f` to match the Discord background color.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btcfywj8785mpua256ql.png)

We will set the sidebar color to `#2f3136` to match the discord sidebar color.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvqari4vzqrff5eh5stp.png)

We will set the text color `#f9f5f9` to match the discord text color.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhwmcu1ard0xm1x03xyb.png)

We will select the font "Open Sans" which is similar to the discord font

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xul89oi60ht0pfd5al8.png)

Now let's look at our customizations, after the customizations our chat room looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q6mmzw2ltoki3st2qoe.png)

### Customizing the sidebar to match Discord

Now we will change the sidebar to match discord, we will make the following changes:

- Make the font size smaller
- Match the hover and selected colour and add rounded corners
- Update the Channels text to "TEXT CHANNELS"
- Hide Online Users from the sidebar
- Hide the Edit profile button etc.

We will check the following options to hide the online users from the sidebar and notification icon buttons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p8l4znmoukrdj13wmwt.png)

We will scroll down and set the font size to 11 and 12 respectively.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fdsg63jtsqv7o4ckicv.png)

Our chat room looks like this after the customization.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw0ftkwibf04qcawk55f.png)

We change text Channels to "Text Channels" by going to the "Translate / Change-Text" tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzwalx32cb5o0zuxyik9.png)

Then scroll down and change "Channels" to "text channels"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksfqo00o8lc0bxpupc37.png)

We will make it upper case using CSS. Our chat room finally looks like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrbi0vb2jizxjehp81qw.png)

There are still white lines in the sidebar, we will use custom CSS to make some final touches to the sidebar.

Here is the custom CSS that we will use

```css
.sidebar hr {
    display: none;
}


.sidebar .vue-avatar--wrapper {
    display: none !important;
}

.profile-section {
    padding: 20px;
    border-bottom: 2px solid #202225;
    
}

.profile-section .column {
    position: absolute !important;
    margin: 20px;
    top: 10;
    left: 10;
}

.channelsHeading {
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #919396 !important;
    
}

.activeChannel {
    background-color: #42464d !important;
    padding: 5px;
    border-radius: 10px;
    margin-top: 10px;
    border-radius: 5px !important;
}

.channelsList {
    padding-left: 12px;
    padding-right: 12px;
}
```
After apply the Custom CSS our chat room will look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9z0ip45ymsn05tseopq.png)

### Customizing Chat Messages to Match Discord

We will use some custom CSS to customise the font-size, hover and background colours of the chat message.

```css

.message-timestamp {
    font-weight: 600;
    font-size: 11px;
    margin-left: 10px;
    
}

.message-username {
    font-weight: 400;
    font-size: 16px;
}

.markdown-body {
    color: #bcbbbe !important;
    font-size: 14px;
}


.likeReactionContainer .likeReactionButton {
    background: #3d4148 !important;
}

.likeReactionContainer .likeReactionButton:hover {
    background: #40444b;
}

.deleteMessageButton {
    background: #3d4148 !important;
    color: #808080 !important;
}

.replyMessageButton {
    background: #3d4148 !important;
    color: #808080 !important;
}

```

After apply custom CSS our Chat Room looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rj4s7iwtwxbxd10ki4v.png)

### Customizing the text area

We will customize the bottom text area to match discord. In the chat room settings we will set the Text Area Background and Border Color to `#36393f`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4iqrr50wuz9zruhpup8.png)


We also want to hide the send button, we will hide it using the following custom CSS code.

```css
.textarea-div button {
    display: none;
}
```
And our chat room looks like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l8ls5lmd3ai185fbqbe.png)

### Complete Custom CSS Code

Here is the complete custom css code, you can paste all the custom css under Chat Room Settings -> Customise and then scroll down to the Custom CSS text area as shown in the image below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fsykuedmeknsdwdos1u.png)

```css
.sidebar hr {
    display: none;
}


.sidebar .vue-avatar--wrapper {
    display: none !important;
}

.profile-section {
    padding: 20px;
    border-bottom: 2px solid #202225;
    
}

.profile-section .column {
    position: absolute !important;
    margin: 20px;
    top: 10;
    left: 10;
}

.channelsHeading {
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #919396 !important;
    
}

.activeChannel {
    background-color: #42464d !important;
    padding: 5px;
    border-radius: 10px;
    margin-top: 10px;
    border-radius: 5px !important;
}

.channelsList {
    padding-left: 12px;
    padding-right: 12px;
}

.message-timestamp {
    font-weight: 600;
    font-size: 11px;
    margin-left: 10px;
    
}

.message-username {
    font-weight: 400;
    font-size: 16px;
}

.markdown-body {
    color: #bcbbbe !important;
    font-size: 14px;
}


.likeReactionContainer .likeReactionButton {
    background: #3d4148 !important;
}

.likeReactionContainer .likeReactionButton:hover {
    background: #40444b;
}

.deleteMessageButton {
    background: #3d4148 !important;
    color: #808080 !important;
}

.replyMessageButton {
    background: #3d4148 !important;
    color: #808080 !important;
}

.textarea-div button {
    display: none;
}
```

## Conclusion

We have updated the Dead Simple Chat, Chat Room to match the look and feel of Discord.

Discord Cannot be Embedded on your website, whereas with Dead Simple Chat, you can embed it on your webpage.

Here in this example, we have used the pre-built interface from Dead Simple Chat, but Dead Simple Chat also offers the Chat SDK, using with you can integrate chat into your own custom chat ui.

You can read our SDK Docs here: https://deadsimplechat.com/developer/