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 update any code on your site.
This article discusses how to adjust the appearance of the chat interface. Elsewhere we cover how to add chat on your site when you first get started, and how to use developer tools for advanced web chat controls.
You can either directly enter a color hexcode or you can click on the preview color square to reveal your computer’s color picker.
The header background and text will also control the color of the chat button, when your chat is minimized.
Choose to have 1) all messages left-aligned or 2) left-right opposed, with agent messages left-aligned and user messages right-aligned.
When selecting fonts, note that your font will not always be available for users, in which case fallback fonts will be displayed. Grata’s web chat will not be able to display custom fonts your website loads unless the user has that font already installed in their browser. If you want to set a custom string of fonts, select “Custom” from the drop down list to make your own list of Latin and Chinese fonts and fallback fonts separated by commas.
Adjust the font size, weight, and character spacing to further control the appearance.
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 minimized chat button or header. 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 cookie policy pop-up, or if you have fullscreen navigation menus on mobile, etc.
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.
If you choose left-aligned you will need to set a name for your user (eg. “Me”). For agent names, you can use the agent names set in Grata, you can set one name for all agents, or you setup individual and shared Agent Identities. Agent Identities are only supported in the left-right opposed layout.
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.
When minimized, web chat will display on your site as either a floating button or as a header/tab fixed to the bottom of your site. When you set the appearance of your chat button, you can choose one of thousands of Font Awesome icons, you can upload your own icon, or you can upload your own button entirely.
Select from any one of the 7,000+ icons from Font Awesome Pro. For example, search “comment” to view the chat bubble line of icons.
Font Awesome search results
Once you’ve found your icon, enter the icon name in the Grata backend. The icon preview on the left will adjust after you enter the name.
Each Font Awesome comes in light, regular, solid, and duotone styling. So the icon in our example, comments-alt, can have any one of these styles:
Another nice feature of Font Awesome fonts is that they are font files, so it’s easy to change them to any color and scale them to whatever size.
Just below the Font Awesome icon selection you’ll find controls for the color and size of your button and icon. Click on the color square to open your device’s color picker, or copy and paste a color hex code into the field. You’ll need to set a size for both desktop and mobile devices. The button corners setting lets you round the button corners from a ninety-degree square to a circle.
If you have your own icon you would like to use for your chat button, select the “upload custom icon” option for your button type. Tap the “select” button to upload your icon file as a PNG image file. You’ll be able to resize the icon and button to find a good fit. Set a size for both desktop and mobile devices.
To set the color of your button and/or button border, click on the color square to open your device’s color picker, or copy and paste a color hex code into the field. The button corners setting lets you round the button corners from a ninety-degree square to a circle.
To take full control over your button appearance, you can design and upload your own button as a PNG image file.
You will need to generate several different permutations of the button for each language, for different sizes on desktop versus mobile devices, and a set of your image with a notification for unread messages. The dimensions of your image file will be the size it displays on your site; you will not be able to resize your image from the Grata backend.
On desktop browsers, you can select 1) to use any of the button configurations above or 2) the minimized chat header, allowing you to display a short text message based on your online, offline, or busy status.
These controls allow you to precisely position the button off of the bottom right corner of the browser. 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. If you want to make position adjustments based on a specific page or an event on your site, you can use an event listener to adjust the chat position.
Optionally, you can designate any button ID or any class of buttons on your site to open Grata when a user clicks or taps on the button. We recommend you consider using Grata developer tools when you do this for the best implementation. 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.
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 are using your own button on your site to launch Grata, you can set the Grata to be hidden when agents are online until the user clicks on your button.
Use href notation for links in any of your greeting messages:
Make sure to specify whether the link should open in the same browser tab (target="_parent") or in a new browser tab (target="_blank"). If you do not set a target, the link will open in the chat window, with devastating consequences.
When your team is offline, you can choose to hide chat, display a contact form, or continue to reveal chat. Even if you choose to hide chat, you should still set an offline header and greeting. There is 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. You can set a custom header, form instructions, and message to display after submitting the form.
Some clients use the web chat window to reveal FAQ content when they are offline. If you would like to do this, set web chat to continue to reveal when your team is offline. You can use your offline message to reveal your FAQ and then the user can reply with the number or keyword of their choice. You will need to add your responses on the auto-reply page.
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.
If you want to take even more control over Grata chat on your site, you can explore using Grata developer tools for more customization options.