Products on any landing page — in its own design
The product block finds its place on the page, aligns with your site’s grid, and uses its fonts, colors, and buttons. “Buy” opens a chat where the bot places the order with shipping and payment. No store builder or on-site cart needed.
One block — four different websites
Switch websites: the block rereads each page and adapts to it. On the right, you can see exactly what it picked up from the design. And to make a real purchase — on in a live demo store the widget block is installed with standard code, and orders appear in your dashboard.
The website and products are for demonstration; the block installs the real LEO Chat script. Click “Buy” to see what happens.
What the widget reads from your site
Page placement
Finds the first screen and appears right below it, skipping the menu and header. Or above the footer, beside the relevant section, or wherever you inserted a line of code.
Website grid
It takes the width and spacing of the neighboring section’s container, so the cards’ left edge lines up with your text. The section spacing is customizable too.
Fonts
The body font, font size, and heading case match your page, along with any connected web fonts.
Buttons & colors
Finds your website’s main button and matches its color, text, shape, capitalization, and height. Light website—light block; dark website—dark block.
Phone
On mobile, show two cards per row or a carousel with the next card peeking in. No horizontal page scrolling.
Page navigation
On React or Vue sites, the block appears or disappears as visitors navigate, based on the “Pages to show on” rule.
The bot completes the purchase in chat
Three steps — and your website has a shop
Embed the widget
One line of code before </body>—the same one used for your website chat. No need to install anything else for your store.
Choose products and location
In your dashboard: popular, new, discounted, category, or hand-picked products; after the first screen, before the footer, or next to a section. Preview available.
Sell in chat
“Buy” opens a chat with the product in the cart. The bot asks for a name and phone number, offers Nova Poshta delivery and payment—and the order is yours.
<!-- LEO Chat widget: chat + product block -->
<script src="https://chat.leochat.com.ua/w.js" data-key="ваш-ключ" async></script>
<!-- optional: place the block exactly here -->
<div data-leo-shop></div>
<!-- optional: your «Buy» button -->
<button data-leo-buy="ID-товару">Buy</button>- We show only in-stock products, with items that have photos first.
- Changes in your dashboard appear on your website within 2 minutes.
- Sales from this block are tracked separately: impressions, clicks, orders, and revenue.
Frequently asked questions
Do I need an online store for this to work?
No. Any website or landing page works—whether it’s built with Tilda, WordPress, Webflow, or custom code. Products are added to LEO Chat from your catalog: a Prom.ua or Horoshop feed, your website’s structured data, or manual entry.
Will the block break my design?
The block runs inside an isolated Shadow DOM: your site’s styles won’t break it, and its styles won’t affect your site. It only reads your site’s fonts, colors, and sizes so it feels right at home.
What if the automatic look doesn’t work for me?
Turn on the “Custom” style to set button colors and corner rounding. You can also change the heading, caption, and button text in your dashboard.
Can I make my own button on the website a purchase button?
Yes. Add the data-leo-buy attribute with the product ID to any button or link—the click opens a chat with that product in the cart. Your account has a product search that generates ready-to-use code.
How will I see how much it sells?
In the “Shop on website” section, see how many visitors viewed the block in 30 days, how many clicked “Buy,” and how many orders were placed and for what amount. These sales also appear on the Dashboard.
Try it on your website
14 days free. Connect the widget, add your products, and turn on the block with one toggle.