Customizing your Chat Interface using JavaScript UI Kit ---- 2 min read

In our previous product article, we talked about what all we had released in our latest product update. Our JavaScript Chat UI Kit was the most prominent roll-out in that. In this article, we will show how you can use our Channelize.io open-source JavaScript Chat UI Kit and craft a beautiful chat interface for all use-cases like online consultation & tutoring, marketplace chat, team collaboration, messaging, live chat & customer support and gaming chat. 

We’ll explore some of the UI customizations that you can achieve using our JavaScript Chat UI Kit’s pre-built variables, like:

1. Change launcher UI and position
   
2. Customize Chat Screen
   
3. Customize Font Style & Size
   
4. Modify/Translate pre-defined language strings
   
   

Getting Started

Below is the step-by-step guide for setup:

Step 1: Clone the JavaScript Sample App code from GitHub.

Step 2: Update Channelize widget file URL in your root file such as index.html.

<script src=”./dist/widget.Channelize.js”></script>

Step 3: Run below commands in the Sample App directory to install npm, build changes and start.

sudo npm install

sudo npm run build

npm start

Customization Capabilities

Change Chat Launcher’s UI and position

Chat Launcher is important to initiate and trigger conversations. Its UI can be customized to match your requirements and you can also set its position. Achieve these customizations by changing the properties of the below-mentioned variables in variables.scss file.

$ch-launcher-bottom-position: 3%;

$ch-launcher-right-position: 1%;

$ch-launcher-height: 55px;

$ch-launcher-width: 55px;

$ch-launcher-bg-color: $theme-color;

$ch-launcher-border-radius: 50%;

Customize Chat Screen

This is the screen where users will spend their maximum time while using chat. Considering this we have provided lots of customization variables that will help you easily match the layout with your needs. You can make changes like theme color, size, position and much more by changing the properties of the below-mentioned variables in variables.scss file.

$ch-conversation-window-header-bg-color: $white-color;

$ch-recent-conversation-header-font-icon-color: $space-gray;

$ch-recent-conversation-header-font-icon-hover-color: $black;

$ch-conversation-window-user-msg-bg-color: $theme-color;

$ch-conversation-window-user-msg-color: $white-color;

$ch-conversation-window-msg-bg-color: $light-white;

$ch-conversation-window-msg-color: $dark-gray;

$ch-conversation-window-composer-bg-color: $white-color;

$ch-conversation-window-composer-text-color: $dark-gray;

$ch-conversation-window-composer-font-icon-color: $theme-color;

$ch-conversation-window-composer-font-icon-hover-color: $black;

$ch-conversation-window-msg-owner-color: $dark-gray;

$ch-conversation-window-bg-color: $white-color;

$ch-conversation-width: 22%;

$ch-conv-top-position: 35%;

$ch-conv-bottom-position: 0;

$ch-conv-right-position: 24%;

Customize Font Style & Size

Change the font family of the chat interface, so it feels like yours. Achieve this by simply importing any of the Google fonts of your choice into variables.scss file. It also allows defining the font size by making changes in the variables mentioned below.

@import url(‘https://fonts.googleapis.com/css?family=Roboto&display=swap’);

$ch-body-font-family: ‘Roboto’, sans-serif;

$ch-body-font-size: 13px;

Modify/Translate pre-defined language strings

If you want to modify or translate the pre-defined language strings in the chat interface, you can do it easily from the constants.js file that contains all the LANGUAGE_PHRASES.

Final Thoughts

Hopefully, this post has inspired you to tinker with the look and feel of your chat interface in the easiest way.

Being open-source, the UI Kit is free and will provide you with capabilities to do end-to-end customizations. The complete JavaScript UI Kit is available here.

For any questions or suggestions, please reach out to us.