RecallMax Book Online Icon Installation

These instructions are to help your webmaster place RecallMax's Book Online icon on your dental website.



This page is here to assist you in placing the Book Online icon on your Dental website. It is assumed that you are a web developer.
Some customization is possible as we will now outline.

Book Online Location

The Book Online button appears a fixed distance from the top of the website.
To move the button up or down, you can modify the "--recallMaxBookOnlinePageLocationHeight" variable.(see red text below)

Book Online Colors

You can change the foreground, background, and background-hover colors by modifying the corresponding CSS variables.(see red text below)
Feel free to change these to match your website's look and feel.
RecallMax Book Online Style

Place the following <style> block in your web page, inside the <head> tag.

<style>
:root {
--recallmaxBookOnlineBackgroundColor:#a5238c;
--recallmaxBookOnlineForegroundColor:#fff;
--recallmaxBookOnlineHoverColor:#ba55d3;
--recallMaxBookOnlineTextAlign: left;
--recallMaxBookOnlinePageLocationHeight: 250px;
}
.RecallMaxBookButton { position: fixed; background-color: var(--recallmaxBookOnlineBackgroundColor); opacity: 0; top: var(--recallMaxBookOnlinePageLocationHeight); min-height: 65px; display: block; align-items: center; text-align: var(--recallMaxBookOnlineTextAlign); justify-content: center; padding: 15px; color: white; box-sizing: border-box; z-index: 9999; box-shadow: 1px 2px 3px 0 rgba(128, 128, 128, 0.15); transition: all 0.2s ease-in; --text-transform: uppercase; font-family: 'Helvetica, Arial, sans-serif' !important; font-size: 19px; letter-spacing: 0; line-height: 19px; text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.10); border-bottom-left-radius: 999px; border-top-left-radius: 999px; cursor: pointer; vertical-align: middle; }
.RecallMaxBookButton .icon { display: inline-block; align-items: center; justify-content: center; color: var(--recallmaxBookOnlineForegroundColor); height: 40px; width: auto; vertical-align: middle; }
.RecallMaxBookButton .SVG { fill: var(--recallmaxBookOnlineForegroundColor); height: 100%; width: auto; transition: all 0.2s ease-in; stroke: var(--recallmaxBookOnlineForegroundColor); }
.RecallMaxBookButton .content { vertical-align: middle; display: inline-block; color: var(--recallmaxBookOnlineForegroundColor); transition: all 0.2s ease-in; font-family: 'Helvetica, Arial, sans-serif' !important; }
.RecallMaxBookButton .content strong { display: inline-block; font-weight: 600; font-size: 23px; line-height: 23px; }
.RecallMaxButtonIcon { display: block; }
.RecallMaxBookButton.RecallMaxFadeIn { animation: RecallMaxBookFadeIn 1s ease-out forwards; }
@keyframes RecallMaxBookFadeIn { 0% { opacity: 0; right: -160px; } 50% { opacity: 0.3; right: -5px; } 75% { opacity: 0.6; right: -10px; } 100%{ opacity: 1; right: 0px; } }
.RecallMaxBookButton:hover { box-shadow: 1px 4px 5px 0 rgba(128, 128, 128, 0.25); transition: all 0.4s ease-in; background: var(--recallmaxBookOnlineHoverColor); }
</style>

RecallMax Book Online Icon

Then, place the following HTML anywhere inside the body of your page.

If you like, you may edit the text of the button by modifying the red text below.

<div class="RecallMaxBookButton RecallMaxFadeIn" onclick="window.open('https://usa4.recallmax.com/rsm/request/public/bookOnline/patient/patient.html?a=SMwsrS8a3BSo3OIZ8Jva3rxRTR_nfmTqPJI')">
<div class="icon"> <svg class="SVG" version="1.1" viewBox="0 0 16.933333 16.933334" xmlns="http://www.w3.org/2000/svg" > <g id="layer1" transform="translate(0,-280.06665)"> <g id="g20571" transform="translate(-0.41856903)"> <path stroke-width="1.5" d="m 12.123047,5.625 h -1.126953 c -4.0684559,0 -7.3730471,3.3046121 -7.3730471,7.373047 v 5.556641 c -0.1868908,0.598608 0.1645108,1.375397 1.0039062,1.332031 H 58.373047 v 35.734375 c 0,2.995049 -2.377991,5.382812 -5.373047,5.382812 H 10.996094 c -2.9950523,0 -5.3730471,-2.387763 -5.3730471,-5.382812 V 23.376953 c 0,-1.333644 -2,-1.333644 -2,0 v 32.244141 c 0,4.068472 3.3045984,7.382812 7.3730471,7.382812 H 53 c 4.068454,0 7.375,-3.31434 7.375,-7.382812 V 12.998047 C 60.375,8.9296121 57.068457,5.625 53,5.625 h -0.996094 c -2.332088,-6.39390948 -10.882193,-5.62815817 -12.568359,0 H 24.689453 c -1.745886,-6.18656523 -11.042441,-5.94004653 -12.566406,0 z m 6.105469,-2.6230469 c 2.091449,0 3.462373,0.8278927 4.310546,2.6230465 h -8.273437 c 0.727207,-1.5455212 2.251723,-2.5623689 3.962891,-2.6230465 z m 27.3125,0 c 2.514627,0.010891 3.81297,1.2070473 4.3125,2.6230465 H 41.578125 C 42.305334,4.0794788 43.829849,3.0626311 45.541016,3.0019531 Z M 10.996094,7.625 h 11.976562 c 0,2.551471 -2.622119,4.498892 -4.564413,4.554688 -1.363604,-0.03062 -1.363604,2.030615 0,2 3.97158,0 6.57617,-3.521475 6.57617,-6.554688 h 25.300781 c 0,2.702667 -2.628694,4.498863 -4.572225,4.554688 -1.363604,-0.03062 -1.363604,2.030615 0,2 3.869266,0 6.583982,-3