Website widget
Add a floating chat launcher to your website with a single script snippet.
The website widget is a floating chat launcher that sits in the corner of your site. Visitors click it to open a chat with your agent, without leaving the page they're on. It's the quickest way to add Lorito to an existing website — one snippet covers every page.
Lorito prepares your widget automatically when you create a project, so the embed code is ready to copy straight away.
Add the widget
Open the embed code
In your project, go to Channels and click Configure on the Web card. Open the Embed widget section to find your script snippet. It looks like this:
<script src="https://lorito.ai/chat/your-id/launcher" defer></script>Use the copy button to grab the exact snippet for your project.
Paste it on your site
Paste the snippet into your site's HTML, just before the closing </body> tag. Add it to every page where you want the chat to appear (most sites add it to a shared layout or footer template so it shows everywhere at once).
The script loads asynchronously and won't slow your page down.
Check it's live
Open your website and look for the chat launcher in the corner. Click it, ask a question, and confirm your agent responds. That's it — your widget is live.
You can also use the Open widget preview link in the same section to try the widget before you publish it to your site.
Customizing the launcher
The launcher's appearance follows your project's shared look — logo, theme colour, and fonts are set once in your project's appearance settings and apply across every web surface.
You can also choose the launcher's icon from the Embed widget section: pick one of the built-in icons or upload your own. Custom launcher icons are a paid feature; on the free plan the launcher shows the default Lorito icon.
An uploaded image is scaled to fill most of the launcher, with its corners following the launcher's own roundness. Nothing is cropped or drawn over it, so a photo, a transparent PNG, and a flat icon all render as you supplied them. Use a square image: a wide or tall one is fitted whole, which leaves a band of your button colour above and below it.
Changing your appearance or launcher icon updates the live widget automatically — there's no need to re-paste the snippet.
Moving the launcher
By default the launcher sits in the bottom-right corner, 20px from each edge. If that corner is already taken (a WhatsApp button, a cookie notice, a back-to-top control), move it from your own page. Set window.__loritoWidgetConfig before the launcher script:
<script>
window.__loritoWidgetConfig = {
position: 'bottom-left', // 'bottom-right' (default) or 'bottom-left'
offset: { side: 24, bottom: 96 }, // px from the side and bottom edges
};
</script>
<script src="https://lorito.ai/chat/your-id/launcher" defer></script>Every field is optional, and anything you leave out keeps its default. To stack the launcher above an existing button in the same corner, raise offset.bottom and leave position alone.
The chat panel follows the launcher, so it always opens from whichever corner you chose. On narrow screens the panel goes full-screen regardless.
To move it after the page has loaded, call:
window.LoritoWidget.setPosition({ position: 'bottom-left', bottom: 96 });For anything the options above don't cover, the launcher and panel each carry a stable attribute you can target with CSS. Their positions are set as inline styles, so your rule needs !important:
[data-lorito-launcher] { /* the trigger button */ }
[data-lorito-panel] { /* the chat panel iframe */ }Widget or iframe?
The widget is a floating launcher that overlays your page. If you'd rather embed the chat inline, as part of a page's layout, use the iframe embed instead.