Adding an interactive digital menu to your website has never been easier! Elegant Menu offers a beautiful, modern menu experience that restaurants, cafes, and hotels can easily embed on their websites, giving customers a convenient way to browse your offerings.

If you have not created a menu on our platform please checkout this post: How to create a nice digital menu for your restaurant for free

In this guide, we’ll show you how to integrate Elegant Menu into your website using an iframe.

Follow these steps to effortlessly add Elegant Menu to your website and provide customers with a seamless browsing experience!

Why Use Elegant Menu?

Elegant Menu is a powerful tool designed to create digital menus with a polished and easy-to-navigate design. Embedding it on your website helps you:

• Reduce wait times by letting customers browse the menu before arriving or while waiting for a server.
• Simplify updates since any changes to your menu on Elegant Menu automatically reflect on your site.
• Enhance user experience with a sleek, responsive menu that looks great on both desktop and mobile devices.

Step-by-Step Guide to Embed Elegant Menu on Your Website

Here’s how you can easily embed your Elegant Menu into any page on your website.

Step 1: Find Your Menu ID

1. Log in to Elegant Menu and navigate to your dashboard.
2. Select the menu you want to embed.
3. Look for the unique MENU_ID associated with that menu. This ID is essential to create the correct embed link.

Step 2: Get Your Menu Link

Using your unique MENU_ID, format the URL as follows:

https://elegant.menu/menu/<MENU_ID>

If you need to display only the menu part and not restaurant logo and footer add hideInfo=true url param at the end of link.

You can find your menu id by clicking see menu button from your profile, then You can see the last bit of the url is your id. if your menu ID is 12345, the complete URL will be:

https://elegant.menu/menu/12345?hideInfo=true

Step 3: Add the Iframe Code to Your Website

Once you have your URL, you’re ready to embed it using an iframe. An iframe allows you to display an external web page (in this case, your Elegant Menu) within your own site.

1. Go to the HTML section of your website where you’d like to display the menu.
2. Insert the iframe code by copying and pasting the following code snippet. Replace <MENU_ID> with your actual menu ID.

<iframe src="https://elegant.menu/menu/<MENU_ID>?hideInfo=true" width="100%" height="600px" style="border:none;" title="Elegant Menu"></iframe>

Step 4: Customize the Iframe Settings (Optional)

You may want to adjust the height or width to better suit your website’s layout. Here are some customization tips:

• Width: Set to 100% for responsive design, which ensures the menu fits within your website’s content area on all devices.
• Height: The default height in the example is 600px, which works well for most menus. You can adjust it as needed to fit more or less of the menu on the screen.
• Border: By setting style="border:none;", the iframe will appear seamless on your website, blending in without any border.

Benefits of Embedding Elegant Menu via Iframe

Embedding an iframe has multiple advantages, including:

• Ease of use: Simply update the content on Elegant Menu, and it reflects on your site instantly.
• Consistency: The iframe ensures the menu styling remains consistent across your website and Elegant Menu.
• Quick setup: With minimal code, your menu is up and running on your site in minutes.

Final Thoughts

Using Elegant Menu on your website creates a professional look while improving accessibility and user experience. By following these steps, you’ll have a beautifully embedded menu that customers can view effortlessly. This iframe method is especially handy for website managers who need a fast, reliable, and visually appealing solution for displaying digital menus.

Give it a try, and let Elegant Menu elevate your online presence!

Now your website is ready to showcase a menu that’s both elegant and practical. Enjoy the ease and style that Elegant Menu brings!