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. Learn how to enable SSL on your website for free here.


Open up the Flipdish portal and navigate to Website --> Embed code.

Copy and paste the embed code from this page onto your website. 

The code will look similar to below by you must [YOURAPPNAMEID]  with your own AppNameId

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


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.

Learn how to customise the look and feel of the ordering system

You can customise the online ordering system by changing numerous aspects like the fonts, colours, shadows, font size, spacing, padding, boarders; on various elements within the ordering system. Learn how here.

Did this answer your question?