Automatically add unique URL parameter to each service

Wishlist Appointment Booking
1

About deeplinking to a specific service

Right now, the Appointment Booking widget doesn’t support deeplinks or URL parameters that open the widget with a specific service already selected. The editor and documentation only let you manage the list of services in the Services tab and choose how the whole widget is embedded (Inline Form / Inline Button / Floating button), but there’s no option to address one particular service via link or data‑attribute.

This means it’s not possible, with a single multi‑service widget, to:

  • skip the service selection step, and

  • open directly on “Service X” just by using a special URL or parameter.

That would be a very good feature to have.

2 Likes
2

Hi there, @Thomas-John_Martin and welcome to the Community :waving_hand:

I like this idea, thanks for sharing! If it gets more votes, we’ll try to consider it in the future updates.

In the meantime, I think it’s possible to create a custom script for this. Please let me consult with the devs and I’ll update you once I have any news :slightly_smiling_face:

1 Like
3

Hi @Thomas-John_Martin :waving_hand:

Please add this script to the Custom JS field on the Settings tab of your widget’s settings and let me know if it worked:

const URL_PARAMS_CONFIG = {
  basic_paket: 'Basic Paket',
  premium_innen: 'Premium "Innen"',
  premium_komplett: 'Premium "Komplett"',
  beratung_vor_ort: 'Beratung vor Ort',
};

const WIDGET_ID = '28880cc6-8782-43ca-8b5b-ad443be758cb';
const PARAM_NAME = 'service';

const serviceFromParams = new URLSearchParams(window.location.search).get(
  PARAM_NAME
);

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });

waitForElem(`[class*="${WIDGET_ID}"] .es-content-container`).then((content) => {
  if (!serviceFromParams) return;

  const service = URL_PARAMS_CONFIG[serviceFromParams];
  if (!service) return;

  const serviceCards = content.querySelectorAll('.es-service-card-container');
  const currentServiceCard = [...serviceCards].find((card) => {
    const cardTitle = card.querySelector('.es-service-card-overview-title');
    return cardTitle?.textContent.trim() === service;
  });
  const bookBtn = currentServiceCard?.querySelector(
    '.es-service-card-action-book-button'
  );
  bookBtn?.click();
});

In this part of the code, we’ve listed all services from your widget and assigned URL params to them. If you decide to add a new service, you should add to the code using the same format:

image
image458×153 5.02 KB

4

Hi Max,

i added the code to the widget but still all services are getting displayed: You can check yourself here: https://test-pageflix.de
Feel free to do bookings as the website is not rolled out to the customer this week.

I asume I need to add a kind of parameter to the website (deeplink url) to?

Please advise.
Thank you for your support
Thomas

1 Like
5

Hi @Thomas-John_Martin :waving_hand:

I’ve just reached out to the devs and to get a link with a specific service selected, you need to add this parameter to your website url ?service=basic_paket, where basic packet is the name of the needed service. Here is an example of the full link: https://test-pageflix.de/online-terminbuchung.html?service=basic_paket.

Does this solution work for you?

6

Hi Max,

that was exactly what was missing. Working fine now!
Thank you
Thomas

1 Like
7

Great, you’re very welcome :wink: