# Custom CSS for a chat widget: match it to your website design

How to change the widget's font, corners, window size and button position with the “Custom CSS” field: classes, color variables and ready examples.

Section: Widgets · Updated: 2026-11-10 · http://my.lptracker.ru/land/lk/faq/?a=widget-custom-css&lang=en

> **In short:** Custom CSS for a chat widget is the “Custom CSS” field in the “Chat” button settings where you paste styles to fit the widget to your website: font, corners, window size, button position. Start every selector with #lpt-ai-overlay or #lpt-sw, save the settings and reload the website page. The field does not accept JavaScript.

Custom CSS for a chat widget is what you need when the widget should look like part of your landing page rather than a foreign insert: the same font, the same corners, and a button that doesn't cover the cart or the “Back to top” bar. A chat in the website's style earns more trust, visitors write more willingly, and fewer leads get lost. This matters most for agencies and partners who put a [live chat for website](http://my.lptracker.ru/land/lk/faq/?a=widget-chat-messengers&format=md&lang=en) on clients' landing pages with a finished design.

Custom CSS is the “Custom CSS” field in the “Chat” button settings where you paste styling rules. They are added to the website page together with the widget and change the chat window and widget buttons exactly the way you write them. The field accepts styles only; JavaScript doesn't work there.

## When you need custom CSS and when “Chat design” is enough

If you only need to change colors, you don't need CSS. Above the field there is the “Chat design” block: pick a theme or one color of your own, and the other colors are calculated automatically and stay readable. The “Match my website” button suggests three prominent colors from your landing page.

You need custom CSS when the built-in settings are not enough:

- remove rounded corners of the window or messages;
- use your website's font;
- move the widget button up if there is your own bar or a “Back to top” button at the bottom;
- make the chat window wider on desktop;
- hide the file paperclip or the pulse around the button.

## How to add custom CSS to the widget

1. **Open the chat settings** — “Widget” → “Edit” → “Widget buttons” → the “Chat” button. The “Custom CSS” field is below the color settings.
2. **Find the element** — Open your website, right-click the widget and choose “Inspect” (or press F12). The element's class starts with `lpt-`.
3. **Write a rule** — Start the selector with the widget prefix (see below) and paste the rule into the “Custom CSS” field.
4. **Save the settings** — Click “Save changes”.
5. **Reload the website page** — Preferably with a cache refresh, Ctrl+F5. The changes apply right away.

> If something goes wrong, clear the “Custom CSS” field and save the settings again. The widget goes back to its normal look.

## The main rule: start each selector with the widget prefix

Your CSS is added to the website page as a whole. The rule `body { font-size: 20px; }` changes the entire website, not the widget. The rule `#lpt-ai-overlay .lpt-ai-header { … }` affects only the chat header. Start every selector with one of the prefixes:

- `#lpt-ai-overlay` — the chat window;
- `#lpt-sw` — the widget buttons and their menu;
- `#lpt-sw-callback-overlay` — the “Callback” window: it sits on the page separately from the buttons.

## Chat window CSS classes

| Selector | What it is |
| --- | --- |
| `.lpt-ai-modal` | The chat window itself |
| `.lpt-ai-header` | Chat header |
| `.lpt-ai-name`, `.lpt-ai-sub` | Title and subtitle in the header |
| `.lpt-ai-avatar` | Avatar in the header |
| `.lpt-ai-close` | Close cross |
| `.lpt-ai-messages` | Conversation area |
| `.lpt-ai-msg` | Message |
| `.lpt-ai-msg.user` | Visitor's message |
| `.lpt-ai-time` | Message time |
| `.lpt-ai-welcome-text`, `.lpt-ai-welcome-btn`, `.lpt-ai-welcome-icon` | Welcome: text, the button below it and the picture |
| `.lpt-ai-input-wrap` | Input bar at the bottom |
| `.lpt-ai-input` | Input field |
| `.lpt-ai-send` | Send button |
| `.lpt-ai-attach` | File paperclip |
| `.lpt-ai-typing` | “Typing” indicator |
| `.lpt-ai-brand` | Caption at the bottom of the chat |

## Widget button selectors

| Selector | What it is |
| --- | --- |
| `#lpt-sw-fab` | Round widget button |
| `.lpt-sw-fab-icon` | Icon on the button |
| `.lpt-sw-pulse` | Pulse around the button |
| `#lpt-sw-menu` | Expanded button menu |
| `.lpt-sw-menu-btn` | Button in the menu |
| `.lpt-sw-menu-label` | Button caption in the menu |
| `#lpt-sw-tooltip` | Pop-up hint next to the button |
| `#lpt-sw-callback-overlay` | “Callback” window |
| `#lpt-sw-cb-phone` | Phone field in this window |
| `#lpt-sw-cb-submit` | Request submit button |

> Almost all widget button styles are set with `!important`. Write `!important` in your `#lpt-sw` rules too, otherwise the rule won't work.

## Chat color variables

Four CSS variables are available inside the chat window. They take their values from “Chat design”:

- `--lpt-accent` — the main color: header and buttons;
- `--lpt-accent-2` — the second color of the header gradient;
- `--lpt-bubble` — the visitor's message color;
- `--lpt-body-bg` — the conversation background.

Use them instead of hard-coded colors. Then you won't have to redo your CSS after changing the theme, and it won't break when the chat layout is updated. Example: `#lpt-ai-overlay .lpt-ai-send { background: var(--lpt-accent, #3b82f6); }`. The second value after the comma is a fallback in case the color isn't set.

## Ready-made CSS examples for the widget

| Task | What to paste into the field |
| --- | --- |
| Chat window without rounded corners | `#lpt-ai-overlay .lpt-ai-modal { border-radius: 0; }` |
| Wider chat window on desktop | `@media (min-width: 900px) { #lpt-ai-overlay .lpt-ai-modal { width: 460px; } }` |
| Website font in the chat and buttons | `#lpt-ai-overlay, #lpt-ai-overlay *, #lpt-sw, #lpt-sw * { font-family: "Montserrat", sans-serif !important; }` |
| Move the widget button up | `#lpt-sw { bottom: 96px !important; }` |
| Remove the pulse around the button | `#lpt-sw .lpt-sw-pulse { display: none !important; }` |
| Hide the file paperclip | `#lpt-ai-overlay .lpt-ai-attach { display: none; }` |
| Almost square visitor messages | `#lpt-ai-overlay .lpt-ai-msg.user { border-radius: 6px; }` |
| A different button position on phones only | `@media (max-width: 640px) { #lpt-sw { bottom: 72px !important; right: 12px !important; } }` |

The font must already be loaded on your website: the widget doesn't load it. On a phone the chat window opens full screen, so window width and corners apply on desktop only.

## What you can't paste into the “Custom CSS” field

- **JavaScript.** The `<script>` tags, `javascript:` and `expression()` are cut out on save. If you need your own script, put it on the website itself: the widget is embedded in the page, and the website's script can see its elements.
- **Closing the `<style>` tag.** Such constructions are cut out too. This is protection: if an outsider gets access to the account, they can't inject code into your website through the widget settings.
- **More than 20,000 characters.** This is the field length limit.

## FAQ

### Why isn't my custom CSS applied to the widget?
Check that you saved the settings, reloaded the website page with a cache refresh (Ctrl+F5) and copied the selector from the browser inspector. If everything is right, the built-in style has higher priority: add `!important`, for example `#lpt-ai-overlay .lpt-ai-header { background: #111 !important; }`.

### Why did the whole website change instead of the chat?
The rule hit the page: the selector has no widget prefix. Clear the field, save and rewrite the selector with `#lpt-ai-overlay` or `#lpt-sw` at the start.

### Can I add my own JavaScript to the widget?
No, the field accepts CSS only. Put the script on the website itself: the widget is embedded in the page, and the website's script can reach it.

### How do I change the font in the chat widget?
Load the font on your website and paste the rule from the examples above with your font name. The widget doesn't load fonts by itself.

### Do I need CSS to change the chat color to match my website?
No. Pick a theme or your own color in the “Chat design” block, or click “Match my website”. The system darkens a color that is too light, so the header stays readable.

### How do I return the widget to its normal look?
Clear the “Custom CSS” field and save the settings. After you reload the website page, the widget looks as before.

**Read also:** [website widget: installation and buttons](http://my.lptracker.ru/land/lk/faq/?a=widget-start&format=md&lang=en), [AI chat bot for website](http://my.lptracker.ru/land/lk/faq/?a=chat-bot-start&format=md&lang=en).