Customizing the Chat

Appearance & branding

Add your logo, theme the chat, set the browser tab, and remove the "Powered by Lorito" badge.

Branding lets your chat look like part of your own product rather than a generic assistant. You'll find it in your project's Settings, under Branding & appearance. Click Save branding when you're done.

Branding is a paid feature, and exactly what's unlocked depends on your plan. On a free plan the chat keeps the neutral Lorito look, and the branding card is shown read-only with an Upgrade prompt. See Plans & entitlements for what your plan includes.

Upload your brand mark to show it top-left on full-page chat surfaces (your hosted page and custom domain). This is the logo visitors see at the top of the conversation.

Chat font

Choose the font the chat uses, from a short list of clean, readable typefaces — or keep the system default. Pick the one closest to your own brand's typography.

Theme CSS

The Theme CSS field lets you recolour the chat to match your brand. Paste CSS variable blocks here — both a :root block (light) and a .dark block (dark) are supported, so you can theme both modes.

Your theme also flows through to the launcher button of your website widget, so the floating bubble picks up your colours too.

If you're not comfortable with CSS, you can leave this blank and the chat uses Lorito's default theme.

"Powered by Lorito" badge

By default the chat shows a small "Powered by Lorito" badge. On a paid plan you can turn it off with the Show "Powered by Lorito" toggle to fully white-label the chat.

This is always your choice — upgrading never removes the badge automatically, and free chats always show it.

Browser tab & sharing

The favicon, tab title, and link preview settings live in this same card under Browser tab & sharing. They apply to your project's custom domain. Preview links on a Lorito address keep the standard Lorito tab branding. These are covered in detail in Meta & SEO.

  • Favicon — a square PNG or SVG shown in the browser tab.
  • Page title — the tab title and link-preview heading.
  • Page description — the line shown in link previews when the page is shared.

What's next

On this page