How to install a checkout widget using JavaScript

Embed a checkout widget on your website (Ideal for Shopify and Squarespace).

You can put a checkout widget on your website using WeTeachMe Embed JS API. If you need help with this, contact support@weteachme.com.

How-to video for a Shopify Website - click here.

1. Including the Javascript File

Add the below script to the head section in the page HTML.

<script src="https://d26lh3frdun17.cloudfront.net/embed/v11/wtm_embed.js" data-turbolinks-track="reload"></script>

Note: Attribute data-turbolinks-track is not necessary if your website is not using turbolinks.

2. Creating a Popup Checkout Widget

Using the following HTML/Javascript code to add a "Buy Now" button on the webpage, when clicked shows the checkout flow.

<button class="your-own-class wtm-book-button" data-token="1002105">Book Now</button>
<script>
  window.wtmEmbedJS({
    ele: ".wtm-book-button", // css query selector
    key: "best-school", // WeTeachMe Username
    listing: 1002105 // Listing ID (leave out if each button has its own data-token)
  });
</script>

To embed multiple checkout widgets on the same page, leave out "listing" and give each button its own "data-token". Each "data-token" must be a valid listing id from the same account.

3. If your site header covers the popup

Some website themes keep their header or menu on top of everything. On phones, this can hide the popup's close button (X). To fix it, add zIndex to your code:

window.wtmEmbedJS({
  ele: ".wtm-book-button",
  key: "best-school",
  zIndex: 100001 // raise if your site header covers the popup
});

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

Details