Manage appearance in CRM.

Appearance controls logo and avatar, subtitle, launcher icon or image, curated self-hosted fonts, light/dark palettes, colors, header treatment, corners, shadows, panel size and desktop/mobile placement. Match system follows the visitor’s operating-system preference. Brand color generates supporting colors; advanced controls let you override them. Contrast notices identify difficult-to-read text.

1. 01

   Choose an origin

   Select a registered public HTTPS website and Find logo and colors.

2. 02

   Review suggestions

   Choose a suggested logo and color. Detection reads public HTML, metadata and a limited number of stylesheets; it does not run website JavaScript. Incomplete detection is expected on some sites.

3. 03

   Apply to draft

   Apply the selected suggestions, adjust them manually and review desktop/mobile fixture states. Nothing is published automatically.

• Save draft keeps editing changes private. Publish style creates an immutable version.
• Select Use as the default style when publishing to change what normal installations load. Other named styles require their Style ID.
• Restore a published version creates another published version; it never rewrites history.
• Published changes appear on the next page load or PeopleTideChat('update'). Appearance refresh preserves messages and unsent text.
• Content and Display use Save chatbot. Pause, archive and origin changes are operational settings and take effect on new requests.

Brand styling stays in CRM. Website code may select a published style belonging to this chatbot, choose a theme mode, and override placement or launcher visibility. Runtime overrides win over CRM style placement. An unavailable style falls back to the published default and emits STYLE_UNAVAILABLE. CRM page exclusions always win over show().

window.PeopleTideChat = window.PeopleTideChat || function () {
  (window.PeopleTideChat.q = window.PeopleTideChat.q || []).push(arguments);
};
PeopleTideChat('update', {
  style_id: 'STYLE_ID_FROM_CRM',
  alignment: 'left',
  horizontal_padding: 24,
  vertical_padding: 24,
  z_index: 10000,
  theme_mode: 'dark'
});

Arbitrary CSS and custom HTML are not supported. Do not query the shadow root, override internal classes or replace the widget’s DOM. These internals can change; supported settings preserve compatibility.