☝️Note: This is an advanced workaround. At the moment, we don't have a built-in way to upload practitioner photos—so for now, setting it up manually through custom HTML code is going to be the best way to go about it. Please be sure to read all of the instructions to ensure that your custom code works correctly!

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.

Image 2021-08-04 at 11.52.19 AM

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.


Creating the custom HTML code

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).

<img src="your-image-url" alt="Practitioner Name" width="260" height="260" style="float:left; margin: 0px 10px">

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.


Uploading photo to the cloud

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 Google Drive, Google Photos, iCloud, Dropbox, Imgbb, Photobucket, or any cloud based image hosting & storage solution.

Once your photos have been uploaded, you'll can now copy the link to your first photo. It should have the photo file extension .jpg, .jpeg.png, .gif, etc. at the end of your URL

Now that you have copied your first photo URL, 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.


Adding alternative text

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.

Image 2021-08-04 at 12.38.24 PM

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


Adjusting the image size

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"

Image 2021-08-04 at 1.21.32 PM

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

Image 2021-08-04 at 1.23.31 PM

☝️Note: Depending on the shape of your image, you'll want to have a play around with the height and width. Adjusting the margin in the HTML will only adjust the spacing around the photo & text.


Adding code to the Practitioner Description

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

☝️Note: You'll need to be an Administrator in order to edit other users. Otherwise, Practitioners can also edit their own Practitioner settings by clicking 'My info', under their name in the menu.

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:

Image 2021-08-04 at 1.41.02 PM

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:

Image 2021-08-04 at 12.51.07 PM

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.

Image 2021-08-04 at 1.19.01 PM

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! 💬

Did this answer your question?