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 MOBI, 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.
- MOBI 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 MOBI storefront
Whitelist your website’s domain
The MOBI 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:
- From your Head Office Dashboard, click WEBSITE from the grey navigational pane
- In Website, locate Domain Settings
- Next to Domain Settings, click EDIT
- Website Settings locate the Embed domains
- Add in the relevant domains into the field
- Click SAVE to submit your changes or CANCEL to disregard your changes.
Decide where to add MOBI ordering to your website
MOBI ordering can be added to any part of your website.
The menu section of your site is the ideal place to add MOBI ordering – using the MOBI 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 MOBI 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
MOBI 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 MOBI store
- Log into your MOBI Head Office Dashboard & click WEBSITE from the grey navigational pane
- In Website, locate Embed into an existing website
- In Embed into an existing website, locate Embed script
- 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
- Copy the code (including the script tag)
Add the MOBI 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 MOBI 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 MOBI storefront will load and will be inserted into the page. Any changes to your menu or Storefront’s theme will be reflected on refresh.
Comments
Article is closed for comments.