Home Getting Started How to install a checkout widget using JavaScript

How to install a checkout widget using JavaScript

Last updated on Oct 28, 2026

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