Customise the look

The chat’s look is set in App settings > Appearance. Once saved, the changes reach your site and your app without a new version of your code.

• Brand colour: the chat’s main colour.
• Logo: in the chat’s header, and next to your replies when the sender shown is the App.
• Launcher: the round button that opens the chat on a website, with the default icon or your image, bottom right or bottom left.
• Header text: under the App’s name on a website, until the Contact writes. A React Native app does not show it: its header fits on one line.
• Sender shown: the first name and photo of the Member who replies, or only the App’s name.
• “Powered by” badge: your Plan says whether you can hide it.

Light or dark theme on a site

On a site, the chat takes the page’s theme, with nothing to set. It reads the theme the page names, such as class="dark" or data-theme="dark" on <html>, else the colour of its background. When the page switches theme, the chat switches with it.

Light or dark theme in an app

With React Native, the chat follows the phone’s theme. Pass colorScheme, "light" or "dark", to use your app’s instead.

import { useColorScheme } from "react-native";import { ZeanChat } from "@zean-chat/react-native";export function Chat() {  // The theme chosen in your app, here the phone’s  const scheme = useColorScheme() === "dark" ? "dark" : "light";  return <ZeanChat appKey="app_your_app_key" colorScheme={scheme} />;}

The launcher only exists on the web: in a React Native app, you open the chat with your own buttons. See Open and close the chat.