Customizing Web Chat for your Site

 

The Grata backend has dozens of ways to precisely control how chat appears and behaves on your website. You can change the appearance of your chat at anytime without having to change the code snippet you installed on your site.

Adjusting the Appearance of the Chat Window

Colors

You can either directly enter a color hexcode or you can click on the preview color square to reveal your computer’s color selector.

 

Header background, Header text

The header background and text will also control the color of the chat button, when your chat is minimized.

 

Fonts

When selecting font families, note that your font will not always be available for users, in which case fallback fonts will be displayed. If you have custom fonts installed on your website, select “Custom” from the drop down list. You can make your own list of latin and Chinese fonts and fallback fonts separated by commas.

 

Z-index

Z-index controls whether one object appears above or below another object on your site.  Overlapping elements with a higher z-index cover those with a lower one. Grata’s z-index setting controls the height of the chat button or header when the chat is minimized. Normally a very high z-index (e.g 10,000) will ensure the chat button is always visible. However, you might want the chat button to appear under a pop-up to first accept your site cookies, or if your site darkens the background for any other pop-up windows, or on mobile, if you have fullscreen navigation menus, etc. Set a Grata z-index lower than any item you want to be above the chat button or header.

 

URL tracking

If you are using URL tracking elsewhere in Grata, set your web chat channel parameter here. Use one of the five UTM parameters or use “other” to specify your own string of parameters and values that are appended to any link sent in web chat.

Adjusting the Appearance when Minimized

Button Icon

For your button icon, select any of the thousands of icons from Font Awesome Pro. Type the name of any icon, eg. ‘comment-alt-lines’, and then select normal, light, or solid styling. To find icons, search at the top of the Font Awesome page or use your browser search (Ctrl/Cmd + F) on the Cheatsheet. Search “comment” to view the chat bubble line of icons.

 

Buffer X/Y

These controls allow you to precisely position the button. Make sure you consider all the pages of the site, especially if your site uses a back-to-top button, which may only be visible after you’ve scrolled down on a page.

 

Display

On desktop devices, you can select to use either a button or the minimized chat header, allowing you to display a short text message based on your online, offline, or busy status.

Setting the chat interface language

By default, Grata displays the chat interface in English or Simplified Chinese based on the user’s web browser language preference. If you have an English-Chinese language site, you probably the chat interface to match the language of your site. To do this, tell us either your default language and the language parameter in your URLs (eg. “/en_US/”) or the cookie you use to set the user’s language.

 

Setting Online, Offline, and Busy Behaviors

Online Appearance

By default, chat will display on your site whenever agents are logged into Grata. You can also set regular operating hours on the Settings page so chat is only revealed when agents are logged in AND you’re within your business hours. Set your header and greeting in English and Chinese.

 

 

If you wish to use a custom button on your site to launch Grata, you can set the Grata chat button/header to be hidden when agents are online. If this setting is selected, you will see a new row to enter information about your custom button. Enter either a unique button ID or unique button class you will use to launch Grata from your site. On click of a matching button ID or button class, Grata will launch the chat window. Once a chat has been initiated, the Grata chat button will display on all pages of your site so the user doesn’t lose their conversation as they navigate across pages.

Offline Behavior

When your team is offline, you can choose to either hide the chat bar or display a contact form. Even if you choose to hide the chat bar, you should still set an offline header and greeting. We have a five-minute buffer to prevent abruptly hiding chat on a user who might be in the middle of typing a message to your team when you hit your offline hours. We can update your header status to offline at the right time, while still allowing that user to quickly finish their message and get in a chat. Users who are in an active chat will still be able to chat past your offline hours until the agent closes their chat and logs out.

If you choose to use the offline contact form, you must set an email address which we will use to forward all offline messages to.

Busy Behavior

If you set a waitlist capacity level on your Grata Settings page, you can use this setting to hide your web chat. For example, if your capacity is set to ten, then whenever you reach ten or more users in your waitlist, we will hide the chat on your site to prevent users from having a bad experience. As with the Offline Behavior, we have a five-minute buffer for anyone that has already clicked on your chat so that they don’t have the window disappear on them while they’re typing.