Online ordering on your own site
The Online Ordering widget adds order taking to a site you already have. Nothing to migrate and nothing to redesign: the widget reads your pages, places “Add to cart” buttons on them and runs the cart and checkout on top of your layout.
Where: Marketing → “My Website” → the “Online Ordering” card → gear. The install code is shared by all widgets, see My Website.
Three modes
| Mode | What the visitor sees | When to choose it |
|---|---|---|
| Storefront | An “Order” button that opens your storefront with menu and cart over the page | Business-card site, landing page or blog — no products on the pages |
| Overlay | Our “Add to cart” buttons inside your own markup — on the product page and in the catalogue — with a cart in the corner | The site already has a product catalogue but no ordering (or an awkward one) |
| Replace | The same, plus the site's native buy buttons and cart are hidden | You want every order to go through us |
Scanning the site
The overlay and replace modes work from a site map: where the product title, price, image and native buy button live on your pages.
The scanner builds it: enter the address, press “Scan site” and wait 1–3 minutes. Inside:
- Platform presets — WooCommerce, Shopify, Magento, PrestaShop, Bitrix, InSales, Tilda and OpenCart are recognised immediately;
- AI parsing of the markup — for custom sites and unusual themes;
- Verification of every selector on real pages, cross-checked against product structured data. An unverified selector never enters the map — fewer buttons is better than a button in the wrong place.
The result shows the detected platform, the number of pages scanned, a sample recognised product and, separately, the product page and the catalogue card. You apply the map with a button and save it with the widget settings. If the site changes, just rescan.
Placement and appearance
Configured on mock-ups with a live preview — a typical product page and a catalogue listing:
- Product page button: under the price, next to the site's native button, or floating at the bottom;
- Catalogue card button: over the card, under the card, or off;
- Cart button: any of the four screen corners;
- Colour and label (“Add to cart”, “Order”, your own).
What happens after an order
The guest fills the cart, opens it and checks out — name, phone, delivery or pickup. The order arrives in the Orders section of your dashboard, exactly like storefront, POS and aggregator orders: same statuses, notifications, printing and kitchen routing. There is no separate “widget inbox”.
What the guest may do (order taking itself, delivery and pickup with lead times, ordering via WhatsApp) is configured in the same widget dialog.
Limitations
- The scanner reads server-rendered HTML. If your catalogue is drawn entirely by JavaScript, product pages may not be found — use the “Storefront” mode instead.
- Prices and availability come from your catalogue in the dashboard: the widget adds items from your pages to the cart, but the order is calculated from our data. Keep the catalogue up to date — see AI catalog import and Online store.
- In replace mode the native buttons are hidden visually; if your site has another path to checkout (a direct link to its own cart, for example), remove it yourself.
Related topics
- My Website — install code and the other widgets
- Orders — what happens to the order next
- Online store — if you need a full storefront
FAQ
Do I have to move my catalogue to you? For the overlay and replace modes — yes: prices, availability and order rules come from the dashboard. You can import it by site URL or from a file.
What if the site changes? Press “Rescan” — the map is rebuilt and your placement settings are kept.
Will the widget break my layout? Buttons are inserted into the places found in your own markup and their appearance is configurable; the cart and checkout open on top of the page and do not touch your layout.