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>

We support 4 different modes for your SavvyCal embed:

  1. Display pop-up via hyperlink
  2. Display a floating pop-up button
  3. Open a pop-up via JavaScript
  4. Render an inline booking interface

Read on for details about how to do it!

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>

2. Display a floating pop-up button

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.
position "bottom-right" The position for the floating button (either "bottom-right" or "bottom-left").

3. Open a pop-up 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.

4. Render an inline booking interface

This option allows you to place the SavvyCal scheduling interface directly inline with your other website content.

To render your link inline, make an inline call after you call init:

<div id="booking-page">
  <!-- this is where we will inject the interface -->
</div>

<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('inline', { link: 'derrick/chat', selector: '#booking-page' });
</script>

The inline command accepts the following options:

Property Default Value
Description
link The ID for the link (e.g. derrick/chat). Required.
selector The DOM selector for node where we should render the interface (e.g. #booking-page). Required.
email The scheduler's email address to prefill. Optional.
displayName The scheduler's first and last name to prefill. Optional.

Listening for events

When someone schedules a time on an embedded booking, we dispatch an event on the window. You may listen for this event and perform actions (such as tracking the event in analytics or sending the data over to another provider):

<script>
  window.addEventListener("savvycal.scheduled", (ev) => {
    // The `detail` property contains the following data about the newly-scheduled event:
    //   id, startAt, endAt, email, displayName, fields, phoneNumber, timeZone, guests
    const data = ev.detail;

    // Do something with the data...
  })
</script>

Still need help? Contact Us Contact Us