Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Adding your scheduler, booking button, or booking bar to your website 

Have clients book directly through your website by embedding your scheduler on it. Add booking buttons and booking bars to create different ways of directing clients to your scheduler from other parts of your website.

  • The embedded scheduler is a portal directly to your full scheduler. Clients book through it just as they would if they visited your standalone scheduler.
  • The booking button is a button that leads to your standalone scheduler.
  • The booking bar is a call-to-action bar with a booking button, which displays at the top of your whole website or on specific pages.

Get the code

The code for embedding your scheduler is an iframe, while the code for the booking button and bar includes HTML for the objects and code snippets.

To get your embed code:

  1. In Scheduling, click Scheduling page link.
  2. In the Direct links & embedding section, choose the tab for embedding your scheduler, adding a booking button, or adding a booking bar.
  3. Click Copy.

Add the code to your site

If you have a Squarespace website:

  • To add your scheduler, use a Scheduling block instead of manually embedding.
  • To add a booking button, paste the code that Scheduling generated into a code block.
  • To add a booking bar, use code injection to paste the code that Scheduling generated into the footer section.
Using code injection and adding iframes or JavaScript to code blocks are premium features available in Business and Commerce plans.

If you use another provider and aren't sure how to add this code to your website, contact your website builder.

Customize the booking button or bar

To change the color of the booking button or booking bar, edit the color of buttons and accents on your scheduler. The booking button or booking bar will follow suit. To change the color of buttons and accents on your scheduler:

  1. In Scheduling, click Customize appearance.
  2. Use the Button/accent color dropdown menu to choose a color.
  3. Click Save changes.

Fonts and other styles generally match the default for your own website. Update the wording of the button or bar by editing the embed code itself.

Other website builders

1&1

Add Scheduling's automatically generated embed code to a Widget/HTML element. You may need to view your scheduler in Page View to check that it’s functioning correctly.

To prompt 1&1 to display your embedded scheduler to clients on mobile devices, disable the option to only display optimized content on smartphones and tablets.

Drupal

Change your text format to Full HTML to add custom HTML, then add the Scheduling-generated code snippet.

GoDaddy

Follow GoDaddy’s instructions for adding custom HTML to add the code Scheduling automatically generates.

Leadpages

Use the Leadpages HTML widget to add the code snippet Scheduling provides.

Shopfiy

Use the HTML editor to add the code that Scheduling generates for you to one of your pages. Make sure to save before trying to view your new scheduler.

Vistaprint/Webs.com

Use the custom HTML feature to add Scheduling's automatically generated code to your website.

Weebly

Drag the Weebly Embed Code element onto your web page, then add Scheduling’s automatically generated code to the widget.

Wix

Follow Wix’s steps for adding the HTML element to your site. When you’re ready to add code to the HTML element, use the code snippet that Scheduling generates for you.

Note: It isn’t possible to embed your scheduler if you’re using the Wix Artificial Design Intelligence instead of the editor.

If the frame holding your embedded scheduler is shorter than the scheduler itself, some mobile devices may experience glitches when booking. To prevent this, go into the Wix mobile editor and drag the bottom of the embedded scheduler’s frame down until the entire scheduler is visible. Make sure the bottom of the scheduler is visible through all of the booking process.

WordPress

To embed your scheduler on your WordPress site, use the WordPress Text Editor. You can use it to add the embed code that Scheduling generates for you, or use the Acuity Scheduling plugin. The results are the same for both methods.

To embed your scheduler using the Acuity Scheduling plugin:

  1. Search for the Acuity Scheduling plugin, then install and activate it.
  2. Get the link to your standalone scheduling page by going to the Scheduling page link panel and clicking Copy in the General scheduling page section.
  3. Use the WordPress Text Editor to add the tag:[scheduling site="[URL]"] to a page, then replace [URL] with the link to your standalone scheduling page.

To embed your scheduler directly using code Scheduling generates:

  1. Get the embed code for your scheduler by going to the Scheduling page link panel, clicking Embed Other, then clicking Copy.
  2. Use the WordPress Text Editor to paste the code you’ve copied to one of your pages.
Note: You can embed your Scheduler on sites using WordPress as a website builder, except those hosted by WordPress.com. To check if your site is hosted by WordPress.com, look at your URL. Sites hosted by WordPress.com will end in wordpress.com. If this applies to you, you can still link from your WordPress.com site to your standalone scheduling page to allow clients to book.

Zenfolio

Follow Zenfolio’s instructions for creating a custom page and adding and embedding code. Use Scheduling's automatically generated code.

Was this article helpful?
3 out of 6 found this helpful
Adding your scheduler, booking button, or booking bar to your website