Integration Instructions
Production files are hosted at http://web5.zuppler.com. To integrate add a div with id zuppler-menu and the following js files after it.
- common.js
- one of the implementation js file as following
- conditional import for IE ie-support.js
order.js
Renders single restaurant online ordering menu and cart. The following attributes are required
Add
data-prefix to all params when configured as DOM attributes. Eg.<div id="zuppler-menu" data-channel-url="https://..."
| Param | Description |
|---|---|
| data-channel-url | url to the web3 channel json file |
| data-integration | integration remote-id |
| data-restaurant-id | restaurant id as configured in zuppler (future use) |
portal.js
Renders a selection wizard for the restaurant on a specific channel. Channel must be configured as searchable and indexed. The following attributes are required
| Param | Description |
|---|---|
| data-channel-url | url to the web3 channel json file |
| data-locale | locale to be used for the integration |
| data-portal-slices | portal-slices |
bridge.js
Mounts the bridge on the current page without rendering any UI. The following attributes are required
| Param | Description |
|---|---|
| data-channel-url | url to the web3 channel json file |
| data-locale | locale to be used for the integration |
Example integration
Step 1
Create a separate HTML page and set the appropriate title, let's say "Order Online". To simplify things, you can start by duplicating one of your existing pages, like about-us.html. Or, if you're using a CMS (e.g. Wordpress), simply create a new page.
Step 2
Edit this page and remove the existing content (if present). Only keep the usual components, like the page header with your logo, main navigation, page title, footer, etc.
Copy the following markup and paste it into your newly created page.
<div id='zuppler-menu'
data-channel-url='http://api.zuppler.com/v3/channels/demorestaurant.json'
data-integration='site'
data-restaurant-id='242'
>
<div class='style-me-loading'>Please wait. Loading menu...</div>
</div>
<script src='//web5.zuppler.com/common.js'></script>
<script src='//web5.zuppler.com/order.js'></script>
This code is based on Zuppler's Demo Restaurant.
At this point, we assume that your Zuppler Account Manager already provided you the configuration information for your real restaurant. If this is the case, make sure you replace data-channel-url , data-integration and data-restaurant-id with the correct values in the code above. Otherwise, you can continue with the Demo, make sure everything looks fine, then simply add the real data later on.
Step 3
Save, and visit the page using your favorite internet browser. Congrats!! 🍾🎉 You should now have a fully functional Order Online page.