Embed Mobi2Go into your Website

Having your own website means having that you have an established web presence, a brand & a familiar place that customers new & old can keep coming back to.  

At Mobi2Go, we understand that your website, your way of doing things is important & it's also what makes you unique. That's why we have the ability to embed the storefront into your existing website. 

 

  • Mobi2Go online ordering can be added to any website with a few lines of HTML code.

Remember

This guide assumes you have a basic knowledge of HTML. If you're not sure, please contact our Support team.

How to embed the Mobi2Go storefront

Whitelist your website’s domain

The Mobi2Go storefront will only work on domains that have been allowed in the store's Website settings.

For example: If your website's URL is https://ricksburgers.com/online-ordering, the domain ricksburgers.com will need to be added to the external domain list.

You may also need to add any domains you will be using for testing in your local environment.

For example: test.ricksburgers.com or local.ricksburgers-website

  • localhost is whitelisted by default.

Add your website’s domain to the Website/Domain Setting section:

  1. From your Head Office Dashboard, click WEBSITE from the grey navigational pane
  2. In Website, locate Domain Settings
  3. Next to Domain Settings, click EDIT
  4. Website Settings locate the Embed domains 
  5. Add in the relevant domains into the field
  6. Click SAVE to submit your changes or CANCEL to disregard your changes.

Decide where to add Mobi2Go ordering to your website

Mobi2Go ordering can be added to any part of your website.

The menu section of your site is the ideal place to add Mobi2Go ordering – using the Mobi2Go storefront as a replacement for your menu section.

If replacing your menu page is not appropriate, add a new Order Online section to your website.

Ensure customers can find the online ordering section of your website easily by adding a link into the main navigation.

Identify a HTML container element

Identify which HTML element on the page the Mobi2Go Storefront will be loaded into.

  • The element should be the main content container for the section decided above
  • The element should be at least be 600px wide for larger screen resolutions

Mobi2Go uses the id attribute to identify the element to inject the application into. If the element does not have an id attribute, one will need to be added.

In this example the element’s id is Mobi2Go-Storefront.

Pro Tip

If you need to find a specific element of your website to edit, you can utilise Dev Tools in Google Chrome. To access Dev Tools, open the Chrome menu at the top-right of your browser window (3 vertical ellipses) then select More Tools > Developer Tools. Then select the cursor icon or (CTRL+SHIFT+C) to inspect any element on the page.

Find the embed script for your Mobi2Go store

  1. Log into your Mobi2Go Head Office Dashboard & click WEBSITE from the grey navigational pane
  2. In Website, locate Embed into an existing website
  3. In Embed into an existing website, locate Embed script
  4. You will see a giant block of a code - this is the code that you will need to insert the online ordering storefront into your web page
  5. Copy the code (including the script tag)


Add the Mobi2Go Storefront embed script to the page

From above, paste your Embed script into your chosen page

Change the container value to the id of the element chosen in Decide where to add Mobi2Go ordering to your website.

Ensure you publish your changes to the website to save the embed script. 

Test your Storefront

When the website loads the Mobi2Go storefront will load and will be inserted into the page. Any changes to your menu or Storefront’s theme will be reflected on refresh. 

0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.