Skip to main content

Embed your DistruCommerce Menu

Laura Velasquez avatar
Written by Laura Velasquez
Updated this week

Overview

This article explains how to embed your DistruCommerce menu directly into your website. It allows you to showcase your live inventory, pricing, and featured products without requiring customers to leave your website.

Prerequisites:

  • At least one menu already created in DistruCommerce

  • Have access to your website's HTML (specifically the <head> section)

  • Have access to edit permissions in your site builder (e.g., Squarespace, if applicable)

Table of Contents

  1. Accessing the Embed Code

  2. Add the Embed Code to an HTML Site

  3. Add the Embed Code in Squarespace

  4. FAQs

Video

1. Accessing the Embed Option

Go to DistruCommerce > Seller > Your Menus:

  1. Click the three dots next to the menu you'd like to embed.

  2. Select Embed.

  3. Copy the embed code shown in the modal window.

2. Adding the Script to Your Website

  1. Open your site’s HTML editor.

  2. Locate the <head> section of the HTML page where you'd like to show the menu.

  3. Paste the copied script directly under <head>.

  4. Save and refresh your site.

💡 Pro-Tip: Work with your web developer or site admin to make sure it’s added in the correct location. Embedding works best on standalone product or order pages.

3. Add the Embed Code in Squarespace

Log into your Squarespace account:

  1. Go to Website > Pages.

  2. Select an existing page or create a new one.

  3. Click the ⚙️ (Settings) icon for the chosen page.

  4. Go to the Advanced tab.

  5. In the Page Header Code Injection box, paste the embed code you copied from Distru.

  6. Click Save.

Alternate Code:

If the default embed method gives you any trouble, you can try using this alternate code snippet. This version hides the page wrapper to allow a cleaner embed experience, especially on platforms like Squarespace.

Use this structure:

<style>
  #siteWrapper { display: none }
</style>

<!-- Then paste your embed script below -->
<script type="text/javascript" src="https://staging.distru.com/embed/menu/distru.js"></script>
<script type="text/javascript">
  window.distru.initializeMenu({
    baseUrl: 'https://staging.distru.com',
    companyId: YOUR_COMPANY_ID,
    menuId: YOUR_MENU_ID
  });
</script>

4. FAQs

  • Can I embed more than one menu on different pages?

Yes! You can embed each menu on a unique page using the same process.

  • Will the menu automatically update when I change products or prices?

Yes! The menu always reflects real-time data from Distru.

Related Articles / Next Steps

Did this answer your question?