ICR Styling Tab (ICR v1.0)

Here you can define settings relating to the chat window, such as displaying a logo or adding background, text, or chat message colors.

From the Styling tab, you can define the border and the size of the chat window that is presented to your customers.

To define the size and color of the border use HTML5 hex code. You may enter the dimensions for the window in either pixels or percentages. You may make the dimensions 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 (an area where all the chats messages are placed), will not be shown properly.

There are two styling options for your chat windows: Simple and Advanced.

If you wish to use the Simple styling mode, select that option. From here you can customize what color will be used for certain aspects of the chat window.

To customize a customer's chat experience, you can change the color of the following items displayed in the customer's chat window:

• Chat thread background color – Select a color from the drop-down menu; this color will appear as the background color of the client's chat page.
• Agent message background color – Select a color from the drop-down menu; this color will appear as the background color in the Agent's message bubble.
  
  
  
  

If you wish to use the Advanced styling mode, select that option. The advanced styling option will allow you to create your own configuration of a customer chat window.

The Advanced settings allow for any web programmer to create a custom CSS file to define what the website chat session will look like from the customer's point of view. The file can be created in any text editing application, such as Notepad, but must be saved as 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 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.

Note: It MAY take a few minutes for your new styling to take effect. If you do not see your new styling right away, try opening a chat session in 5-10 minutes.

To return to the ICR Home page, where all your ICR’s are contained, click the View all ICR’s link located on the left side of the Update button.