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.

If you'd like to prefill the user's email address or name, you can optionally set the data-email and data-display-name attributes respectively:

<a data-savvycal-embed data-email="derrick@savvycal.com" data-display-name="Derrick Reimer" href="https://savvycal.com/derrick/chat">Schedule time with me</a>

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.
email The scheduler's email address to prefill. Optional.
displayName The scheduler's first and last name to prefill. Optional.
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.

Open a link via JavaScript

You may use the open call to open the embed any time after calling init:

<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');
  SavvyCal('open', { link: 'derrick/chat' });
</script>

The open command accepts the following options:

Property Default Value
Description
link The ID for the link (e.g. derrick/chat). Required.
email The scheduler's email address to prefill. Optional.
displayName The scheduler's first and last name to prefill. Optional.

Still need help? Contact Us Contact Us