Once Smartsupp chat is installed on your website, the first thing you'll likely want to do is set up how the chat box looks and behaves. The Smartsupp chat box combines a chat and a contact form in a single widget, so visitors can send messages and — if you enable the contact form — share details like their name and email.
💡 Where to find it: All the options below live in Settings > Chat box in your Smartsupp dashboard.
In this article:
What you can customize
In the chat box appearance settings you can adjust the following so the widget fits your website:
Setting | What it does |
Color gradient | Sets the colors of the chat box to match your brand. |
Position | Places the chat box on the left or right side of the screen. |
General texts | Edits the labels and messages shown in the chat box. |
Theme | Switches the overall look of the chat box. |
Change the chat box position
You can move the chat button directly from the dashboard — no code required:
Log in to your Smartsupp account.
Go to Settings > Chat box > Appearance (or Position settings).
Adjust the placement — choose the left or right side of the screen, set a vertical offset, and set the spacing from the edges.
Save your changes. The updated position applies to your website automatically.
Advanced: position via the JavaScript API
🟡 Note: Changing the position via API requires the EXPERT package (Legacy: PRO) and developer access to your website's code.
The Smartsupp JavaScript API gives developers more precise control over the chat widget. For example, you can set different positions for desktop and mobile:
<script>
// Desktop position
smartsupp('chat:position', { bottom: 20, right: 20 });
// Mobile override
if (window.innerWidth < 768) {
smartsupp('chat:position', { bottom: 100, right: 10 });
}
</script>
To implement it:
Open your website's code and locate the Smartsupp installation script.
Paste the snippet above directly below the Smartsupp script.
Adjust the
bottomandrightvalues to suit your design for both desktop and mobile.Save your changes and refresh your website in an incognito or private window to verify the new positions.
💡 Tip: For full control, you can create your own button and manage the chat widget entirely through the JavaScript API.
What's next?
Chat box languages — see the supported languages and how to change them.
Chat box status — control when your chat box appears online or offline.
Why can't I see the chat on my website? — fix a chat box that doesn't appear.
💡 Still need help? If you can't find a setting or something isn't working as expected, contact our support team via chat or email — we're happy to help.