Widgets for eatcard systems: https://eatcard.nl/
- Add to integrations » Body
- ####### is the store ID in setAttribute(“data-store-id”, ‘#######’).
Reservations Widget
<!-- START eatcard reservation widget -->
<script> function initbf(d, s, id, h, window) {var ecjs = d.getElementsByTagName('script')[0];if (d.getElementById(id)) return;var js3 = d.createElement('script');js3.src = "https://reservation-v2.eatcard.nl/js/booking-common.js";ecjs.parentNode.appendChild(js3);var js = d.createElement(s);js.id = id;h && (js.onload = h);let div = d.createElement('div');div.setAttribute('class', 'iframe-wrapper-booking eatcard-widget closed-widget single-store-open res');div.setAttribute("data-store-id", '#######');div.appendChild(js);window.document.body.appendChild(div);window.addEventListener("message", function (e) {if (e.data[0] === "floating-frame-height") {document.getElementById("#######-booking-iframe").style.height = 100 + "%";document.getElementById("#######-booking-iframe").style.width = 100 + "%";}if (e.data.message === "booking-redirect-url") { window.location.href = e.data.data }}, false);};document.addEventListener("DOMContentLoaded", function () {initbf(document, 'iframe', "#######-booking-iframe", function () {}, window)});</script>
<!-- END eatcard reservation widget -->
Code language: HTML, XML (xml)
Reservation iframe
<iframe src="https://reservation-v2.eatcard.nl/######" id="#######-booking-res-iframe" allowfullscreen scrolling="no" frameborder="0" style="width: 100%;vertical-align: top;max-width: 100%;"></iframe><script> var resBookingFrame = document.getElementById("#######-booking-res-iframe");resBookingFrame.onload = function () {resBookingFrame.contentWindow.postMessage(['show-res-form', "#######", window.location.href], '*');resBookingFrame.contentWindow.postMessage(['open-iframe',true], '*');};window.addEventListener("message", function (e) {if (e.data.message === "booking-redirect-url") {window.location.href = e.data.data;}if (e.data[0] === "#######") {document.getElementById("#######-booking-res-iframe").style.height = e.data[1] + "px"}if (e.data[0] === "booking-frame-open") {resBookingFrame.contentWindow.postMessage(['show-res-form', "#######", window.location.href], '*');}if(e.data[0]==="floating-frame-height"){resBookingFrame.style.setProperty("height",e.data[2]+"px");resBookingFrame.style.setProperty("width",e.data[3]+"px");}if(e.data[0]==="payment-page-init"){const queryString = window.location.search;const urlParams = new URLSearchParams(queryString);const status = urlParams.get("status");const store = urlParams.get("store");const type = urlParams.get("type");if(store && type === "reservation") {setTimeout(() => {window.history.pushState("", "", location.pathname);},1000)}}}, false);</script>
Code language: HTML, XML (xml)
Online ordering
<!-- START eatcard ordering widget -->
<script> function init(d, s, id, h, window) {var ecjs = d.getElementsByTagName('script')[0];if (d.getElementById(id)) return;var js3 = d.createElement('script');js3.src = "https://takeaway.eatcard.nl/js/common.js";ecjs.parentNode.appendChild(js3);var js = d.createElement(s);js.id = id;js.setAttribute('frameborder', 0);js.setAttribute('scrolling', 'yes');js.setAttribute('dmn', "https://takeaway.eatcard.nl");js.setAttribute('style', 'position: fixed;bottom: 0px;right: 0px;z-index: 9999999;left:auto;max-width:940px;height:0px;');js.src = "";h && (js.onload = h);let div = d.createElement('div');div.setAttribute('class', 'iframe-wrapper');div.appendChild(js);window.document.body.appendChild(div);};window.onload = function () {init(document, 'iframe', "eatcard-iframe", function () {}, window)} </script>
<!-- END eatcard ordering widget -->
Code language: HTML, XML (xml)
To create a button to open the widget:
<button type="button" data-store-id="#######" onclick="setIframe(this)">Order Here</button>
Code language: HTML, XML (xml)
Or add the following script
<!-- START custom eatcard order link -->
<script>
jQuery(document).ready(function($) {
$('a[href="#bestellen"]')
.attr('data-store-id', '######')
.attr('onclick', 'setIframe(this)');
});
</script>
<!-- END custom eatcard order link -->
Code language: HTML, XML (xml)
Direct order link
https://www.yourdomain.com/#takeaway-#######
This doesn’t work when opening in the same window though.