Adding Booking Widget to Website or Blog

The Setster widget can be placed on your website in many different ways and can allow for a more personalized experience for booking to happen within your own site. We will try to cover the basics here, but please note you can connect with us at any time if you have something specific in mind as we're capable to advance this integration in many ways.

Getting Your Widget Code Ready

First you need to decide which type of widget suits your website best, and how you want this to appear on your site

  1. Login into Setster
  2. Go to Settings >> Integrate >> Website or Blog 
  3. Select Appointment Button Position: This is where the Setster appointment tab would appear. You have the option of: Left, Right, Hidden or Embed. 
    • 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. This is a great way to keep the look of your site your own.
    • There is also an embed option, if you wish to embed the booking widget into a page. Instructions on this found here. This looks similar to how a YouTube video looks like on a website as part of the page when it loads.
    • Left or Right: You have the option of adding an 'Appointment' button on your site that when clicked will open the widget as a pop-up/overlay.  Click on the dark grey "Left" or "Right" button to see all the available options.
  4. Select Appointment Button Text: Choose from Appointment, Schedule, Calendar, Availability and Book Now. This is the text that will be shown in the Setster appointment button you selected above. Hidden or Embed do not give you this option.
  5. Select Staff: If you have more than one staff member in your team, you can choose to show only this specific member within a specific widget. So you can add the code to different pages or areas on your site with specific staff member predefined. Great if you have a larger team, and you’re adding the widget to specific pages that relate to these members. To allow booking with any staff member, simply leave the option unchecked.
  6. Select Locations: Same as staff, it allows you to predefine the locations. So you can have the widget defined for a specific location or multiple. This is perfect if you have multiple locations and you want to add the code to different pages on your website with locations predefined. To allow booking at any location, simply leave the option unchecked.
  7. Select Services: This option allows you to filter the services. So you can have the widget defined for a specific service or multiple. This is perfect if your customer has already selected this service from your website, for example you can create a button on your site that states "Click here to schedule a demo" and they widget will only open with "demo" as the service defined.
  8. Return URL: You can set a return URL so when the customers complete the booking and click the Close button, they are taken back to any page you wish to send them to. Again keeping them engaged on your site and leading them to the next steps.
  9. Copy Code: When you're happy with your widget settings, click anywhere on the code box to automatically copy the code on your clipboard. 

 

Email Code to Your Developer

If  you have someone else updating your website for you, you can email them the code you created above directly by entering their email address and clicking Send. We will then send them an email with instructions. 

Adding Code To Website 

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 go.

Most platforms require it to be within the head section right before the /head area - This is the optimum Setster place for basic integration.

But if you choose to embed then anywhere in the /body where it fits along with your content will work. 

Here is an example:

<html ...>
<head>
<title>...</title>
Paste your Setster Code here.
</head>
<body>
</body>
</html>

Some popular platforms: 

WordPress

If you are using a self hosted version of WordPress checkout the steps here

Self Service Website Builders & Blogging Platforms

If you are using other blogging platforms or a website building platform they almost all have some way for you to inject your own codes 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 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. Feel free to get in touch with your platform name and we can help.

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. 

 Still need help?

Some platforms limit the use of JavaScript and may not allow Setster to be placed or maybe something is not working as expected. We try to continuously find solutions for these, just get in touch with your platform name and we'll help.

For more info, please do get in touch. 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request