How to install the HotDoc Lightbox on your website

  1. Add these 3 lines to the <head> of the clinic's website, remove the comments.

    <!-- To make your web page mobile responsive (optional, to be added to the <head>) -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- Styles for HotDoc Lightbox (to be included in the <head> above the scripts)-->

    <link href="" rel="stylesheet" type="text/css">


    <!-- Javascript for HotDoc Lightbox (to be included in the <head> below the styles or at the end of the <body>)-->

    <script src=""></script>

  2. Add the following HTML snippet in the <body> wherever you want to HotDoc button to appear

    <div class="hotdoc-lightbox">

     <iframe src="{{your-suburb}}/{{your-clinic}}/doctors"></iframe>

     <a href="{{your-suburb}}/{{your-clinic}}/doctors" title="Book appointment at {{Your Clinic}} with HotDoc" target="_blank">Book your appointment</a>


  3. Update the {{your-clinic}} and {{your-suburb}} placeholders in the HTML snippet (3x). Use the dasherized-clinic-slug in the URL and the Capitalized Clinic Name in the title attribute. Mind that the URL is case-sensitive, "NSW" for example will work, "nsw" will not. Best is to look up your clinic here and copy the URL from the browser.
  4. Style the <a> link to match the clinic's branding. Alternatively, to have the HotDoc branding, add the class hd-buttonto convert the link into the HotDoc button. Example <a class="hd-button" title"Book appointment at HotDoc Medical">Book your appointment</a>


Please see the screen shots below as an example of the result:



If you require assistance with this, please contact HotDoc: 

Have more questions? Submit a request