- Change launcher UI and position
- Customize Chat Screen
- Customize Font Style & Size
- Modify/Translate pre-defined language strings
Table of Contents
Below is the step-by-step guide for setup:
Step 2: Update Channelize widget file URL in your root file such as index.html.
Step 3: Run below commands in the Sample App directory to install npm, build changes and start.
sudo npm install
sudo npm run build
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.
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.
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.
$ch-body-font-family: ‘Roboto’, sans-serif;
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.
Hopefully, this post has inspired you to tinker with the look and feel of your chat interface in the easiest way.
For any questions or suggestions, please reach out to us.