Introduction
With PixieBrix you can customize the interface of any website by adding native looking elements, such as buttons and panels.
This guide is all about working with buttons. You can place a button to:
- Call an API endpoint to retrieve some data
- Store data in a database
- Show a popup/alert to the user with data
- Grab data from another element on the page and copy it to the clipboard
- Trigger other mods and services
- Open a sidebar
Thus, a button can be used to trigger many different bricks.
This guide will show you how to:
- Add a button to a page
- Customize the button to match your desired look and feel
- Trigger a brick by pressing a button
Overview
- PixieBrix tries to automatically create a button when you click an existing button using the Page Editor
- You can control + click two buttons to give PixieBrix more examples and improve the probability of getting it right
- You can customize a button’s look by adding or modifying its icon and/or label
- You can use a button to trigger subsequent bricks
- You can add icons to buttons and decide on which pages they can run on by modifying the match patterns
Example: Adding a button to a company page on LinkedIn.com
To place a button on a site like LinkedIn.com I suggest you open up a company page:
You can navigate to a sample company page like this one:
Then open the Page Editor
From the left menu click Add - then select “Button”
Next hover the mouse over the browser’s webpage, until you find a button, and click it.
In our example you can click on the “More” button.
What happens next is rather magical: The PixieBrix Page Editor figures out that you clicked on a button and it will try to add a new button next to it.
Configuring the button
As you place your button on the page it will appear visually. You can now configure the following:
- Caption: The label or word describing the button, the part you can see when you click on it
- Location: This is the CSS selector used to place the button on the page, you can use the little arrow to replace the button on another part of the page - or input manually the CSS selector to use for it.
- Sites: The URL(s) where the button will appear
Customizing the button
If you scroll down in the Page Editor, you will notice there’s an advanced section - let’s analyze what this section does.
- Icon: A dropdown menu that you can use to add an icon to your button, select from hundreds of pre-existing icons. For an icon to appear on a button, please make sure you have the
{{{icon}}}code in the template of your button (see template section above) - Order/Position: After you’ve selected where to place your button, you can choose whether to place the newly added button at the start or at the end of the button group you’ve previously highlighted, giving you some extra control on the location of the button
- Template: This is where you can type the template in HTML. Any HTML works here including the CSS classes that the page already has available. You can use this to make your button look and feel like any other element on the page. This HTML will be rendered to be your button. This code can make use of nunjucks templates and more importantly two special variables:
- The
{{{icon}}}variable will be rendered in the button’s template code as an icon tag with your selected icon. - The
{{{caption}}}variable will be rendered in this code as the caption on the button that you’ve specified earlier in the button’s configuration
👀 Here is a video that shows how to do it
What happens when an error occurs during the creation of the button?
Buttons are tricky. Sometimes, you will try to place a button with the Page Editor, and it will not work.
Do not fret, there are alternatives!
When a button isn’t placed correctly, you can use an alternative starter brick as your trigger:
- Use a Context Menu
- Use a Quick Bar
These work as well as a button, they just look different.
Here’s a video that shows how to do it
Other things you can try
Alternatively, you can try the more advanced route of trying to select a CSS selector by hand. This however requires you to be able to somehow place a button anywhere on the page, even if it’s not in your desired location. Then to change the button placement, you will have to tweak the Location (under the button’s configuration) and the Template (under Advanced)
Sometimes however none of this works, that’s when we suggest to simply try another starter brick as mentioned above, either a Quick Bar or a Context Menu
Where to go next
If you were successful in adding a button, the next thing you can do is add a brick.
Adding a brick like the “confetti brick” is a great start that shows you that the button you created successfully works and can execute another brick to run.
So go ahead and add a confetti brick under your button brick, then click the button to see the confetti 🎉
