What image can we use as the icon?

A square PNG, JPG, WebP or SVG image of up to 100 KB. It replaces the Skavelo mark in the launcher, the input bar and the thinking indicator.

Can we use our own help button instead of the launcher?

Yes. Call open() or ask() from any button in your app, or use the SkaveloLauncher component in React, for example as a Help item in your navigation.

Does it respect reduced motion?

Yes. Users who turn on reduced motion in their operating system see a still version of each highlight style.

Which plans can remove the Skavelo branding?

Starter, Growth and Enterprise. Every plan can change the name, icon, colours, highlight style and position.

Appearance

A widget that looks like part of your product

Your users should feel they’re getting help from your product, not from a tool bolted onto it. Give the widget your name, your icon and your colours, and check every part of it in a live preview before you save.

Start freeTry it on your own product before you add any code.

Make it yours in a few minutes

Step 1
Name it
The assistant’s name at the top of the chat, and the launcher’s text. “Get help” until you change it.
Step 2
Add your icon
Your own square image in the launcher, the input bar and while it’s thinking, in place of the Skavelo mark.
Step 3
Set the colours
An accent for highlights and the step marker, plus the panel background and text if you want them fixed.
Step 4
Check and save
Preview the launcher, input, chat and walkthrough, in light and dark. Live sites update on their next page load.

The details

Light and dark, automatically

Leave the panel and text colours on Automatic and the widget follows each user’s light or dark mode setting.

Readable by default

If you set both the panel and text colours, the dashboard warns you when the contrast is too low to read comfortably.

Where it sits

Bottom left, bottom center or bottom right, so it stays clear of your own chat button or controls.

Your styles stay yours

The widget renders in its own isolated layer. Your CSS can’t change it, and it can’t change your app.

Set in code if you prefer

Developers can pass a theme to Skavelo.init: accent, colours, title, launcher text, icon, position, distance from the edge and highlight style. Code settings take priority.

No Skavelo branding on paid plans

On Free, the chat panel shows Powered by Skavelo. Starter, Growth and Enterprise remove it.

Four ways to point, in your colour

Pick a highlight style and an accent colour in the dashboard, with a live preview. The widget uses them on every step.

Beacon

A ring with a pulsing dot on its corner. The default.

Spotlight

Dims the rest of the page around the button.

Trace

The ring draws itself around the button.

Ring

A plain ring that pulses twice.

Questions

Set it up with Appearance in the help center.

What image can we use as the icon?: A square PNG, JPG, WebP or SVG image of up to 100 KB. It replaces the Skavelo mark in the launcher, the input bar and the thinking indicator.
Can we use our own help button instead of the launcher?: Yes. Call open() or ask() from any button in your app, or use the SkaveloLauncher component in React, for example as a Help item in your navigation.
Does it respect reduced motion?: Yes. Users who turn on reduced motion in their operating system see a still version of each highlight style.
Which plans can remove the Skavelo branding?: Starter, Growth and Enterprise. Every plan can change the name, icon, colours, highlight style and position.

See it in your colours, on your own product, before you add any code.

Start free