Add ordering to your site
Delitero is launching soon. Join the waitlist and we will email you when it opens.
Paste this snippet into your website where the menu should appear, replace the rst_ value with your restaurant ID, and the full ordering flow renders there: menu, cart, checkout, and confirmation, inside your own page on your own domain.
<div data-delitero-restaurant="rst_9f2a64d1-7c3e-4b8a-9d21-8e5f0a6c4b7e" style="height: 640px; max-width: 480px"> <a href="https://order.delitero.com/r/rst_9f2a64d1-7c3e-4b8a-9d21-8e5f0a6c4b7e">Order online</a> </div> <script src="https://order.delitero.com/embed.js" defer></script>
The exact snippet for your restaurant, ID already filled in, is in your admin Settings under "Add ordering to your website". It works on any site that accepts custom HTML with scripts. The link inside the container is part of the snippet: it shows while the script loads, and on sites that strip scripts it keeps working as a plain link to your hosted ordering page. Leave it in.
Guides per platform
If your platform is not listed, the plain HTML guide applies almost everywhere: find where your builder lets you paste custom HTML and put the snippet there. And the hosted ordering page at order.delitero.com/your-restaurant always works as a plain link, whatever your website can or cannot embed.
Sizing the widget
The widget fills its container and scrolls internally, so the container's height and max-width are yours to choose. 640 by 480 pixels is a good default; a taller container shows more of the menu at once. Multiple widgets on one page work, and each container mounts once.
Paste it once and forget it
Every update ships behind the same address and the same restaurant ID. You will never be asked to update your site. The script URL never gains a version number, the data-delitero-restaurant attribute never changes meaning, and your restaurant ID never changes, whatever else does. Two rules keep that promise intact on your side:
The fallback link's target, order.delitero.com/r/ plus your restaurant ID, is the permanent form of your ordering page: it always forwards to your current page address, so it is the right URL to hard-code anywhere a link must outlive everything else.
- Never add an integrity (SRI) attribute to the script tag. This file updates itself behind the same address; a pinned hash will break your ordering the first time it does.
- If your site sets a Content-Security-Policy, allow https://order.delitero.com in script-src, connect-src, and frame-src. That is the whole Delitero line and it is permanent: it will never grow. The checkout inside the widget is the Stripe Payment Element, so a strict policy also needs Stripe's own documented CSP entries.
It will not fight your site
- Your styles cannot break it, and it cannot leak into your page. The widget renders in an isolated shadow root: your CSS never reaches widget internals, and widget CSS never touches your site.
- It stays light. The widget is pinned to a light appearance so a dark site theme or OS dark mode cannot make the menu unreadable.
- Payments are Stripe's. The checkout inside the widget is the Stripe Payment Element running against your own Stripe account. Card details go to Stripe, never to your website or to Delitero.
- No trackers, no third parties. The script loads nothing into your page beyond the widget itself and Stripe's checkout. Ad blockers have nothing to object to.
Single-page apps and late-inserted containers
The script mounts every data-delitero-restaurant container it finds at load. If your site inserts the container after load (a single-page app, a page builder preview), mount it yourself:
window.Delitero.mount(document.querySelector('#my-container'))Redirect-based payment methods
Cards confirm inside the widget without leaving your page. Payment methods that redirect return the customer to your page with delitero_order and delitero_slug added to the URL; the widget reads them on load and resumes at the confirmation step. Nothing to configure, but do not strip query parameters from the page the widget lives on.