Filter buttons are a great way to help your customers narrow their search for an event.
This article covers:
💡 Please note: Before creating the button, you must have created your filtered links.
How to create a link
We’ve created a Google Sheet to help you build filtered links and filter buttons. Open the Google sheet, select Make a copy and follow the instructions.
If you’d prefer to build the filter button manually, follow the steps below. 👇
Creating your filter buttons
Filter buttons appear at the top of your public page:
💡 Please note: Each button needs a destination, such as an event or website. Without a link, the button will be for display purposes only.
Button code
An example of the code you need to enter to create a button:
<div class="view_button">
<a class="small button success" href="https://bookwhen.com/grow?tags=grow"style="margin-bottom:10px;">Grow Classes</a>
</div>
The button shape:
class="view_button"
The button colour:
<a class="small button success"
More colours can be found below.
Your filtered link:
The text on your button:
>Grow Classes</a>
For example, you could change this to:
>Online Classes</a>
Adds space after your button:
style="margin-bottom: 10px;"
This ensures that additional buttons don’t run together on mobile devices.
💡 If you use the '&' symbol in tags, please replace '&' with '%26'.
For example, instead of:
"tags=Information&Support"
Use:
"tags=Information%26Support"
Selecting your filter button colour
Blue:
<a class="small button"
E.g.
Green:
<a class="small button success"
E.g.
Light blue:
<a class="small button info"
E.g.
Grey:
<a class="small button secondary"
E.g.
Orange:
<a class="small button warning"
E.g.
Red:
<a class="small button alert"
E.g.
Using Emojis on your filter buttons
You can add emojis to your buttons, for example "💙 Online Classes":
Adding the buttons to your page
To add the buttons to your page:
Open the relevant Scheduling page.
Select View public page:
Select Customise page in the top right-hand corner. Then, scroll down to paste the code into the General information field:
Stacking your buttons vertically
Use the code </p> to create a line break if you want to stack your buttons vertically:
You can also use buttons to link to other links (not just your filtered link within Bookwhen). This could be your website, etc. To do this, replace the Bookwhen URL in the code with your website URL.
Select the Save header text button to save your settings, and refresh the public page to review the result.
💬 Need extra help?
For the quickest response, contact us via live chat on our homepage or your account. Buddy, our trusty chatbot, will assist first and pass you to a support team member if needed.
Prefer email? Send us an email instead.
Thank you! 🕺
Tags: publicpage