Add Booking Widget to Website

Follow

Setster can easily be added to your site, even multiple sites, blogs, even your emails.
Now your clients can book appointments with you wherever they find you. 

First you need to know your options and decide which suits you best, and how you want the appointment tab to appear.

Login into Setster > Go to Settings > Get Widget

and let’s get started.

In the First option “Add the Appointment Tab to your website” Click on "Get the code for this widget". Here you have options, so let’s go through them. 

Placement: This is where the Setster appointment tab would appear. You have the option of, Left, Right, or Hidden. Hidden allows you to add the code without the button then create your own button, word or image on your own site to open the appointment widget. Instructions on this found here.
There is also an embed option, if you wish to embed the booking widget into a page. Instructions on this found here.

Button Label: Choose from, Appointment, Schedule, Calendar, Availability and Book Now. This is what would be shown in the Setster appointment tab. 

Provider: If you have more than one provider, you can choose to show only this specific provider within this widget. So you can add the code to different pages or areas with this provider pre-filtered. Great if you have a larger team, and you’re adding the widget to specific pages that relate to these providers or services. 

Service: Same as providers, it allows you to filter the service. So you can have the widget defined for a specific service. This is perfect if your customer has already selected this service from your website. 

After you pick your options you would need to copy the code. On PC computers this is done by highlighting the code, then selecting CLTR + C on your keyboard. On Mac computers it would be CMD + C to copy. 


Now let’s add it to your site.

The Basic Idea

Setster can easily be added to your site with a simple copy and paste. Most platforms allow you to edit the HTML, and this is where the Setster code needs to be.
Most platforms require it to be within the head section right before the /head area - This is the optimum Setster place for basic integration.

 
Here is an example:

 

<html ...>

<head>

   <title>...</title>

   .

   .

   Paste your Setster Code here.

</head>

<body>

.

.

.

.

.

</body>

</html>

 


WordPress

If you are using a self hosted version of WordPress (popular platform) checkout the steps here

Self Service Website Builders & Blogging Platforms

If you are using other blogging platforms or a website building platform, we may have specific instructions found here. They all have some way for you to inject your own script into the generated HTML of the website. This is where you would need to copy and paste the code. The most common instructions provided by the website builder, would be how to inject the Google Analytics code into your website. Many of them have a custom HTML button you can use to inject these types of codes. What you need to do is follow the same instructions but insert the Setster code instead. 

Content Management Systems (CMS)

Content management systems can be hosted or running on your own servers. Content management systems are very flexible in regards to modifying the HTML of the website. If you are using a content management system (CMS) you need to paste the Setster code in the head template of your website, if you have a system administrator responsible for this task just point them to this help section for instructions. The basic idea is the same as all sections above. You need to copy the Setster code from the Get Widget section and paste it into the head section of the CMS template of your website.

 

Still need help?
Some platforms limit the use of JavaScript and may not allow Setster to be placed. We try to continuously find solutions for these, simply open a ticket with our support team and we'd be happy to help.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request
Powered by Zendesk