How to install a checkout widget using JavaScript
How to install a checkout widget using JavaScript
Add "Book now" buttons to your own website (good for Shopify, Squarespace and Wix). Visitors book in a pop-up without
leaving your site. Need help? Email support@weteachme.com.
The easy way: in your WeTeachMe dashboard, go to Widgets → JS embed. Pick your website platform, choose a class, and
copy the code it builds for you. It fills in your username and listing IDs, and shows the steps for your platform.
How-to video for a Shopify website: click here.
Writing the code yourself
1. Add the script once per page, just above </body>:
<script src="https://d26lh3frdun17.cloudfront.net/embed/wtm_embed.js"></script>
This address always serves the latest version. Older addresses with /v11/, /v12/ or /v13/ in them still work and get the
same updates.
2. Add a button and set it up:
<button class="your-own-class wtm-book-button" data-token="1002105">Book Now</button>
<script>
document.addEventListener("DOMContentLoaded", function () {
window.wtmEmbedJS({
ele: ".wtm-book-button", // css selector for your buttons
key: "best-school" // your WeTeachMe username, not your business name
});
});
</script>
- key must be your WeTeachMe username, exactly as it appears in your dashboard.
- Give each button its own data-token, the listing ID of the class it books. All listings must be from your account.
- Call wtmEmbedJS once per page, even with many buttons.
3. If your site header covers the pop-up
Some themes keep their header on top of everything, which can hide the pop-up's close button (X) on phones. Add zIndex:
window.wtmEmbedJS({
ele: ".wtm-book-button",
key: "best-school",
zIndex: 100001 // raise if your header still covers the pop-up
});
Check it's installed
Once a visitor loads a page with your button, Widgets → JS embed shows "Seen on yoursite.com, last ". It also shows your
bookings through the JS embed in the last 90 days. If it still says "Not seen yet" a few minutes after you've opened
your page, check that key is your username.
Track bookings in your own analytics
Each time the pop-up opens, your page gets a signal you can count in Google Analytics, Tag Manager or Meta:
- Google Tag Manager: add a Custom Event trigger with event name wtm_checkout_opened. These Data Layer Variables are
available: wtm_form (booking or gift), wtm_listing (listing ID) and wtm_vendor (your username). This only happens if
your page already uses Tag Manager or GA4.
- Your own code: listen for the wtm:checkout-opened event:
<script>
document.addEventListener("wtm:checkout-opened", function (e) {
// e.detail.form, e.detail.listing, e.detail.key
if (window.fbq) fbq("track", "InitiateCheckout");
});
</script>
Completed bookings are sent to your own GA4 and Meta pixel from the confirmation page, if you've added your IDs in your
dashboard. Nothing about your visitors is shared.
Related Articles
- How to install or integrate the booking system widget into your website or blog
- How to create a menu structure for your mini-booking site using custom tags