# How to Add Online Ordering to Your Restaurant Website

> Four ways to add online ordering to a restaurant website, what each costs, and step-by-step button and embed instructions for Wix, Squarespace, and WordPress.

Canonical: https://menuline.ai/blog/how-to-add-online-ordering-to-your-website
Published: 2026-10-15

You add online ordering to a restaurant website in two moves: **choose the system that takes the orders**, then **connect it to your site** with an "Order Online" button (a link) or, less often, an embedded widget. The button takes ten minutes on Wix, Squarespace, or WordPress. The system behind it is the decision that sets your costs for years, so it gets most of this guide.

Below: the four ways restaurants do this, what each costs based on published pricing, exact button and embed steps for the big website builders, and the mistakes that quietly lose orders.

## What are the ways to add online ordering to a website?

![Four ways to add online ordering to a restaurant website, from linking a delivery app to running your own ordering platform](/blog/images/how-to-add-online-ordering-to-your-website/four-ways.png)

There are four real options. They differ in who processes the order, who keeps the customer data, and whether you pay a percentage.

| Option | How it works | What you pay | Who owns the customer |
| --- | --- | --- | --- |
| **1. Link to a delivery app** | Your button opens your DoorDash, Uber Eats, or Grubhub listing | Marketplace commission (DoorDash: 15–30% delivery, 6% pickup) | Mostly the marketplace |
| **2. Your website builder's own ordering app** | For example, Wix Restaurants Orders runs inside your Wix site | Your builder plan (Wix requires a plan that supports payments) plus card processing | You |
| **3. A separate ordering system, linked or embedded** | A provider hosts your ordering page; your site links to it or embeds it | Varies by provider: processing only, a monthly fee, per-order fees, or a mix | Usually you, check the terms |
| **4. A restaurant platform with ordering built in** | Your website and ordering are one system | Usually a flat monthly fee | You |

A few notes on each, based on pages we checked in September 2026.

**Option 1** is the fastest and the most expensive per order. DoorDash's [published pricing](https://merchants.doordash.com/en-us/pricing) is 15%, 25%, or 30% on delivery depending on plan. Sending your own website visitors there means paying marketplace rates on people who already found you. Our [DoorDash commission rates](https://menuline.ai/blog/doordash-commission-rates) page runs the math by plan.

**Option 2** works if you're already on Wix. Wix's help center says you add the Wix Restaurants Orders app from the app market, set up menus in the Wix Restaurants Menus app, and [upgrade to a plan that supports payments](https://support.wix.com/en/article/wix-restaurants-upgrading-your-restaurants-plan) to take orders online.

**Option 3** covers most standalone ordering providers. One worth knowing: DoorDash's own [Online Ordering product](https://merchants.doordash.com/en-us/products/online-ordering), which DoorDash says is commission-free for orders on your website, charges a standard payment processing fee, has customers pay delivery fees, and requires an active DoorDash store.

**Option 4** is the "stop duct-taping" path: one system for your website, menu, and ordering. Menuline is in this category, and we'll be specific about it below.

## Which option should you choose?

Answer three questions:

1. **Do you have repeat customers?** If yes, anything with a per-order percentage gets more expensive every time a regular reorders. Flat pricing wins as volume grows. [What Is Commission-Free Online Ordering?](https://menuline.ai/blog/commission-free-online-ordering) shows the break-even math.
2. **Is your current website any good?** If it's fast, easy to edit, and shows a real text menu, keep it and add a button (options 2 or 3). If it's slow, outdated, or your menu is a PDF, replacing it with option 4 fixes ordering and search visibility together.
3. **Who handles delivery?** If you need couriers dispatched for you, check what each system supports and who pays the delivery fee. DoorDash, for example, sells courier-only delivery through Drive On-Demand at **$6.99 to $10.99 per delivery order**, per its [Drive pricing](https://merchants.doordash.com/en-us/products/drive-on-demand).

## Should you link to your ordering page or embed it?

Most ordering systems give you a **link** to your ordering page. Many also offer **embed code**: a snippet that shows the menu inside your own page.

| | Link (button) | Embed (iframe or script) |
| --- | --- | --- |
| Works on every builder plan | Yes | No: Squarespace and WordPress.com restrict iframes and scripts to paid plans |
| Mobile experience | Full-screen ordering page | Can feel cramped inside a page frame |
| Visitor stays on your domain | Only if the ordering page uses your domain | Yes |
| Setup time | About 10 minutes | Longer, plus testing on real phones |
| What breaks | Almost nothing | Height, scrolling, and checkout inside frames |

**Our recommendation: link first.** A clear "Order Online" button to a full ordering page is the most reliable setup on phones, which is where most restaurant ordering happens. Embed only if your provider recommends it and you've tested checkout on an iPhone and an Android phone.

## How do you add an Order Online button, step by step?

The general steps are the same everywhere:

1. **Get your ordering URL** from your ordering system. It should open the ordering page directly, not a homepage.
2. **Add a button in your site header** (the top navigation that appears on every page). Label it "Order Online" or "Order Now."
3. **Add a second button above the fold on your homepage**, near your hero photo.
4. **Link both** to your ordering URL.
5. **Publish, then test on your phone.** Tap the button, add an item, and go to checkout.

Here's how that looks on each builder.

### Wix

Per Wix's help center on [adding a link to a button](https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button):

1. In the Wix Editor, add a button (or select an existing one).
2. Click the **Link** icon.
3. Choose **Web Address** and paste your ordering URL.
4. Pick whether it opens in the same window or a new one. For ordering, the same window is usually smoother on phones.
5. Click **Done**, then test the link in **Preview** before publishing.

If you'd rather order through Wix itself, add the **Wix Restaurants Orders** app instead, following Wix's [setup guide](https://support.wix.com/en/article/wix-restaurants-adding-and-setting-up-wix-restaurants-orders-new).

### Squarespace

Squarespace uses blocks:

1. Edit the page and click **Add block** (or **+**).
2. Choose **Button**, then click the **pencil** icon to edit it.
3. Type "Order Online," click **Attach Link**, and paste your ordering URL under **URL**. Save. Squarespace's [button blocks page](https://support.squarespace.com/hc/en-us/articles/206543907-Using-the-Button-Block) covers the style options.
4. Add the same link to your site navigation so it's reachable from every page, not just the homepage.
5. **For an embed**, add a **Code** block and paste the provider's snippet. Per Squarespace's [code blocks page](https://support.squarespace.com/hc/en-us/articles/206543167-Code-blocks), JavaScript and iframes in code blocks are available on the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans.

### WordPress

In the WordPress block editor:

1. Click **+** and add a **Buttons** block. WordPress's [Buttons block documentation](https://wordpress.org/documentation/article/buttons-block/) covers linking and styling.
2. Type "Order Online" as the button text.
3. Select the button and use its **Link** control to paste your ordering URL (WordPress also lets you open it in a new tab; for ordering, the same tab is usually smoother on phones).
4. Add the same link to your main navigation menu so it appears site-wide.
5. **For an embed**, add a **Custom HTML** block and paste the provider's code. On WordPress.com specifically, the [Custom HTML block guide](https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/) says tags like iframe and script need a paid plan with hosting features activated. Self-hosted WordPress.org sites generally let administrators add this code.

## What mistakes lose online orders?

Even a well-chosen system underperforms when it's wired up badly. The common ones:

- **The button is hidden.** If a visitor on a phone has to scroll to find "Order," some won't. Put it in the header and on the first screen.
- **The link goes to a homepage, not the menu.** Every extra tap between "I'm hungry" and the cart costs orders.
- **Different buttons go to different places.** One button to your ordering page and another to a delivery app splits your customers and your data. Pick one primary destination.
- **The menu is a PDF.** PDFs are painful on phones and weak for search. A real text menu on your site helps both ordering and Google. See the [restaurant SEO guide](https://menuline.ai/blog/restaurant-seo-guide).
- **Nobody placed a test order.** Place a real one from your phone after setup, and again after any menu change.
- **The link lives only on your website.** Your website is one doorway. Google and Instagram are the others.

## Where else should your ordering link go?

Once you have one ordering URL, use it everywhere people look for you:

- **Your Google Business Profile.** Set it as the preferred ordering link so Google's order button doesn't route your customers to a delivery app. The walkthrough is in [How to Add Online Ordering to Google](https://menuline.ai/blog/how-to-add-online-ordering-to-google).
- **Instagram and Facebook bios**, and link stickers in Stories.
- **Receipts, bag inserts, and a QR code by the register.** The free [QR code menu generator](https://menuline.ai/tools/qr-code-menu-generator) makes a print-ready code.

More ways to grow order volume once the link is live: [How to Get More Online Orders](https://menuline.ai/blog/how-to-get-more-online-orders).

## Where does Menuline fit?

Menuline is option 4: a restaurant website with commission-free online ordering built in. We'll be precise about what that means.

- **Your ordering page has its own URL.** Menuline sites run on your own domain (or a Menuline subdomain), and the ordering page lives at a path like `/menu`. Two live examples from real Menuline restaurants: [timtimsgrill.com/menu](https://timtimsgrill.com/menu) and [thehalalburgerchicago.com/menu](https://thehalalburgerchicago.com/menu).
- **Use it as your whole website, or just for ordering.** If you like your current site, keep it and point its Order Online button at your Menuline ordering page using the steps above. An outside site connects to Menuline ordering through a link, not an embed.
- **Pricing:** **$29/month (Starter)** or **$99/month (Growth)**, both **$1/month for the first 3 months**, month-to-month with no long-term contract.
- **Fees, stated plainly:** **0% commission to the restaurant** on every plan. Diners pay a **5% platform fee** at checkout, and standard card processing applies to online payments.
- **Switching:** Menuline handles the switch with a dedicated specialist.
- **Growth plan extras:** a branded iOS and Android app and AI email marketing.

See [pricing](https://menuline.ai/pricing) for plan details.

## The bottom line

Adding online ordering to a website is easy. Choosing what powers it is the real decision. A delivery-app link costs a percentage of every order, including repeat customers who found you on their own. A builder app or separate ordering system can work if you're happy with your current site. An all-in-one platform makes sense when the website itself needs fixing too.

Whatever you pick, use **one ordering link**, put it in your **header and homepage**, **test it on a phone**, and then put the same link on Google and Instagram. If you want a quick read on how your current site and ordering setup score, the free [Menuline AI grader](https://menuline.ai/grader) checks it in about a minute.

## FAQ

### How do I add online ordering to my restaurant website?

Pick an ordering system first, then connect it to your site. Most systems give you a link to your ordering page; you add an Order Online button in your site's header and homepage that points to it. Some also give embed code you can paste into an HTML or code block. Wix also has its own restaurant ordering app, which needs a plan that supports payments.

### Can I add online ordering to my website for free?

The button itself is free on every major website builder. The ordering system behind it is where cost shows up: marketplace links cost commission on each order (DoorDash publishes 15–30% on delivery), some systems charge only card processing, and others charge a flat monthly fee. Every online card payment carries processing costs somewhere.

### Should I link to my ordering page or embed it on my website?

Linking is usually the safer choice. A button that opens a full ordering page works on every plan and every phone, and checkout runs on the ordering provider's page as designed. Embeds keep visitors on your domain but can be cramped on mobile, and on Squarespace and WordPress.com, iframes and scripts need specific paid plans.

### Can I use DoorDash for online ordering on my own website?

Two ways. Linking to your DoorDash marketplace listing works but costs marketplace commission on every order. DoorDash also sells a separate Online Ordering product for your own website that it describes as commission-free, with a standard payment processing fee and delivery fees paid by customers. It requires an active DoorDash store.

### Do I need a new website to add online ordering?

No. If your current site works and you can edit it, you can add an Order Online button that links to any ordering page. Replacing the site makes sense when it's slow, hard to update, or can't show a real text menu, because then you're fixing ordering and search visibility at the same time.


## Related

- [How to Add Online Ordering to Google (Order Online Button Guide)](https://menuline.ai/blog/how-to-add-online-ordering-to-google)
- [What Is Commission-Free Online Ordering (and How Does It Work)?](https://menuline.ai/blog/commission-free-online-ordering)
- [Best Online Ordering Systems for Restaurants (2026)](https://menuline.ai/blog/best-online-ordering-systems)
- [Best Restaurant Website Builders (2026): Ranked and Compared](https://menuline.ai/blog/best-restaurant-website-builders)