Embed the booking widget on your site

The Doorstep booking widget lets customers book an appointment right on your own website. It is a small piece of code you paste into a page once. After that, the widget shows up on your site, matches your brand, and takes bookings without sending anyone to a separate page.

This guide shows you how to get your code and add it to the most common website builders.

Get your code

Your code lives in your Doorstep dashboard, under your booking widget settings. It already has your own public key filled in, so the safest way to get it is to copy it straight from there.

Your code looks like this:

<!-- Doorstep booking widget -->
<div id="doorstep-widget"></div>
<script
  src="https://widget.doorstep.wholeclove.com/ds-widget.iife.js"
  async
></script>
<script>
  window.addEventListener("load", function () {
    DoorstepWidget.mount("#doorstep-widget", {
      publicKey: "dspk_YOUR_PUBLIC_KEY",
      theme: {
        primaryColor: "#0f766e",
        borderRadius: "0.75rem",
      },
    });
  });
</script>

The first line puts an empty box on your page. The next lines load the widget and fill that box with your booking flow. The widget appears wherever you paste the code.

Add it to your website builder

The same code works everywhere. What changes is where you paste it. Find your platform below.

WordPress

1. Edit the page or post where you want the widget.
2. Add a Custom HTML block.
3. Paste your code into the block.
4. Update or publish the page.

If you use the older classic editor instead of blocks, switch from the Visual tab to the Text tab before pasting, so your code is not changed.

Squarespace

1. Edit the page where you want the widget.
2. Add a Code block.
3. Paste your code into the block and save.

Adding custom code on Squarespace requires a Business plan or higher. If your plan does not allow code blocks, use the universal option below instead.

Wix

Wix runs pasted code inside a protected box, which can keep the widget from working smoothly. On Wix we recommend the universal option below, which is the most reliable choice.

If you still want to try the inline widget, add an Embed HTML element and paste your code into it.

Shopify

1. In your theme, open the page template or theme.liquid file where you want the widget.
2. Paste your code just before the closing </body> tag.
3. Save your changes.

Placing the code near the end of the page helps it load reliably alongside the rest of your theme.

A universal option for any site

If your website builder does not allow custom code, or you do not have a website at all, you can use your hosted booking page instead. It is a full booking page that Doorstep hosts for you, and you can either link to it or drop it into a page with this code:

<iframe
  src="https://widget.doorstep.wholeclove.com/b/dspk_YOUR_PUBLIC_KEY"
  style="width:100%;min-height:720px;border:0"
  title="Book an appointment"
></iframe>

Copy your hosted page link from your Doorstep dashboard, next to your widget code.

Match your brand

The widget can take on your colors, font, and corner style so it blends into your site. You set these in the theme part of your code:

• primaryColor — the main color for buttons and highlights, as a hex color like #0f766e.
• fontFamily — the font the widget uses, so it can match the rest of your site.
• borderRadius — how rounded the corners are, such as 0.75rem for gently rounded or 0 for square.

You can also set these visually in your Doorstep dashboard and see a live preview as you change them.

Control which sites can show your widget

For your protection, the widget only works on websites you have approved. In your Doorstep dashboard you keep an allowed sites list. Add the web address of each site where you want the widget to appear, such as https://www.yoursalon.com.

Add just the address itself — starting with https:// and with no extra path after the site name. If a site is not on your list, the widget will not load there. If your list is empty, the widget is blocked everywhere until you add your site, so remember to add your website before you go live.

Where to go next

• Set up your account if you have not finished the setup wizard.
• Copy your live code and theme settings from your Doorstep dashboard.