Dental Media Aps Knowledge Base - How to setup the Online Booking widgets on your website

Once you have set up your Patient Management System to integrate with Dentlis Online Booking, it is time to make it available on your website so your patients can begin booking timeslots.

Setting it up should be fairly simple if you have basic knowledge of CMS systems and can copy-paste snippets HTML into your website.

However, If you have any doubts about how to do this, we strongly recommend you ask your website agency to do this work, as it is possible to break your website if you accidentally add or remove things in your website code.

The Dentli Online Booking module can run on almost any website, but there are a few minor requirements:

You must be able to add a small script to your website head-section
You must be able to insert and run HTML code snippets, wherever you want the relevant module to show on your website.

If this is possible, then your website can most likely run Dentlis Online booking.

With that out of the way, let's get started.

1. Enable Dentlis Online Booking on the website:

The first step is to enable Dentlis online booking on your website.
To do this you must add the following html snippet in the bottom of your website head as the last item inside the website head:

You can omit the html comments if you wish, but we recommend you keep it for easy identification if you need to remove the script one day.

2. Add Online Booking widgets to the website:

The second step is to add the widgets where you want them to appear on your website.

There are three different types of widgets available:

The Embedded widget (full booking access)
The Quickflow widget (earliest available openings only)
The Modal widget (a button or a-tag activated full booking access as an overlay)

to implement any of these simply input the relevant html snippet into your webpage in the spot where you want the widget to be shown.
If you are using a drag & drop editor or something similar, place a codeblock where you want the widget to shown and paste in the html snippet.
Note: The [OBID] in bold in the snippet must be replaced with the Online Booking ID provided by Dentli. If you haven't go an Online Booking ID, please Dentli Support.

The Embedded widget:

The embedded widget loads immediately and is always shown on the page. It integrates into the design and takes the user through the full booking process. Including collection of info on new patients.

HTML snippet to implement the Embedded Widget:

<div class="dentli_booking_container" data-dentli_ob_mode="embedded" data-dentli_ob_id="[OBID]"></div>

The Quickflow widget:

The quickflow widget, like the Embedded widget, is always shown on the website. The Quickflow container will take up the width of its container up to a max-width of 400px. It will take the height of its container.

It is a much lighter design than the Embedded widget and only displays the first few available timeslots.

This widget skips a few steps of the booking process allowing for a faster and more simple booking, but the patient will have a much more limited selection of timeslots and options.

Html snippet to implement the Quickflow Widget:

<div class="dentli_booking_container" data-dentli_ob_mode="quick" data-dentli_ob_id="[OBID]"</div>



The Quickflow widget also comes in a mini version that only shows timeslots for one defined treatment treatment.
To setup the mini version simply add data-dentli_ob_treatment_id=[treatment_id] to the html snippet from above like this:



Don't forget to replace [treatment_id] with the treatment ID for the relevant treatment type.

The mini will show treatment name and price if the data is available. If you do not want to display these add data-dentli_ob_show_text="false" to the html snippet like so:

<div class="dentli_booking_container" data-dentli_ob_mode="quick-mini" data-dentli_ob_id="[OBID]" data-dentli_ob_treatment_id=[treatment_id] data-dentli_ob_show_text="false"></div>

The Modal widget:

The Modal widget is a button that, when clicked, opens a full-page modal with the full online booking widget.

It can be implemented using either a button tag or an a tag:

Once clicked it opens up a modal overlay like this:

You can change the text of the button or tag by replacing the "Book now" in bold, to match the relevant language. You can alsu style it any way you want in your own style sheet.

Html snippets to implement the Modal Widget:

a tag:

Button:



You can change the text of the button or tag by replacing the "Book now" in bold, to match the relevant language.
Note that the button and a tag shows without any styling at all, so you may need to style the button or tag accordingly.

Once the snippets are in place, you should see the widgets show up in your website and they are ready to go.

Support

Remember that if you have any questions, don't hesitate to contact then Dentli support team.
You can reach them on support@dentli.io or on (+45) 77 34 77 35 (and press 4 to get to tech support).