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.

Process Overview

1. Access your Website Menu settings
2. Set your custom colors (optional step) 
3. Copy the embed code snippet to your clipboard
4. Paste the code into a page on your site
5. 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.

You can follow these steps to access your Website Menu: 

• Log into your Leafly Biz Dashboard
• Select the Menu option from the left-side panel
• Select the 'Build Website Menu' option to access your website menu 

Step 2: Set your custom colors (optional) 

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: 

1. Use the color picker to set the colors you want or, type in the hex values (i.e. ##2980B9)
2. 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?

1. Drag a screenshot of your logo or site header to this web page to see the color values.
   https://color.adobe.com/create/image 
   

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

1. Select the 'copy code snippet' to copy your menu embed code. 

Step 4: Paste the embed code into the body of your web page

1. Create a new page in your website building platform and apply your preferred settings (page title, slug, parent page, page template, etc .)
2. 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”)
3. 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. 
4. Save and publish. We advise previewing your embed first, to ensure the final result is correct

General Tips and Best practices

Does the menu update on my embed? 

• Yes! Your menu will update along with your inventory on your Leafly storefront. 

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.

For any issues or concerns, we kindly request that you contact our support team at help@leafly.com. They will be more than happy to assist you in resolving any problems you may encounter.