It is possible to include the Flipdish web ordering system on any website by adding two lines of code. 


Please note that you must have SSL enabled on your site to make use of the Flipdish web ordering system.

In the <BODY> section of your page add 

<div id="flipdish-menu"></div><script type='text/javascript' id="flipdish-script" src='https://web-order.flipdish.co/client/[YOURAPPNAMEID]/latest/static/js/main.js'></script>


Replace [YOURAPPNAMEID]  with your own AppNameId. Please contact [email protected] if you do not know your AppNameId.


Please note that your host name must be whitelisted (eg. www.yourwebsite.com) before web-ordering can be embedded on your website. Please contact [email protected] to have your hostname whitelisted. If your host name is not whitelisted then the web-ordering system will not appear on your page.

Display the menu initially instead of the ordering options

When a user visits your ordering page you can choose whether to display the ordering options first. If you offer both delivery and collection then new users will be asked whether they want to collect or delivery. If you offer delivery only then new users will be asked to enter their delivery location. And if you offer collection only then users will be shown the menu or a list of stores to select from if you have multiple locations listed.

If you would like to instantly display your menu to customers then please include the attribute  data-initial-screen="menu" in the DIV. 

Include padding at the top of the basket

If your webpage has a fixed header it may cover up the basket on the page when the page is scrolled down. 

You can add padding to the top of the basket section by adding data-offset="100" to the DIV. The 100 value is in pixels and can be increased or reduced to alter the amount of padding. 

Display page header and footer on mobile

By default the Flipdish web-ordering system will make use of all of the browser page on mobile and hides any surrounding footer and header. This is done to optimize the experience of visitors using small screens.
If you would prefer to keep your page header and footer visible on mobile then add
data-full-screen-on-mobile="false" to the DIV.

Did this answer your question?