Installing Buddi

This article provides step-by-step instructions for embedding the Buddi menu script onto a website. It covers Squarespace, WordPress, Wix, and GoDaddy users.

Other platforms can contact support@buddi.io for further assistance if there are issues using one of the methods below.

Most Website Builder Platforms (including Squarespace & Wordpress):

Installing the Buddi menu on your website is simple and involves just a single line of code on one page.

General Process:

1. Log into your website builder account
2. Create a new Blank Page
3. Create a new Section
4. Add a new Code Block
5. Copy and paste the Buddi menu script into the Code Block
6. Save
   
   

There are two methods for embedding the menu:

• Method #1: Standard Script (with multi-locations using '?store_id=####')
• Method #2: Unique Script (with authID identifier #)

Method #1: Standard Script

Legacy Version

This method involves the retailer (or web dev) embedding a standard script onto a webpage, then Buddi would activate the domain in the back-end and the menu would start loading.

Multi-store chains running multiple locations' menus on their website would need to direct users to the appropriate location: '?store_id=####'

Examples - Menu Page URLs

Where the script is embedded 

• Single location: https://www.cannabisstore.ca/shop/
• Multi-store chain with 3 locations/menus:
  • Store 1: https://www.cannabisstore.ca/shop/?store_id=1111
  • Store 2: https://www.cannabisstore.ca/shop/?store_id=1112
  • Store 3: https://www.cannabisstore.ca/shop/?store_id=1113

As shown in the URL examples above:

• All menus are embedded on the same page; they all share the same slug ('shop').
   
• This means they are also using the exact same menu script (standard):
  <script src="https://app.buddi.io/js/external-ropis.js" async></script>
  
  
• With multi-store chains, each location has its own '?store_id=####' to identify them. This setting directs users to the correct location to browse the menu. Buddi would have to activate the domain for a specific location in order for its menu script to load on the website.

NOTE: Stores that have been using Buddi for a long time are typically still on the legacy version (Method 1). To switch to the newer version, refer to this section below: How to Install the Buddi Menu using Method #2: Unique Script

How to Install the Buddi Menu using Method #1

Standard Menu Script

<script src="https://app.buddi.io/js/external-ropis.js" async></script>

1. Copy the code and place it where you'd like it to appear on your website.
2. After the script has been embedded and saved, you'll see loading bars with a "Hang Tight..." caption. This means that you are on the right track.
3. Send Buddi your menu page URL so that we can enable the domain on our end.
    

Method #2: Unique Script

Newer Version

This method involves the retailer (or web dev) embedding a unique script onto a webpage. The menu would automatically load without the need for Buddi to activate the domain in the back-end.

Multi-store chains would have a unique script for each location. Each script contains an ' authId="####" ', which identify and direct users to the appropriate location.

Examples - Menu Page URLs

Where the script is embedded 

• Single location: https://www.cannabisstore.ca/shop/
• Multi-store chains (e.g. with 3 locations/menus):
  • Store 1: https://www.cannabisstore.ca/shop-vancouver/
  • Store 2: https://www.cannabisstore.ca/shop-burnaby/
  • Store 3: https://www.cannabisstore.ca/shop-abbotsford/

As shown in the URL examples above:

• All menus are embedded on a separate page; they each have their own slug (e.g. 'shop-vancouver').
  
  
• The menu pages do not have to use '?store_id=####' in the URL to identify the location. To achieve this effect, unique menu scripts need to be used.
  
  e.g. Unique Menu Script for Each Location (examples only):
  <script src="https://app.buddi.io/js/external-ropis.js" authId="1111" async></script>
  
  <script src="https://app.buddi.io/js/external-ropis.js" authId="1112" async></script>
  
  <script src="https://app.buddi.io/js/external-ropis.js" authId="1113" async></script>
   
• Since the URLs can contain location-based keywords, it is less prone to user error (it's more apparent which location they're shopping at). It's also better for SEO.

How to Install the Buddi Menu using Method #2

Unique Script (with authID identifier #)

<script src="https://app.buddi.io/js/external-ropis.js" authId="####" async></script>

1. Refer to your Buddi Onboarding ticket or the Admin Portal > Store Settings > Online Menu: Configuration page for the menu script (aka 'embed code') >  Copy the script
   
   

2. Paste the script where you'd like it to appear on your website (after adding an embed block to the page). After the script has been embedded and saved, the menu will load right away!

WIX & GoDaddy Users:

You will follow the same process as above when installing the Buddi menu onto your website. The primary difference is that your code adds another line to the script, specifically:
<div id="buddi-em-menu"></div>

These website platforms use 'iFrames', so you will need to use 'div' in the code.

Method #1: Standard Menu Script (using iFrames)

<script src="https://app.buddi.io/js/external-ropis.js"></script>
<div id="buddi-em-menu"></div>

Method #2: Unique Script (with authID identifier #  and  using iFrames)

<script src="https://app.buddi.io/js/external-ropis.js" authId="####" async></script>
<div id="buddi-em-menu"></div>

NOTE: If your store is already open (or transitioning from another e-commerce platform), please be sure to embed the menu script onto a hidden page. The menu page can be published after you complete Buddi Onboarding and are ready to go live.

Did you know? You can apply Custom Branding to your online menu at any time: before or after the menu is embedded.

Having issues loading the script?

• Please reach out to support@buddi.io for further instructions.