Add Timely to your website
Allowing your customers to book online is a great way to effortlessly fill up your calendar add attract new clients. With Timely, you can create booking links, widgets and buttons (whatever you fancy) to make it easy for your customers to book with you online.
This guide teaches you how to:
- Customise the booking button.
- Choose your booking option.
- Test the booking button.
- Add the button to your website.
If you have a mobile or responsive website, or would like the online booking experience to be as seamless as possible for mobile customers, we would recommend using the booking button or link options instead. If you're comfortable with html, you can use our instructions below to make the booking widget responsive.
Customise the booking button You can create as many different buttons as you like using the button creator. There will be a snippet of code or a link provided at the end of the process, which you can then add to your website, emails or social media profiles.
The first step of the process is to choose what you'd like customers to be able to book:
- Head to Setup > Booking buttons from the main menu:
- In the Customise your selection section, you can select which service, category, location and/or staff member you'd like to create a button for:
- To create a general booking option, select the All option in each drop down:
Choose your booking option
Next, you can choose what booking format you'd like to add to your website. There are a few different options:
- Book now button.
- Book now link.
- Booking widget.
Book now button
A book now button will open the booking process on top of your website. You will need to be able to edit the html (code) of your website to add a button to the page. You can choose between a light or dark button style, or use your own image.
- Select Dark Button, Light button or use your Own button image option:
- When you select Own button image a field will appear that allows you to enter a link to your own image. The image must already be available online, so you can't upload an image from your own computer:
Book now link
This is a simple link or url that you can share with customers online, it opens the booking process in a new window. It can be added to social media profiles, email campaigns or in SMS and doesn't require an understanding of html. You can also attach the link to your own image or custom text on your website, if desired.
- Select Book now link from the options:
- You will see a couple of options:
- A normal online booking link.
- An online booking link that defaults to the mobile booking process.
- A link to open the online booking process above the page (can only be added to websites where you can edit the html/code).
- If you want to add a booking link to your Facebook or Instagram page, we recommend selecting the Book now link that defaults to mobile version:
A widget is embedded in your website seamlessly and customers can interact with it without having to click on a button or link. This has a fixed width and length, but you can check out our tips below for more information on creating widgets that are mobile-friendly.
Test the booking button
Here's what they look like:
- Book now button:
- Book now link:
- Booking widget:
Add the button to your website
- How to add Timely booking to your Facebook Page
- Add Timely to Wordpress.com (Wordpress hosted) sites
- Add Timely to Wordpress.org (self-hosted) sites
- Add Timely to Squarespace
- Add Timely to Weebly
- Add Timely to RocketSpark
- Add Timely to Wix
- Add Timely to Vistaprint
- Add Timely to a Yola website
- Add Timely to your Shopify site
Note: You will need to have administrative access to your website to complete this process. If you don’t have access, or aren't comfortable using your website editor, you can pass the code to your website developer/designer to add.
Copy the code that’s generated and paste this in your website editor. For more information on how to add Timely booking to your website, make sure to check out our website guides
Creating a mobile friendly widget
If you choose the Booking widget option, you will be able to customise the width and height of the widget for your website:
If you would like the widget to automatically re-size based on the device your customers are using (i.e. make the widget responsive), then you can adjust the code to support this. This ensures your customers can easily see the entire booking process from their mobile device.
The original code will look something like this:
<iframe src="//beautydayspa1.gettimely.com/book/embed?" scrolling="no" id="timelyWidget" style="width:480px;height:500px;border:1px solid #4f606b"></iframe>
You will then want to change the width value to 100%, instead of 480px:
<iframe src="//beautydayspa1.gettimely.com/book/embed?" scrolling="no" id="timelyWidget" style="width:100%;height:500px;border:1px solid #4f606b"></iframe>
You will only need to adjust the width values, not the height, to make it mobile-friendly.