CSS | How to use a floating button for the scheduling widget

Thanks to this blog post from Material Design Blog, you can use a couple of CSS to get a floating button opening the scheduling widget:

<style type="text/css">
.fab {
   width: auto;
   height: 40px;
   background-color: red;
   border-radius: 250px;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.1s ease-in-out;
 
   color: white;
   text-align: center;
   line-height: 40px;
 
   position: fixed;
   right: 50px;
   bottom: 50px;

   font-family: Arial, Tahoma, Verdana, Sans-Serif;
   font-size: 18pt;

   padding-left: 15px;
   padding-right: 15px;
}
 
.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   transform: scale(1.05);
}
</style>
<div class="fab" id="scheduling-22452780" onclick='openScheduling(22452780)' style="cursor : pointer; border: 0">Book a meeting</div> 
<script type="text/javascript">
    var scheduling = {server: 'app.agendize.com', button: '2015635700205465', lang: 'en'};
</script>
<script type="text/javascript" src="https://app.agendize.com/web/scheduling.js"></script>

0 Votes