MaxAssist® Book Online Icon Installation

These instructions are to help your webmaster place MaxAssist®'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.

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>

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://usa5.recallmax.com/rsm/request/public/bookOnline/patient/patient.html?a=HUjFcqzYRQm3VsCnf0gUZkFU_P2bCOpxa2')">

		<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.212555 6.583982,-6.554688 H 53 c 2.995049,0 5.373047,2.377998 5.373047,5.373047 v 4.886719 H 5.6230469 v -4.886719 c 0,-2.995049 2.378002,-5.373047 5.3730471,-5.373047 z m 6.902344,22.064453 c -1.291578,2.91515 -1.29173,6.901249 0.384765,11.574219 1.668348,4.650255 2.548972,7.522972 3.460938,9.396484 0.864245,1.86087 2.130339,2.857422 3.957031,2.857422 3.168906,0 3.865915,-2.985005 4.509766,-5.513672 0.329724,-1.294299 -1.611681,-1.78844 -1.941407,-0.49414 -0.385193,1.972411 -1.054148,4.007812 -2.568359,4.007812 -1.244719,-0.0021 -1.694607,-0.934788 -2.154297,-1.734375 -0.773968,-1.590009 -1.700924,-4.516649 -3.380859,-9.199219 -1.553754,-4.330847 -1.456728,-7.794774 -0.44336,-10.082031 1.444021,-3.244717 5.857508,-4.894069 8.451159,-1.927734 0.217394,0.249156 0.444588,0.524003 0.705078,0.796875 -0.21162,0.01699 -0.430677,0.05046 -0.630859,0.05273 -1.333795,0.01512 -1.31231,2.014627 0.02148,2 2.352875,0 4.618793,-0.329734 6.150379,-1.423822 0.60696,-0.450746 1.021353,-0.980175 1.410156,-1.425781 2.669253,-2.875925 7.101777,-0.957383 8.44336,1.927734 1.013362,2.287219 1.112346,5.751184 -0.441407,10.082031 -1.679935,4.68257 -2.606891,7.60921 -3.380859,9.199219 -0.507018,1.047136 -1.095306,1.734375 -2.148438,1.734375 -1.71254,0 -2.071131,-2.053999 -2.435546,-3.470703 -0.484236,-2.207276 -1.227626,-4.974609 -3.869141,-4.974609 -1.33367,0 -1.33367,2 0,2 1.447556,0 1.607201,2.216815 1.927734,3.470703 0.540788,2.427709 1.947501,4.924104 4.376953,4.974609 2.011592,-0.07948 3.18211,-1.298991 3.949219,-2.857422 0.911966,-1.873512 1.79259,-4.746229 3.460938,-9.396484 1.676492,-4.67297 1.684148,-8.659069 0.392578,-11.574219 -1.291574,-2.915187 -3.969942,-4.673828 -7.123047,-4.673828 -2.685688,0 -4.323913,1.950705 -5.751958,3.375 -0.807293,0.616874 -1.736502,0.695534 -2.457018,-10e-7 -1.706831,-1.779494 -3.788928,-3.31435 -5.736329,-3.375 -3.672802,0 -6.053844,2.355963 -7.13865,4.673827 z" transform="matrix(0.26458333,0,0,0.26458333,0.41856903,280.06665)"/>
				</g>
			</g>
			</svg>

		</div>

		<div class="content">

			Schedule<br>Appointment

		</div>

	</div>

The button will link to the MaxAssist® Book Online page which is customized for your practice.
If the Book Online feature is not enabled for your practice then it will forward to an error page stating that Booking Online is disabled at this time.

If you have any questions, please call MaxAssist® Support: 1-800-651-8603, Ext. 1