You can add a button to a web page as the starting point for actions or enhancements. While they may look like any other button on the page, they can do so much more. For example, you can connect LinkedIn, Slack, and Asana or automate a common task. This guide walks you through the process of creating and configuring a button on a webpage.
Check out the Button Placement Overview for a quick demonstration.
Follow these steps to add a button to a web page and configure the button actions.
- Navigate to the page where you want to add a button (e.g., https://www.linkedin.com/company/salesforce/)
- Open the PixieBrix Page Editor.
- In the left pane, click Add > Button.
- Go back to the web page and click on an existing button. A cloned copy of the button displays on the page in real time.
- Go to the PixieBrix Page Editor, and then edit the name in the Extension Name field if desired.
- In the Configuration section, enter the following information:
Field | Description |
Button Text | If desired, edit the default button text. This is the text that appears on the button |
Location | To change the location of the button on the page, click the green CSS selector arrow and select a new location. The purple highlighted border indicates the selected area. |
Sites | If you want to increase accuracy and processing speed, you can add the sites where you want the button to display. If you add sites, however, make sure that at least one URL matches the pattern(s) you added.
You can also:
• Click the Site, Domain, HTTPS, or All URLs shortcuts to insert URLs automatically.
• Click Add Site to add more sites. In most cases, users display the button on one site, but you can enter more than one URL to display it on multiple sites.
• Click ABC Text > Remove to remove a site from the list. |
- Next, go to the Advanced: Item Options section, where you can change the look and feel to match other elements on the page. PixieBrix automatically matches the button’s native style, but you can customize it to your liking. If you prefer to watch, the Personalizing and editing buttons video walks you through the process.
Field | Description |
Icon | • If the button you cloned originally had an icon, you can select a different icon to change it.
• If the button did not have an icon, you can choose one from the drop-down list. Make sure to add the {{{icon}}} - variable in the Template field. |
Order/Position | • Select Start to place the button before the button you cloned.
• Select End to place the button after the button you cloned. |
Template | Use HTML code, CSS classes, and more to customize the button further.Â
You can click on the shortcuts to automatically insert these variables:
• {{{icon}}} - Displays an icon on the button. This variable is required if you selected an icon in the Icon field above.
• {{{caption}}} - Displays the button caption (name) on the button.
• {{{space}} - Adds a space ( ) between the caption and icon. |
Target Mode | Select one of the following options:
• eventTarget  to pass the button element clicked as the root downstream to the bricks in the pipeline.
• Select document to pass the whole HTML document as the root downstream to the bricks in the pipeline. |
Synchronous | Toggle on to prevent users from repeatedly clicking the button while the action is in progress. Toggle off the disable this function. |
Show Success Message | Toggle on to display the default success message after the button action completes. Toggle off to prevent the success message from displaying. |
Troubleshooting Buttons
Here are some things you can try if you have problems adding buttons.
Option 1: While placing a button, press the Shift key
Try clicking around in different areas of the page while holding down the Shift key. To see this in action, watch the Advance Button Placement and Alternatives video.
Option 2: Use the CSS Selector manually
You can also try using the CSS selector manually. First, place the button anywhere on the page, even if it’s not your desired location. Then, you may tweak the CSS in the Location field and the code in the Template field.
Option 3: Use a different extension
If all else fails, you can use a Context Menu or a Quick Bar instead of a button. The look will be different, but the functionality will be the same.
Next Steps
Congratulations on adding a button! Now, let’s take it a step further and add the “Show Confetti” brick to test it out. Simply click the + icon to add the “Show Confetti” brick under the button. Then, get ready for an awesome display of colorful confetti when you run it.🎉
