Booking Web App

CarePortals provides a booking web app that can be embedded into any web page and coexist with other elements and styled to match your brand. There are two main ways to load the app:

• Embed Code
• Form Mode

The sections below will provide more details about each.

Embed Code

By embedding the web app into your page, it will load the appointment booking app by default, providing a complete appointment flow. The code works for vanilla HTML, WordPress page (using a custom HTML element), or Angular/React/VueJS apps.

To embed the booking app directly into your web page, use the code below:

<script>

window.organization = 'organization_id';
window['base-href'] = window.location.pathname;

// Add filter code below. Refer to the Filters section for more details.
// window.service = 'service id or label'; // use to pre-set a service on load;
// window.careportals_filter = function(service){ return true to show or false to hide}

</script>

<appgen-booking-app></appgen-booking-app>

<script src="https://booking.portals.care/runtime.js" defer></script>

<script src="https://booking.portals.care/polyfills.js" defer></script>

<script src="https://booking.portals.care/main.js" defer></script>

Filters

The web app allows you to filter out the services, with the following methods:

• Pre-selecting a singular service using its serviceId.

  Pre-Select a Service

  To pre-select a specific service in the appointment flow, you have the following options:

  • Add ?service=<service-id> to the page URL

  • Add the following line in the embedded code:

    HTML

    window.service = “<service-id>”;

  📘

  Service ID

  Ensure you change <service-id> with the ID of the service you want to retrieve.

• Displaying a group of filtered services using careportals_filter.

  Service Filter

  Display a group of services based on specific criteria. You can set the filter criteria on the window.careportals_filter to be a string, an array, or a function.

  • String: It will be matched with a service._id or service.label (case insensitive). See the example below:

    JSX

    window.careportals_filter = 'Demo Service'

  • Array: It will display all services that match the specified service._id. See the example below:

    JSX

    window.careportals_filter = ['id-1','id-2']

  • Function: It will be used in the services array JS .filter(s ⇒ boolen) . The filter function uses Array.prototype.filter function under the hood. See the examples below:

    • Show only the services that match a specific customer extras parameter to match the current page path.

      JSX

      window.careportals_filter = function(service){
          	return service.extras.slug === window.location.path;
          }

    • Filtering service based on stage parameter.

      JSX

      window.careportals_filter = function(service){
          	return service.extras.stage === 1;
          }

    • Filtering services based on linked schedules (provider or team).

      JSX

      window.careportals_filter = function(service){
        	  const filteredSchedules = service.schedules.filter(schedule => schedule.label === 'Dr. X');
        	  return filteredSchedules.length > 0;
          }

Form Mode

Form Mode allows you to load only a form, rather than the entire appointment flow. This is useful if you want to build your own appointment flow and only retrieve the form to be used in it.

To load a form, you have the following options:

• Add ?formId=<form-id> to the page URL.
• You can also add the following line to the embedded code:
  JSX

  window.formId = '<form-id>'

📘

Form ID

Ensure you change <form-id> with the ID of the form you want to retrieve.

Event Handling

By default, when there’s a successful submission, it will do the following:

• Redirect to /booking-success when using the Embed Code.
• Redirect to/form-successwhen on Form Mode

To override the default behavior, define the onSubmitSuccess function in the page where the app is loaded. See the example below:

function onSubmitSuccess(data){
	data = data.data || data;
	var form = data.form || {};
	dataLayer.push({event: “form-submitted” , form: form});
	window.location.href = '/thank-you';
}

In this example, when the form/appointment is successfully submitted, we will push an event to the dataLayer to trigger an event in Google Tag Manager (GTM) and link it to any tag.

We are also passing all form data to the dataLayer so the tags can have access to the submitted info (For production use, make sure you don’t send sensitive user data to vendors and only send required data). After that, we redirect /thank-you page. The default behavior of redirecting to /booking-success will no longer occur.

Referral Code (_ref)

When dealing with referrals to your booking flow, and you need to track the originators of referrals, whether that’s a partner or your own Ad campaign, add _ref to the URL of the booking page. See the example below.

https://www.appgen.studio/book-appointment-demo?_ref=<campaign-id>