Learn how to embed the Flipdish web ordering system on your web page, including WordPress and Squarespace sites.
It is possible to include the Flipdish web ordering system on any website by adding two lines of code.
Requirements:
Access to your website configuration.
Please note that you must have SSL enabled on your site to make use of the Flipdish web ordering system.
Flipdish portal access
The hostname must be whitelisted (eg. www.yourwebsite.com) before web-ordering can be embedded on your website.
Open the Flipdish portal and navigate to Sales Channels -->Website --> Domain Setup
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 hostname 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 hostname 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 customize the look and feel of the ordering system
You can customize the online ordering system by changing numerous aspects like the fonts, colors, shadows, font size, spacing, padding, borders; on various elements within the ordering system.
There are some situations where an external ordering page is preferred to an embed code and in these instances, we use an external ordering page. The external ordering page links to your own website so that it does not feel entirely separate.
To learn more about Flipdish’s products or how to grow your online business enroll for FREE in the Flipdish Academy here: http://academy.flipdish.com/