How the chat widget looks and behaves is set in the chat inbox. Go to Settings → Inboxes, click Manage on your chat widget inbox, make your changes and click Save at the top right. The preview on the right of the page shows the result.
The widget has to be on your store first. See How to add the chat widget to your Shopify store.
Branding
- Logo: a PNG, JPG or GIF shown in the chat window.
- Widget color and Widget gradient color: the colors of the chat icon and the chat window.
- Chat icon: click Change icon to pick another icon or upload your own. Your own icon has to be a square SVG of 1 MB or less.
- Widget bubble position: Left or Right.
- Widget bubble type: Standard is the round icon alone. Expanded bubble shows the icon with a text next to it.
- Widget bubble launcher title: the text on the expanded bubble, "Chat with us" unless you change it. It only shows when the bubble type is Expanded bubble.
- Widget z-index: raise the number if another element on your store covers the chat icon.
- Widget Y offset (pixels from bottom): moves the icon up, for example above a sticky add-to-cart bar.
Texts and language
The widget has two kinds of text.
- Texts you write: Inbox name (the title at the top of the chat window), Welcome heading and Welcome tagline in the Copywriting card, the Welcome message in the Features card, the Unavailable message for visitors in the Business hours card, and the message and field labels of the Pre-chat form. They are shown as you wrote them, in one language.
- Built-in texts: buttons, the status line ("We are online") and form hints. Commslayer translates these and they can't be edited. They follow the language of the storefront page the visitor is on. If Commslayer doesn't have that language, the widget uses the language set under Settings → Account settings → Site language.
The prompt that asks a visitor for their email ("Give the team a way to reach you." and "Get notified by email") is a built-in text in your Site language.
What isn't possible
- Fonts and custom CSS. The chat window has no font setting and doesn't take the fonts or styles of your theme.
- The size of the chat icon. There is no size setting.
- Dark mode. There is no dark mode setting.
- Moving the icon sideways. Only left or right, plus the distance from the bottom.
- Editing the built-in texts, including a formal or informal form of address.
- A different widget per market or language. A store shows one chat widget on every page of the theme. To hide it on some pages, see How to hide the chat widget on specific pages.
- Different quick help links per page. The same links show everywhere.
To pause the widget, switch off Commslayer chat widget under App embeds in your Shopify theme editor and click Save. Your inbox and its conversations stay as they are.
You can also hide the chat icon and open the chat from your own link or button. See How to hide the chat icon and trigger the chat with a link or button.