Filter buttons are a great way to help your customers narrow their search for an event.
💡 Please note: Before you can create the button, you will need to have created your filtered links.
This article covers:
How to create a link
We have created a Google Sheet to help you construct filtered links and filter buttons. Open the Google sheet, select Make a copy and follow the instructions.
If you prefer to construct the filter button manually, please follow the below steps. 👇
Creating your filter buttons
How the use of buttons can appear on your public page:
💡 Please note: Each button needs a place to link through, i.e. an event or website. Otherwise, the button will be for display-only purposes.
Button code
An example of the code you need to enter to create a button is:
<div class="view_button">
<a class="small button success" href="https://bookwhen.com/grow?tags=grow"style="margin-bottom:10px;">Grow Classes</a>
</div>
Broken down:
The button shape: | class="view_button"> |
The button colour: (more colours found below) | <a class="small button success" |
Your filtered link: | |
The text on your button: | >Grow Classes</a>
|
Adds space after your button: | style="margin-bottom: 10px;"
|
💡 Please make the following edit(s) if you are using the '&' symbol in tags:
The '&' symbol should be entered as '%26':
For example, instead of:
"tags=Information&Support"
Use:
"tags=Information%26Support"
✨ Learn more about tag editing here.
Selecting your filter button colour
 |
<a class="small button" |
 |
<a class="small button success" |
 |
<a class="small button info" |
 |
<a class="small button secondary" |
 |
<a class="small button warning" |
 |
<a class="small button alert" |
Using Emojis on your filter buttons
You can add emojis to your buttons, like in this example:
✨ Learn more about using Emojis here.
Adding the buttons to your page
Once you've created your button code, open your Public Page:
Select Customise page in the top right-hand corner. Then, scroll down to paste the code into the General information field:
You can 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.
Remember to save your settings using the Save header text button after you have finished, and refresh the public page to view the result!
💬 Any questions or feedback? There are two ways to get in touch:
For a quicker response, please contact us via live chat on our homepage or your account.
Or send us an email
Thank you! 🕺
Tags: publicpage