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.

    Load 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 just before </head>:
    <!-- this script enables Dentli Online Booking Module-->

    <script type="module" src="https://eu.core.dentli.io/vbslb/bcfjx/obloader.js"></script>
    <!-- End of script that enables Dentli Online Booking Module-->


    The script must not be cached on the website, as this inhibits Dentli from pushing updates to the Online Booking module and will create errors.

    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.

    Add 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:

    1. The Embedded widget (full booking access)
    2. Quickflow  (earliest available openings only)
    3. Quickflow Mini
    4. The Modal  (a button or a tag-activated full booking access as an pop-up or modal)

    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 got an Online Booking ID, please contact Dentli Support.

    Embedded (On-page):

    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.

    Snippet to Embed Online booking on a single page:

    <!--Dentli Online Booking Widget-->

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

    <!--End of Dentli Online Booking Widget-->

    Quickflow Embeded widget (on-page):

    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 simpler booking, but the patient will have a much more limited selection of timeslots and options.


    HTML Snippet to implement the Quickflow embedded widget:

    <!--Dentli Online Booking Widget-->

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

    <!--End of Dentli Online Booking Widget-->

    Options and conciderations

    The quickflow widget will automatically show the first 5 available timeslots. If you would like to show more or less you can add the data-dentli_ob_quickmode_timeslot_counter="10" variable to your HTML snippet. In that case, it will look like this: 

    !--Dentli Online Booking Widget-->

    <div class="dentli_booking_container" data-dentli_ob_mode="quick" data-dentli_ob_id="[OBID]" data-dentli_ob_quickmode_timeslot_counter="[number of available times shown]"</div>

    <!--End of Dentli Online Booking Widget-->

    Qucikflow Mini embedded widget (On-page):

    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:


    HTML Snippet to implement the Quickflow Mini embedded widget:


    <!--Dentli Online Booking Widget-->

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

    <!--End of Dentli Online Booking Widget-->

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

    Options and conciderations

    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:


    <!--Dentli Online Booking Widget-->

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

    <!--End of Dentli Online Booking Widget-->

    Booking Modal:

    The Modal widget is a pop-up with the full booking available. It can be activated by clicks on elements, such as A tags (links) or button tags.




    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 also style it any way you want in your stylesheet.

    HTML Snippets to implement the Booking Modal:

    A (links):

    <!--Dentli Online Booking Widget-->

    <a class="dentli_booking_container" data-dentli_ob_mode="modal" data-dentli_ob_id="[OBID]">Book now</a>

    <!--End of Dentli Online Booking Widget-->

    Buttons:

    <!--Dentli Online Booking Widget-->

    <button class="dentli_booking_container" data-dentli_ob_mode="modal" data-dentli_ob_id="[OBID]">Book now</button>

    <!--End of Dentli Online Booking Widget-->

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

    Published