Retime for Squarespace

How to connect Squarespace

1. 1

   Copy your embed key

   In Retime, open Organization, then Embed. Copy the embed key. The same page lists the domains that are allowed to show the widget.

2. 2

   Copy the event type slug

   Open Links, choose the event type, and take the last part of its booking address. That part is the slug.

3. 3

   Turn on embedding for the event type

   Open the event type, then Booking extras, and turn on Allow embedding on external sites. An event type with the setting off shows an empty widget.

4. 4

   Add your Squarespace domain

   In Retime, open Organization, then Embed, and use Add a website to enter the exact domain, for example https://www.example.com. Until the domain is on the list, the widget stays empty.

5. 5

   Open the page editor

   In Squarespace, open Pages, choose the page, and click Edit. Click a plus sign where the widget belongs, then choose Code. Squarespace calls this the code block, and it needs the Business plan or higher.

6. 6

   Paste the code

   Set the block type to HTML and turn Display Source off. Paste the snippet below, then replace YOUR_EMBED_KEY and YOUR_EVENT_TYPE_SLUG with your own values.

7. 7

   Save and publish

   Click Save, then publish the page. The code block does not run in the editor, so open the live page to see the widget.

8. 8

   For every page at once, use code injection

   Open Website, then Website Tools, then Code Injection, and paste only the script part in the Footer field. Then put the div on each page that needs the widget. The script does nothing on a page without the div.

<div id="retime-booking" style="max-width:900px;margin:0 auto"></div>
<script>
  (function () {
    var mount = document.getElementById('retime-booking');
    if (!mount) return;

    var origin = 'https://app.retime.so';
    var key = 'YOUR_EMBED_KEY';
    var slug = 'YOUR_EVENT_TYPE_SLUG';

    var frame = document.createElement('iframe');
    frame.src =
      origin + '/embed/' + encodeURIComponent(key) + '/' + encodeURIComponent(slug);
    frame.title = 'Book a time';
    frame.loading = 'lazy';
    frame.allow = 'clipboard-write';
    frame.style.width = '100%';
    frame.style.border = '0';
    frame.style.display = 'block';
    frame.style.minHeight = '600px';

    window.addEventListener('message', function (event) {
      if (event.origin !== origin) return;
      if (event.source !== frame.contentWindow) return;

      var data = event.data;
      if (data && data.type === 'retime:resize' && typeof data.height === 'number') {
        frame.style.height = Math.max(200, Math.min(data.height, 4000)) + 'px';
      }
    });

    mount.appendChild(frame);
  })();
</script>

Questions about Squarespace