When patients or clients are booking online, if they select a practitioner for their service they have the option of viewing 'More info' or additional details about their practitioner. For example, background information about who they are, what their history is, or any other personal information they may want to convey to their patients.

If you want to include a profile photo within their description, this guide will walk you through the process of creating and adding custom HTML to your practitioner's settings.

Using the template below, we're going to replace and adjust the image source (img src), alternative text (alt), and photo size (width and height).

To make the process easier, we recommend pasting the above into a new document somewhere— for example, a basic text editor on your computer or device.

Let's start by replacing the image source.

You'll first need to have the practitioner's profile image uploaded and stored somewhere on the web that is publicly accessible. Meaning when you visit the link to your photo, it's not restricted or set to private and can be viewed on any device.

For example, uploading your photo to an image hosting & storage solution. Or uploading your image to your website storage.

Once your photos have been uploaded, you'll copy the public link to your first photo. Now, let's replace the image source (img src) section of the HTML code with your URL. Specifically, you'll want to replace the your-image-url text in between the quotation marks with your copied URL.

After replacing the image URL within the HTML code, you'll now want to add the alternative or "alt" text. The alternative text will aid visually impaired users using screen readers and the text will displayed in place of an image if the image file cannot be loaded for any reason.

For the practitioner's profile photo, we recommend adding the Practitioner's name to the alt text.

With the image URL and alternative text set, the last step is to adjust the size of the photo. The dimensions set will determine how small or large the image appears on your patient's devices when they book online.

Square photo at width="220 height="220"

Rectangle photo at width="220 height="260"

With all of the elements of the HTML code completed, we'll now add the code within the Practitioner's settings.

To edit a Practitioner, within Cliniko, head to Settings, and then Users & practitioners:

Select the user you'd like to edit. This will bring you to their account information page. Click the Edit practitioner settings button:

On the next page, you'll be able to edit all of their Practitioner settings. From here, we'll want to paste the custom HTML code we've created to the Description section:

Once you save their settings, repeat the process for each Practitioner. Make sure to replace the image source, otherwise you'll display the same photo for each Practitioner.

The next time you visit your online bookings page, the 'more info' section for each practitioner will now display their profile photos.

As this is a fairly manual process, we understand you might have questions regarding creating a custom HTML code. Feel free to reach out to our support team if you needed help with any of this! 💬