Comment on page

Button

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 custom button on a webpage.
What does a Button look like?
That's really up to you! You can select an existing button on the page to match the styles, or you can use CSS to give it custom styling options. 
Create a Button
Follow these steps to add a button to a web page and configure the button actions.
1.Navigate to the page where you want to add a button (e.g., https://www.linkedin.com/company/salesforce/)
2.Open the PixieBrix Page Editor.
3.In the left pane, click Add > Button.
​
4.You'll notice elements turn purple when you hover over them. Click on an existing button. A cloned copy of the button displays on the page in real-time.
5.Go to the PixieBrix Page Editor below the page, and then edit the name in the Name field if desired. This is the name of the mod, not the text on the button.
Configure a Button
In the Configuration section, enter the following information:
This is optional information. In many cases, you may not need to configure any of these settings unless you're trying to do something specific.
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. You can also provide your own CSS selectors.
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 you add at least one.
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. 
This is optional information. In many cases, you may not need to configure any of these settings unless you're trying to do something specific.
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.
​
​

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. You can also provide your own CSS selectors.
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 you add at least one. 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.

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.

Context Menu Item

Troubleshooting Buttons

Last modified 1mo ago