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

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 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. 1
   Open the chat settings

   “Widget” → “Edit” → “Widget buttons” → the “Chat” button. The “Custom CSS” field is below the color settings.
2. 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. 3
   Write a rule

   Start the selector with the widget prefix (see below) and paste the rule into the “Custom CSS” field.
4. 4
   Save the settings

   Click “Save changes”.
5. 5
   Reload the website page

   Preferably with a cache refresh, Ctrl+F5. The changes apply right away.

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

Widget button selectors

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

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.

Read also: website widget: installation and buttons, AI chat bot for website.