Chat: Customize chat appearanceUpdated 11 hours ago

The Appearance tab in the chat integration settings lets you control how your chat widget appears to shoppers on your store or website. You can customize the chat widget to match your brand, adjust the size and location of the chat widget, include a privacy policy, and decide how your agents' names and avatars appear in conversations.

Requirements

Available on all Helpdesk plans
Only the account owner and admins can configure the chat appearance

Note: You can only access these settings once you've already set up a chat integration.

Customize your chat's appearance

As you adjust the appearance settings for your chat integration, the live preview on the right side of the page will update to reflect each change, so you can see how each setting will look before saving. Your customers won't see your changes until you save.

From your helpdesk, click the Settings icon in the bottom-left corner.
In the menu, locate Channels, then select Chat.
Select your chat integration from the list.
Click the Appearance tab.
Adjust the settings for Brand, Layout, Privacy policy, and How your team appears to shoppers.
Preview the changes in the Chat preview on the right side of the page. Click the Outside business hours and During business hours tabs, and the Home and Conversation tabs to see your changes in each scenario.

Brand

You can adjust the visual identity of your chat widget — including the color, logo, and greeting message customers see when they open the chat — to match your store's look and feel.

Brand color

The brand color is applied to the widget header and launcher button. If the field is left blank or contains an invalid value, the widget defaults to blue.

From the Appearance tab, scroll to Brand color.
Click the color swatch to select a color, or enter a hex code to apply a specific color.
Preview your change, then click Save in the top-right corner.

Home page logo

Upload a logo to display in the header of the chat widget. You can use a PNG, JPG, or GIF file up to 500 KB in size. For the best result, we recommend using a horizontal logo with a transparent background.

From the Appearance tab, scroll to Home page logo.
Click + Add logo under Default logo. If your default logo isn't visible on a white background, we recommend also uploading an Alternative logo.
Preview your change, then click Save in the top-right corner.

Greeting

When a shopper opens the chat, they'll see your greeting message. You can set a different greeting message to appear during business hours when your team is available, and outside business hours when chat is unavailable. Each greeting is limited to 50 characters.

Note: If AI Agent is enabled for your chat integration, you won't have the option to update your greeting message here, since AI Agent makes chat always available.

From the Appearance tab, scroll to Greeting.
Enter a greeting under During business hours and Outside business hours.
Preview your change, then click Save in the top-right corner.

Layout

To customize the appearance and the position of the chat launcher on your store or website, edit the layout settings.

Launcher appearance

You can choose to display the chat launcher as an icon by itself, or the icon alongside a label. By default, the label reads "Chat with us," but you can add a custom label if you'd like. Labels are limited to 20 characters.

From the Appearance tab, scroll to Launcher appearance.
Select either Icon only or Icon and label. If you select Icon and label, a Label field appears below the options where you can add your custom text.
Preview your change, then click Save in the top-right corner.

Launcher position

Use the Position dropdown to place the launcher in one of four corners of the page: Bottom right (default), Bottom left, Top right, or Top left.

To fine-tune placement — for example, to avoid overlap with another element on your site — enter pixel values in the Move horizontally and Move vertically fields.

From the Appearance tab, scroll to Launcher position.
Use the dropdown menus to control the placement of the chat launcher.
Preview your change, then click Save in the top-right corner.

Chat window size

You can decide how much of your shopper's screen is taken up by the chat once they open it. For the best experience, we recommend the Expanded size, which allows shoppers to seamlessly browse products in your store, without navigating away from the chat.

From the Appearance tab, scroll to Chat window size.
Select either Expanded or Compact.
Click Save in the top-right corner.

Privacy policy

You can add a legal privacy disclaimer that shoppers see when they open the chat widget.

From the Appearance tab, scroll to Privacy policy.
Type your privacy policy in the rich text editor. You can add links and emoji, and use formatting options like bold, italics, and underline.
To make the disclaimer visible to shoppers, check the Show privacy policy at the start of a conversation checkbox.
Click Save in the top-right corner.

If your chat integration is configured to support multiple languages, you can also update the privacy policy per language.

Note: Gorgias is not responsible for configuring the chat to comply with privacy laws that may apply to your business. It is your responsibility to enable chat privacy disclosures, provide accurate information, and obtain consent from shoppers, as needed.

How your team appears to shoppers

Adjust How your team appears to shoppers to control how your agents' names and avatars appear to shoppers who initiate a chat with your team.

From the Appearance tab, scroll to How your team appears to shoppers.
Select the Name and Profile picture options you'd like for all agents.
Preview the change, then click Save in the top-right corner.

Was this article helpful?

Yes