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!

1. Display pop-up 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>

Here are all the data attributes you can use:

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:

You can also update your widget configuration after the initial init call like this:

<script>   
  // For example, this will disable the widget
  SavvyCal('widget', {
    enabled: false
  });

  // This will enable the widget and update the prompt
  SavvyCal('widget', {
    enabled: true,
    prompt: 'Book with me'
  });
</script>

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:

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:

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 - the event ID
    //   link - the link slug (e.g. "derrick/chat")
    //   startAt - the start time of the event
    //   endAt - the end time of the event
    //   email - the scheduler's email address
    //   displayName - the scheduler's display name
    //   fields - custom question data
    //   phoneNumber - the scheduler's phone number (if collected)
    //   timeZone - the scheduler's time zone (e.g. "America/Chicago")
    //   guests - additional guests invited to the event
    //   url - the event URL
    
    const { id, link } = ev.detail;

    // Do something with the data, like record an analytics event...
  })
</script>