February 08, 2017 - 09:39 by David Niki

Changing Universal Chat's Looks

You may change the way Universal looks to make it fit your site seamlessly. You may choose from preset themes, modify individual element colors or apply your custom css. This post shows you how, from simple to advanced.

Getting Started

Login to your admin panel, and open the Customize page from the left menu.

This page has two tabs: "Color and Theme" and "Behavior"

Universal Chat - Layout customization

Changing the Layout

Company Info

In the Company Info section, you can set your company name and choose an icon. This is the same information you entered in the registration wizard, and you can change it here.

The icon is placed on the button users press to initiate the chat. It is recommended not to change the default icon, or if you do choose a picture that resembles chatting to your users. Otherwise they could miss it and never click it.

Themes

While the layout of Universal can be changed to any design you like, there are some preset themes which offer a good layout view in a few clicks.

Preview

You may open the chat window and see the theme or color changes immediately as you apply them. Just press on the chat button to open it. This chat window is in "test mode" so it will not actually send you anything. But you can type in it and see the automatic reply. This is good if you want to customize the look of the chat box texts.

Universal Chat - Choosing Themes

Colors

You may modify the color of the individual elements of the chat window. It is recommended to have the chat window open so you can see the changes immediately.

If you want to revert to the default colors, just empty the color box. You may also reset the theme by choosing "Default" from the list of themes.

Custom CSS

Universal's layout can be fully customized. If you like to tweak the layout further, you can do it from this section. Note that you must be familiar with CSS to do this successfully.

Changing the Behavior

Besides the UI, you can also control how Universal behaves on your site, e.g. will it open in full screen mode or windowed? Where is it positioned? etc.

These and more settings are controlled on this page under the behavior tab. Note that you must save your changes before they will take effect.

Universal Chat - Customizing behavior

Max operator profiles

Universal shows the profile pictures of the latest three operators who responded to clients. By default, this setting is showing 3 profiles but you may change it to 2 or 1.

This setting is useful in case you do not want to expose the real profile picture of your operators and are using general icons. In this case you could limit this to a single icon.

To change the operator images or names, you must refer to the Operators page and set it individually for each operator

Backdrop

If enabled, it will fade the page in the background so that more attention is drawn to the chat window. You may disable this, which is better if you want users to keep working on the chat simultaneously.

Full height

The chat window will expand and cover the entire left side of the screen if this feature is enabled, which is better to track the chat conversation. Disabling this will show a small window instead, which is better for seeing the page's contents

Screen position

Universal allows you to place the chat start icon anywhere you like.

By default, this icon appears on the bottom right of the screen, but you may drag the icon around in the box, which resembles your screen. The icon will be displayed in a similar position as your page is rendered.

You may track the position values below the "Screen position" label, and you can easily restore the position by pressing the "Reset" button.