Installing Tekmetric Online Booking

The Tekmetric Online Booking solution can be implemented directly onto your website as an overlay, a separate webpage, or both, depending on your preference and how you want to display the widget to your customers.

iframe Overlay

The iframe overlay keeps your customer on your webpage, and allows them to use the scheduler as a native experience.

Direct Link

The direct link can be used if your site cannot support the iframe, or used for your social media or other marketing campaigns.

Note: If you aren't sure which implementation you need or need additional support, reach out to our Support team. 

Website Integration (iframe overlay)

Implementing as an iframe into your website allows you to provide a native experience, automatically embedding online booking into your website as a floating overlay when a customer clicks your booking or appointment button. This is a great way to keep customers on your site and make it feel like a premium experience.

This is a great option for shops that are comfortable managing the back end of their website with a little HTML experience. Additionally, any shop that uses a third-party developer to host and manage their site can choose this option by sending the script and code to their partner.

How to use the Website Integration Method

1. Within the Tekmetric Online Booking Settings tab, click on 'Share'
2. Click on 'Add to website'
3. Copy the first code, the Tekmetric embed code (1) . Paste this code into your website editor directly into the <body> section of the page.

3. Within ‘Add to website’, copy the second code (2).

4. Use this code to tag any button within your website that you want to use to launch the Online Booking.

Be sure to change any buttons you’re converting from ‘Contact us’ to ‘Book now’ or ‘Schedule an appointment.’

If you're sending your code and details to your website manager, feel free to also send the additional documentation here along with the code to provide additional details. 

Direct Link

A direct link will direct customers to a new page, where only the online booking widget will be displayed. This is a great option for shops that want to get up and running quickly with online booking or to quickly attach to your Google Business Profile or Facebook page.

How to use the direct link method

1. Within the Tekmetric Online Booking Settings tab, click on 'Share'
2. Click on 'Copy'
3. Copy this link, and replace it as the link for any "Contact Us", "Request Appointment" links on your website
4. Be sure to change the text on any of these links to "Book Appointment", instead of "Contact Us" etc.

Note, using the Direct Link option is an ideal method for testing your booking widget prior to launching it to your customers. You’ll be able to use this live link to try out your online booking just as a customer would, walk through the flow, and book time on your Tekmetric calendar prior to releasing to your customers.

Get the Google 'Book Online' button

With our direct integration to Google, you can add the 'Book Online' button to your Google search results page or Google maps button instantly. 

If your shop has a different third party already providing this feature, be sure to turn off that integration in their settings page or send a note to them to disable their Google integration. 

How to add your booking link to your Google Business Profile

Adding your online booking link to your Google Business Profile (previously Google My Business) can help customers easily book appointments when they search for you on Google.

Once you've copied your booking link from the Get Code button, learn how you can add it to your Google Business Profile.

How to Integrate the TM Booking Tool Into Third Party Websites

Wix:

Add the booking tool script to the body end

<script>
  window.onload = function() {
    const script = document.createElement('script');
    script.src =
      'https://booking.tekmetric.com/iframe/modal.js?time=' + new Date().getTime();
    script.defer = true;
    document.body.appendChild(script);

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href =
      'https://booking.tekmetric.com/iframe/modal.css?time=' + new Date().getTime();
    document.head.appendChild(link);
  };
</script>

Add the following script to the body end as well, do not overwrite the booking tool script, and be sure to replace the placeholder "BOOKING_ID"... This script injects the OnClick event and booking ID.

<script>
(function () {
  const BOOKING_ID = 'a895cc57-db2b-442d-9b75-f7e8a8c4edf4';

  // Decide if an element is one of your target buttons by its visible label
  function isTargetButton(el) {
    const labelEl =
      el.querySelector('[data-testid="stylablebutton-label"]') || el;
    const text = (labelEl.textContent || '').toLowerCase().trim();
    return /book|schedule|appointment|reserve/.test(text);
  }

  // Attach the click handler once
  function wireButton(el) {
    if (el.dataset.bookingWired === '1') return;
    el.dataset.bookingWired = '1';
    el.addEventListener('click', function (e) {
      // prevent default nav if the button is also a link
      e.preventDefault();
      try {
        // make sure the function is globally available (window.onShowBooking)
        (window.onShowBooking || onShowBooking)(BOOKING_ID);
      } catch (err) {
        console.error('onShowBooking is not defined', err);
      }
    }, { capture: true });
  }

  // Scan the page for candidate buttons (Wix renders <button> and sometimes <a>)
  function scan() {
    document.querySelectorAll('button, a').forEach((el) => {
      if (isTargetButton(el)) wireButton(el);
    });
  }

  // Initial scan + keep watching because Wix is SPA-ish
  document.addEventListener('DOMContentLoaded', scan);
  const mo = new MutationObserver(scan);
  mo.observe(document.documentElement, { childList: true, subtree: true });

  // extra belt-and-suspenders for delayed mounts
  setTimeout(scan, 500);
  setTimeout(scan, 1500);
})();
</script>