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="https://cdn.hotdoc.com.au/static/assets/css/hotdoc-lightbox.min.css" 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="https://cdn.hotdoc.com.au/static/assets/js/hotdoc-lightbox.min.js"></script>

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

    <div class="hotdoc-lightbox">

     <iframe src="https://www.hotdoc.com.au/medical-centres/{{your-suburb}}/{{your-clinic}}/doctors"></iframe>

     <a href="https://www.hotdoc.com.au/medical-centres/{{your-suburb}}/{{your-clinic}}/doctors" title="Book appointment at {{Your Clinic}} with HotDoc" target="_blank">Book your appointment</a>

    </div>

  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: support@hotdoc.com.au 

Have more questions? Submit a request

Comments