...
- Theme: Choose Light or Dark to make the window's background a light or dark color.
- Main Color: Choose a theme from the seven preset colors, or enter the hexadecimal value of the color you prefer.
- Widget Width: Choose how narrow or wide you want the window to be. The values range from 250 to 400 pixels.
- Widget Height: Choose how short or tall you want the window to be. The values range from 500 to 700 pixels.
- Rounded Corners: Choose how rounded you want the window's corners to be. The values range from 0 to 20 pixels.
You may also define what the chat window border style and the size will be when presented for customers.The chat window border style can be set as non, hidden, dotted, dashed, solid, double groove, ridge, inset, outset, initial, or inherit. All available options for the CSS border style property can be used; click here for all styles available. Along with setting the style of the border, you can set the chat window border width, in pixels (px), as well as the border color. Colors can be specified in any of the following formats: by Name, RGB code, or HEX code. For further information on colors see Colors Tutorial, a list of HTML Color Names that are supported by all browsers, RGB Color Calculator for RGB color codes and HEX Color Calculator for HEX color codes.
If no values are specified for border style, width, or color, the default settings will be assumed:
- Style = solid
- Width = 1px
- Color = black
Below are a few examples of border style formats accompanied by the chat window appearance outcome:
- 3px solid red = 3 pixels wide, solid, red border
- 5px dotted rgb(255, 0, 0) = 5 pixels wide, dotted, red border
- 1px double #ff0000 = 1 pixel wide, double line, red border
Dimensions for the chat window may be entered in either pixels or percentages, and may be made as small or as large as you wish, however there are a few recommendations for the chat size window:
- If you are using percentages for your chat window, that chat will not be displayed properly if you make it any less than 75%.
- Do not set the chat width below 400px, this can cause the containers (DIV) do not show properly all the information within them.
- Do not set the chat height below 350px. If this happens, the chat-history (area where all the chats messages are placed), will not be shown properly.
To customize a customer's chat experience, you can change the colour of the follwing items displayed in the customer's chat window:
...
...
CSS Mode
This mode allows to define a more customized configuration with the help of a web programmer. With this mode, you can:
- Download a template (a .CSS file you can open with any text editing application), which you can then modify as needed, save, and upload; or
- You can upload your own .CSS file.
| Info | ||
|---|---|---|
| ||
The customized file MUST be a .CSS file with UTF-8 encoding. |
Once the file has been created, click Browse to locate the .CSS file that has been created. Click Open to select that file and then click the Upload button. This will upload your custom .CSS file to be used for customer chat sessions.
If you wish to see the file you have uploaded, click the Download button and select in which format you wish to view the template in. It is important to note that if you wish to make any changes to your template you must create a new file and upload it. You can not edit the template at this level once it has been uploaded.
Once you are satisfied with the file you have uploaded, click Update to save and apply all changes to the customer chat windows.
...
| Info | ||
|---|---|---|
| ||
It might take a few minutes for |
...
the new |
...
style to take effect. |
...
If you do not see |
...
the new style immediately, wait 5-10 minutes before opening a chat session |
...
. |