The Website Menu is an easy-to-embed enriched menu, which can be customized to look like your business. Provide an ordering experience on your own website that builds trust and gives consumers the information needed to make confident purchasing decisions.
It's easy to get started! Follow this link (https://menu-manager.leafly.com/embed ) to access your Website Menu color settings and code snippet.
- New name! Previously “embedded menu,” say hello to Website Menu
- Improved navigation
- New colors including customization
What’s not new … yet
Not all functionality in the old embed menu is supported in the new Website Menu, yet. It’s all in the works and will automatically update in your menu as soon as it’s available. Some things we’re still working on includes:
- Staff favorites
- In-store only items (Not orderable online)
- Some filters (price range, how to get it, strain)
- Access your Website Menu settings
- Set your custom colors (optional step)
- Copy the embed code snippet to your clipboard
- Paste the code into a page on your site
- Publish the page
Step 1: Access your Website Menu settings
- Follow this link (https://menu-manager.leafly.com/embed ) to access your Website Menu color settings and code snippet.
Tip: The Website Menu settings page is within the new Menu Manager. However, you do not need to be opted-in to the new Menu Manager to gain access. You will need to log in with your Leafly account email and password.
If you have already opted into the new Menu Manager, you can follow these steps to access your Website Menu:
- Log into your Leafly Biz Dashboard
- Select the 'Menu' tab
- Select the Settings in the upper right-hand corner of your page
- Select the 'Build Website Menu' option
Step 2: Set your custom colors (optional)
With the new Website Menu, you can set up to three colors (primary, secondary, and deals. Below you can see where these colors will be applied on your embed:
How to set your colors:
- Use the color picker to set the colors you want or, type in the hex values (i.e. ##2980B9)
- Then click 'Add custom colors to code snippet' to update your embed code with your selected color values.
Note: You can choose to use the same color for more than one of your menu settings. You can choose to only set a custom color for only one of the settings (i.e. Primary) - you don’t need to pick one for all. Any of the color settings that aren’t specified will use the default colors.
How do I find hex color values that match my company’s branding, site, logo?
- Drag a screenshot of your logo or site header to this web page to see the color values.
Note: Pick colors that are ADA compliant and ensure proper contrast to be easily legible. For more information, check out this article here
Step 3: Copy the embed code
- Select the 'copy code snippet' to copy your menu embed code.
Step 4: Paste the embed code into the body of your web page
- Create a new page in your website building platform and apply your preferred settings (page title, slug, parent page, page template, etc .)
- Make sure users can navigate to the new menu page. For example, include a link to the page through the site’s global header (“Shop our menu,” or “Order online”)
- Paste the embed code into the body of the page, not the page’s header or footer. This typically requires adding a “Code block” into a section on the page, and pasting in the embed code snippet into that block.
- Save and publish. We advise previewing your embed first, to ensure the final result is correct
General Tips and Best practices
How can I test out the new menu first, before deciding to replace my current one?
- Create a page on your website that customers can’t access through your site’s navigation. You may also want to adjust the SEO settings of the page so that it is not accessible through a Google search.
Best practices for global site header settings
- The best practice is to display your website menu on a page that has a global site header that will scroll out of view when the user moves down the page. In other words, you should avoid a global header that is fixed to the top of the page. Although your Leafly Website Menu will still be functional, a fixed header can take up valuable vertical screen space on a mobile device. Additionally, the global header may distract the user in the shopping experience, decreasing conversion.
Don’t limit the height and width of the menu
- The Leafly Website Menu size will auto-adjust its size and layout to fit mobile and desktop sizes.
- Be sure to avoid implementing the embedded menu in a way that restricts the width or height. For width, the page/section settings are recommended to be set to full width (or full bleed). The height of our menu dynamically sizes based on the amount of content of the page.
- If notice the menu is displaying too narrow, or if the content of the page is cut off at the bottom, ensure that any parent container (i.e. <div/>, list, paragraph) that you might paste the embed code into isn’t restricting the size.
Don’t add on a stand-alone page
- Linking your site directly to the URL within the code snippet will display your fully functioning menu, users will lose context when navigating.
Avoid transitions and animations
- Implementing the menu on a page that has animation or other visual effects that adjust the vertical position of the menu on the page may cause a jittery experience when scrolling the page.
Remove iframe borders in CSS
- The Leafly Website Menu is designed to feel fully integrated into your site experience. Any styles applied as a border around the menu iframe may detract from the experience.