Template - Snippet Manager

Snippet Manager

PixieBrix is great for fetching information and making it accessible anywhere you need it. A great example of this is message templates or text snippets. If you find yourself constantly typing similar messages, why not save them in a Google Sheet and fetch them to display on a sidebar on any page?

This tutorial shows you how to customize a Snippet Manager to fit your specific use case and use your own templates and data.

In this post, we'll cover core ways you can change the mod.

Customize the Data Source
Customize the Sidebar UI
Autofill Text On The Page

Copy the Mod Template

🏁 Before you can do any customizations, you'll need to get the template in editable format.

In the Page Editor, click the three dot menu next to the activated template. In the menu, select Make a Copy

You might be asked to create an alias if this is your first time copying a mod.

Optional: You can change the Mod ID, Name, and Description fields in the modal that appears

Try the mod

Open the PixieBrix sidebar click the Snippet Manager tab to view the available snippets.

To insert a snippet, select an input field on a page and press the Insert button.

You can also type`\` in any input field to view a dropdown of available snippets.

‍

Continue typing a name, or click one to insert it in the given field.

Try it out here:

💽️ Customize the Data Source

One of the first things you may want to customize is where your snippets come from. In the template example, the snippets are defined in a PixieBrix database, and we use the List Database Records brick to look them up.

The Snippet Template Manager is perfect for:

Code reuse
Code completion
Snippet collection
Code snippet tool

You can add your own snippets by clicking the + New button in the top right of the Snippet Sidebar. Fill out a title, create a shortcut that can be typed, and specify the snippet. Choose is AI Prompt if you want to have AI generate a snippet, such as "write a short and friendly LinkedIn connection request message".

You also might also have snippets defined in other tools and prefer to fetch from there instead of PixieBrix database.

Connect to Airtable

First, add an Airtable integration configuration. Go to the Page Editor and in the [Event] Refresh Snippets mod component, replace the List Database Records brick with the Get Airtable Data brick to fetch all data from an Airtable database.

If you want to extract only specific data, you'll need to add the Run Javascript Function brick after to adjust and process. You also may need to modify the format of the data to work in the rest of the mod. Here's the format in which you should adjust the data to be returned so that it will work properly with the rest of the mod set up:

‍

Connect to Mixmax (or other email template tools)

If you want to use another tool, you can search for an existing brick by clicking the + button under any brick in the Brick Actions Pipeline.

If the tool you're searching for isn't available as a brick, use the HTTP Request brick to fetch data from any API.

🎨 Customize the Sidebar UI

If you want to make edits to the style of your sidebar, click the Display Sidebar brick to view a preview of your Sidebar in the far right panel of the Page Editor (1). There's a lot you can customize, so let's look at the common actions.

Adding new elements: To add a new element, click the three-dot menu on the secondmost outer element, which is a Container, and add a row (2), then click the three-dot menu that appears in the new column to select an element (3).
Edit the content of an existing element: If you want to change the content of an existing element, select it from the Design Panel and edit the configuration options in the middle of the Page Editor (4). Depending on the element, your configuration options may differ slightly.
Change the style of an element: Select from standard layout and editing options, like aligning text or changing colors (6).
Adding actions to elements: Some types of elements, like Forms, Bricks, or Buttons create a section inside the Render Document/Display Sidebar brick in the Brick Pipeline (7). You can tie actions to these elements, such as fetching information, copying items to a clipboard, to filtering data.

Here's an example of changing the content of a text element.

⌨️ Autofill Text On The Page

As configured out of the box, this template copies the text to your clipboard when you click the copy button in the Sidebar Panel. But perhaps you find yourself always using these templates on a specific site, and you'd like to set the input value of a field on the page with your selected template.

To do this, click the + below the Confirmation Message brick in the Brick Actions Panel, and search for the Set Input Value brick and click Add to add it as an action to your button.

This brick allows you to find an input selector and set the text to any value you'd like, in this case, your template message.

Here are a few examples of selectors you could use to set the text on common websites.

Gmail Reply/Compose Email : [aria-label="Message Body"]
LinkedIn New Post, Comment, and Messages : [role='textbox']
Slack: [role="textbox"]

🧚 If you want to set the input on multiple sites, you can add a Set Input Value brick for each site and go to Condition field in the Advanced Options to specify when a brick should run. For example, if you only want a brick to run on gmail, you might set the Condition field to {{ true if 'mail.google' in @input.url}}.

🎉 Congrats! You've successfully modified a message template sidebar. But this is just the start. You can build anything else on top of this, like creating team snippets vs individual snippets and more.

The last step is save your mod. PixieBrix will keep unsaved changes in the Page Editor, but for the changes to take affect when using the mod, you'll need to save. Click the save icon next to your mod to save the changes.