Embedding links on your website

Embedding scheduling links is an easy way to let people to book time with you without navigating away from your website. This guide will teach you how to install our embed script and the various ways to trigger scheduling links to appear.

Installing the embed script

Copy and paste the following JavaScript code just before the closing </body> tag:

<script>window.SavvyCal=window.SavvyCal||function(){(SavvyCal.q=SavvyCal.q||[]).push(arguments)};</script>
<script async src="https://embed.savvycal.com/v1/embed.js"></script>
<script>
  SavvyCal('init')
</script>

Display a link via hyperlink

To open a scheduling link when someone clicks a hyperlink, add a data-savvycal-embed attribute to the link.

<a data-savvycal-embed href="https://savvycal.com/derrick/chat">Schedule time with me</a>

We'll display the link from the href in a lightbox.

Initialize the widget

To render a widget at the bottom of your site, enable it when initializing the script by setting enabled to true and populating the link attribute.

<script>   
  SavvyCal('init', {
    widget: {
      enabled: true,
      link: 'derrick/chat'
    }
  })
</script>

This will inject a floating button at the bottom your site:

The widget configuration accepts the following properties:

Property Default Value
Description
enabled false Determines whether the widget is visible.
link The ID for the link (e.g. derrick/chat). Required.
icon "calendar" The icon to display on the button (either calendar or none).
prompt "Schedule a time" The button text.
backgroundColor "#FFCA00" The background color for the button.
textColor "#141E2F" The text color for the button.
delay 1000 The number of milliseconds to wait before the widget appears.

Still need help? Contact Us Contact Us