You’ll learn how to copy the widget code, clean it up for proper integration, and attach it to a button on your site so visitors can easily open the booking widget.
Step 1: Get Your Widget Code
Go to Widget → Advanced Integration → Copy Code in your Smeetz dashboard.
The code you copy will always contain two parts:
A
<script>loader (loads the widget)An
<a>tag (the clickable button)
Step 2: Clean Up the Code
Paste the code into your website, but remove the style attribute from the <a> tag so the button is not automatically displayed on your page.
Example cleaned-up code:
<!-- Start Smeetz Embed Code -->
<script>
!function(e, t, n, i, p, r, s) {
e[n] || ((p = e[n] = function() {
p.p ? p.p.apply(p, arguments) : p.q.push(arguments);
}).q = [], p.t = 1 * new Date(), p.g = "1",
(r = t.createElement("script")).async = 1,
r.src = "https://tracker.smeetz.com/smeetz-main-widget.js",
(s = t.getElementsByTagName("script")[0]).parentNode.insertBefore(r, s));
}(window, document, "_smtz");
</script>
<a data-smtz-gid="19772" data-smtz-wid="4139"
class="" target="_blank" rel="noopener noreferrer"
onclick="event.preventDefault(); _smtz('openwidget', Date.now(), {
productId: '73214',
lightbox: true,
listView: false,
gId: '1',
wId: '4139',
codes: 'ZUF8HRD9',
cats: '133709',
linkText: 'en: ,,, fr: ,,, de: ,,, it: ',
linkUrl: 'en: ,,, fr: ,,, de: ,,, it: ',
});">
</a>
<!-- End Smeetz Embed Code -->
⚠️ Make sure this code is applied across all pages of your site.
Step 3: Connect to a Custom Button
Instead of using the default <a> tag, you can trigger the widget from your own custom button.
To do this, add the following script at the end of the <body> section of your site.
<script>
const buttonId = 'comp-mewv30vs'; // Replace with the ID of your custom button's <div>
const observer = new MutationObserver(() => {
const ticketButton = document.querySelector(`#${buttonId}`);
if (ticketButton) {
observer.disconnect();
console.log("Button found! Attaching event listener.");
ticketButton.addEventListener("click", (event) => { event.preventDefault();
if (typeof window._smtz !== 'undefined') {
window._smtz('openwidget', Date.now(), {
productId: '73214',
lightbox: true,
listView: false,
gId: '1',
wId: '4139',
codes: 'ZUF8HRD9',
cats: '133709',
linkText: 'en: ,,, fr: ,,, de: ,,, it: ',
linkUrl: 'en: ,,, fr: ,,, de: ,,, it: ',
});
} else {
console.error("Smeetz widget is not loaded.");
}
});
}
});
observer.observe(document.body, { childList: true, subtree: true });
</script>
👉 Important Note:
The buttonId (comp-mewv30vs in the example) is not the ID shown in your code editor.
It is the ID of the <div> that wraps your button, which you can find by inspecting your page in the browser’s developer tools.