Schedulista allows clients to book your services online based on the durations of your services, the appointment times you've set, and your availability. We provide a scheduling page with a URL unique to your business name that clients visit to see your list of services and schedule with you.
You might want clients to book right from your own website rather than going anywhere else. Embedding the scheduler on your WordPress site may help with this.
Note on embedding a scheduler
This is an advanced feature and requires editing your website's HTML. If you have a web designer, email them the HTML code for the scheduler widget and a link to these instructions.
Before you start, you should determine if embedding the scheduler is your best option.
Contents:
About WordPress sites
As of July 2023, the WordPress platform offers three options for websites:
WordPress.com - a free website service hosted by WordPress
WordPress.com with a paid subscription plan - a website hosted by WordPress that offers more features and flexibility. The ability to add plugins and HTML to your site is available starting with the WordPress Business paid subscription.
WordPress.org - a free website platform that provides the most flexibility to create and develop your own "self-hosted" website. WordPress.org websites require a third-party site hosting service like GoDaddy, Namecheap, Bluehost, etc.
Find out which option is best for what you need.
Your scheduler can only be embedded on WordPress.org sites or on WordPress.com sites with a paid WordPress Business, Commerce, or Enterprise plan subscription. (Theses subscriptions were previously called Business, eCommerce, or WordPress Pro plans.)
HTML code limitations prevent the scheduler widget code from working on sites on the WordPress Premium, Personal, or Free plans. You can compare their subscription plan features and pricing here.
We also offer a WordPress plugin to add the scheduler to your site using WP shortcode that can work with many different themes designed for WordPress.
Embedding the scheduler using the Code editor
Through the admin, WordPress allows you to edit a page on your website through two styles of editor: the Visual editor (default) or the Code editor. We recommend using the Code editor because it is less subject to change.
The Code editor (previously called the Text editor or the HTML editor) allows you to use HTML code to design and edit your site, including adding custom HTML code for elements and widgets like the Schedulista scheduler.
(1) Edit the page on your WordPress site
(2) Click on the three-dot Options menu icon on the top right
(3) Select Code editor from the menu
(4) In Schedulista, on the web app: go to Settings > Add to your website
On the mobile app (version 7.3 and above): Tap on Add to your website under the Connect section on the Settings tab
(5) Scroll down to the Embed your scheduler in a website (as a widget) section
(6) Copy the HTML code to your clipboard
On the web app: Click on the code in the field to highlight the code, then either right-click and select Copy; or press Ctrl-C on PC or Cmd-C (Command-C) on Mac. On a tablet, you may need to press and hold to highlight the code, and an action menu should appear with an option to copy.
On the mobile app: Press and hold on the code in the field to highlight the code; your phone's action menu should appear with an option to copy
(7) Back on your WordPress site, paste the code into the page Code editor where you want the widget to appear
(8) Click Preview to see what the page looks like with the scheduler. Make adjusts as needed.
(9) Click the Update button to save the page
Note: If this is a new page you are adding to your site, there will be a Save Draft button and a Publish button you can click rather than an Update button.
Embedding the scheduler using the Visual editor
The Visual editor is the default option for editing a page on your WordPress site. This allows you to add element blocks to the page to add things like text, pictures or graphic images, buttons, spacers, polls, etc.
The Visual editor offers a Custom HTML element that you can use to add the Schedulista scheduler widget to your site.
(1) Edit the page on your WordPress site
(2) Scroll down the page to locate where you'd like to place the element block.
At the bottom of the page, you can click the plus symbol in the black box to add a block below everything else.
When you hover between other existing element blocks, a blue block will appear you can click to add a block between those elements.
(3) Search for the Custom HTML block
(4) Select the Custom HTML block to add to the page
(5) In Schedulista, on the web app: go to Settings > Add to your website
On the mobile app (version 7.3 and above): Tap on Add to your website under the Connect section on the Settings tab
(6) Scroll down to the Embed your scheduler in a website (as a widget) section
(7) Copy the HTML code to your clipboard
On the web app: Click on the code in the field to highlight the code, then either right-click and select Copy; or press Ctrl-C on PC or Cmd-C (Command-C) on Mac. On a tablet, you may need to press and hold to highlight the code, and an action menu should appear with an option to copy.
On the mobile app: Press and hold on the code in the field to highlight the code; your phone's action menu should appear with an option to copy
(8) Back on your WordPress site, paste the code into the Write HTML field of the Custom HTML block
(9) Click Preview in the Custom HTML block to see what the scheduler looks like on the page;
or click the Preview button on the top right of editor to see what the page looks like with the scheduler. Make adjustments as needed.
(10) Click the Update button to save the page
Note: If this is a new page you are adding to your site, there will be a Save Draft button and a Publish button you can click rather than an Update button.
Embedding the scheduler using the Classic editor
You may be using an older version of the WordPress admin for a WordPress.org site or possibly an older editor for a WordPress.com site. These provide a different version of the page editor referred to as the Classic editor.
WordPress also offers a plugin that lets you revert to the Classic editor.
(1) Using the Classic editor, edit the page on your WordPress site
(2) Click on the Text tab to use the Text editor
Original image by WordPress
If the classic WordPress.com page editor is available, click on the HTML tab to use the Text editor for the page where you'd like to embed the scheduler
(3) In Schedulista, on the web app: go to Settings > Add to your website
On the mobile app (version 7.3 and above): Tap on Add to your website under the Connect section on the Settings tab
(3) Scroll down to the Embed your scheduler in a website (as a widget) section
(4) Copy the HTML code to your clipboard
On the web app: Click on the code in the field to highlight the code, then either right-click and select Copy; or press Ctrl-C on PC or Cmd-C (Command-C) on Mac. On a tablet, you may need to press and hold to highlight the code, and an action menu should appear with an option to copy.
On the mobile app: Press and hold on the code in the field to highlight the code; your phone's action menu should appear with an option to copy.
(5) Back on your WordPress site, paste the code into the page text editor where you want the widget to appear
(6) Save the page
Embedding the scheduler using the Widgets option
Depending on your version of WordPress and the theme that you are using, you may have the Widgets option available to add a widget like the Schedulista scheduler using either HTML code or the WP shortcode.
This option will be listed under the Appearance category on the WordPress admin menu on the left.
We recommend placing the scheduler on a specific page or pages on your website, but this option can be used to add the scheduler to a location that appears on every page of your site, if you need.. These include the Header, Footer, or various sidebars.
When you select which location, you can search for and add the Custom HTML element to paste the HTML code for the scheduler widget or the Shortcode element to paste the WP shortcode for the scheduler.
Related articles:
keywords: Embed, embed scheduler, widget, add scheduler, website, site, WordPress, WordPress.com, WordPress.org, HTML, HTML code