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


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.



When selecting font families, note that your font will not always be available for users, in which case fallback fonts will be displayed.



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 when minimized. Normally a very high z-index (e.g 10,000) will ensure the chat button is always visible. Some common exceptions are a pop-up to accept your site cookies, or if your site darkens the background for any other pop-up windows. You can set a z-index lower than any item you want to be above the chat when minimized.

Adjusting the Appearance when Minimized

Button Icon

On the frontend, the only icon that is supported currently is the comment-dots icon. The backend editor is a bit ahead of the frontend and supports any of the fun icons from Font Awesome Pro. Just enter in the name of any icon on the Cheatsheet, eg. ‘fighter-jet’, and then select normal, light, or solid styling. Search (Ctrl/Cmd + F) on the Cheatsheet for “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.



On desktop devices, you can select to use either a button or display a 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 you have agents 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 inside your business hours.

Set your header and greeting in English and Chinese.

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.