DIR.MENU← Back
Guide · Pro & Business Feature

Embed Your Menu
on Your Website.

Stop sending PDF links. With one snippet of code, your live flipbook menu appears directly on your website — always showing your latest version, no redirect, no app download.

01

🌐 What Does "Embed" Mean?

Embedding means your menu flipbook appears inside your website — not as a link that takes visitors away, but as a live interactive viewer right on your page. Customers can flip through every page without ever leaving your site.

It works exactly like a YouTube video embed — one small piece of code, placed once, works forever. Every time you update your menu on Dir.Menu, the embedded version on your website updates automatically.

02

📋 Get Your Embed Code

Your embed code is generated automatically for every Pro and Business menu. Here’s where to find it:

  1. Go to your Dashboard and click any menu.
  2. Open Settings.
  3. Scroll to the Embed row.
  4. Click Copy — the code is now in your clipboard.
Your embed code looks like this
<iframe
  src="https://dirmenu.com/embed/your-slug"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>
03

🔧 How to Add It — By Platform

Every website builder has a way to add custom HTML. Here’s exactly how to do it on the most popular ones:

🟦 WordPress
Add a &quot;Custom HTML&quot; block on any page or post. Paste the snippet inside and publish.
⬛ Squarespace
Add a &quot;Code Block&quot; anywhere on your page. Switch to HTML mode, paste, and save.
🟨 Wix
Click Add → Embed → &quot;Embed a Widget&quot;. Paste the code in the HTML editor and apply.
🟦 Webflow
Drag an &quot;Embed&quot; element onto your canvas. Double-click it, paste the code, and save.
🟩 Shopify
Go to Online Store → Pages. Edit a page, switch to HTML view, paste the code.
🟩 GoDaddy
Add an &quot;HTML&quot; section to your page, paste the snippet, and publish your changes.
04

📐 Adjust the Size

The default embed is width="100%" and height="600". You can change these to fit your layout:

  • width="100%" — fills the full container width (recommended)
  • height="500" — shorter for sidebar use
  • height="800" — taller for full-page sections
  • On mobile, width="100%" always fills the screen correctly

“We put the menu on our homepage. Customers started ordering before they even walked in.”

— Marco, Trattoria del Porto · Naples

An embedded menu removes one more step between your customer and their order. No link to click, no redirect, no “download this file” prompt. Just your menu, right there.

05

💡 Tips for Best Results

  • Place the embed above the fold — don’t make customers scroll to find it.
  • Add a short heading above it like “Our Menu” so visitors know what they’re looking at.
  • Compress your PDF before uploading — a lighter file means faster loading in the embed. See our PDF best practices guide.
  • Test on a phone after embedding — most of your visitors will be on mobile.
  • You only paste the code once. After that, update your menu on Dir.Menu and the embed reflects changes instantly.
Quick Reference

✅ Embed Checklist

  • 1Upgrade to Pro or Business (7-day free trial, no card needed)
  • 2Upload your PDF menu to Dir.Menu
  • 3Open your menu's Settings from the dashboard
  • 4Find the "Embed" row and click Copy
  • 5Go to your website builder
  • 6Add an HTML or Embed block to your page
  • 7Paste the copied code inside
  • 8Save and publish your page
  • 9Open your website on a phone and test the flipbook
  • 10Update your menu any time — the embed always shows the latest version
Need help?

💬 We’ll Help You Set It Up

Not sure how to add the code to your specific website? Don’t worry — our customer support team can walk you through it. Reach out at hello@dirmenu.com and we’ll get you live within 24 hours.

Ready to embed?

Start your 7-day free trial on Pro or Business. No credit card required.

Start Pro Trial →Claim Forever Seat →