Filter buttons are a great way to help your customers narrow their search for an event. Before creating the button, you will need to have created your filtered links. You can read how to do that here

This article covers:

How to create a link

There is a Google Sheet to help you construct filtered links and filter buttons. See here to 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

Here's an example of how the use of buttons created with HTML can look on your public page:

Each button needs a place to link through. In this example, we have created filtered links by entry.

The link for the 'Grow Classes' button is, which is the link for the entry that holds all the Monday time slots.

The code

The code you need to enter to create this button is:

<div class="view_button">

<a class="small button success" href=""style="margin-bottom:10px;">Grow Classes</a>


Let's break that down:

  • The button shape: class="view_button">

  • The button colour: <a class="small button success"

    • (More colours found below)

  • Your filtered link: href=""

  • The text on your button: >Grow Classes</a>

    • So you could, for example, change this to  >Online Classes</a>

Adds space after your button: style="margin-bottom: 10px;"

  • So that any additional buttons you add don't run together on mobile devices.)

Please note: additional edit(s) might be required when using the ampersand symbol (&) in tags.

For example, the '&' symbol should be entered as '%26' instead.

"tags=Information&Support" needs to be "tags=Information%26Support"

To read more about this, see here under 'Tag filters'.

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:

You can find more information on using Emojis here.

Once you've created your button code, open your Public Page and select Page Setup in the top right-hand corner. Then, scroll down and paste the code in the General information field:

Remember to save your settings after you have finished, and refresh the public page to see the result!

  • For example, 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 within Bookwhen.

Return to the top

Tags: publicpage

Did this answer your question?