Filter buttons are a great way to help your customers narrow their search for an event. Before you create the button for your Bookwhen page, you will need to create a filtered link.
This article covers:
How to create a filtered 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.
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:
Select the Save header text button to save your settings, and refresh the public page to review the result.
💡 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.
Stacking your buttons vertically
By default, multiple filter buttons appear next to each other in a horizontal layout. To group certain filters separately, insert line breaks using additional HTML code with one of the following options:
Use line breaks
Use
<br>before the filter button code snippet that's supposed to start on a new line.
Use paragraphs
Wrap the first filter button code snippet with
<p>and the last one with</p>to ensure they appear grouped on the same line. For example:
This then results in the buttons stacking vertically. For example:
Remember to 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