The MOBI Storefront can be embedded into your site to create a seamless experience for your customers.
This requires adding an HTML div element and an embed script to the body of the page where you want the storefront to be embedded.
Note that the MOBI storefront takes over the full window of the page where it is embedded so we recommend adding it to its own dedicated page, for example yoursite.com/order-online
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
1. Whitelist your website’s domain
The MOBI storefront will only work on domains that have been whitelisted in the store's admin Website settings.
For example: If your storefront is embedded at https://ricksburgers.com/order-online, 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
Note: localhost is whitelisted by default.
Add your website’s domain to the Website/Domain Setting section:
- From your Head Office Dashboard, in the left menu open Website, then Website Settings:
- Under Embed domains add any URLS where your storefront is to be embedded. If there are more then one put each URL on a new line:
- Click the SAVE button to submit your changes or CANCEL to disregard your changes.
2. Decide where to add the MOBI Storefront to your site
MOBI ordering can be added to any page on 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 page to your website.
Ensure your customers can find the online ordering section of your website easily by adding a link into the main navigation.
3. Add an HTML container element
You need to add a div element on the page that the MOBI Storefront will be loaded into.
This div should be the only element on the page as the storefront will take over any other elements when it is loaded.
MOBI uses the id attribute to identify the element to inject the storefront into. The default id in the embed script is "Mobi2Go-Storefront" so add this id to the div as shown below.
Note: you can use any id you like it will just need to be updated in the script in the final step.
Pro Tip
If you need to find the 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.
4. Find the Embed script for your MOBI Storefront
- In your MOBI Head Office Dashboard open Website from the left menu and click Overview:
- In Website Overview, locate the Embed script at the bottom of the page.
- You will see a block of a code—this is the embed script that you will need to add to the web page where you want the storefront embedded.
- Copy the code (including the script tag).
5. Add the Embed script to the page
Paste the Embed script into the body of your chosen page.
If you have used a different container id in step 3 for your div element simply change the container: 'id' value in the script to match the id of your div element.
Ensure you publish your changes to the website to save the embed script.
6. Test your Storefront
When the website loads the MOBI storefront will load and will be inserted into the page. Any changes to your menu will be reflected when you refresh the page.