Need to create an interactive decision tree? Follow these steps.
Prefer to watch? You can watch the video below, or keep reading to see the text instructions.
In a new tab, create your free PixieBrix account. It takes only a minute to set up, and you'll be prompted to install the PixieBrix Chrome Extension after creating your account.
Before activating this mod, you'll need a Google Sheet with a decision tree defined. It's easiest to copy our Google Sheet template to your Google Drive.
There's no need to edit the copied Google Sheet in order to test this mod, but if you want to customize the content and actions of your decision tree you can modify the Sheet to fit your needs.
Each row is a step in your workflow, and you'll specify the title that appears at the top of the sidebar, the content below, and any buttons that should appear below.
For each button you'd like to include for a step, add a column with the text of the button and the step it should go to if clicked. For instance, if you want a button that says "This Solved It" and goes to step 5 in the tree, you'll want to type This Solved It[5] in the cell.
⛔ Do not edit:
Editing any of the bulleted items above will break the template and require customization inside the Page Editor to fix.
Once you've prepped your spreadsheet, it's time to activate the Decision Tree Mod Template.
You'll need to choose a Google Drive integration. Click Configure.
.png)
A pop-up will appear, asking you to select a Google account. Choose the account where you copied the spreadsheet.
Select the copied spreadsheet from the Google Sheet field. If you the tab name of your Google Sheet is something else, you can type the name in the Tab Name field.
Click Finish Activating at the bottom of the sidebar.
Once you've activated, you're ready to try it out. If the sidebar is still open, you should see a tab that says Decision Tree.
Don't see the Sidebar? Click the PixieBrix icon from the Chrome Extensions menu.
.png)
Need help finding the PixieBrix icon? Click the puzzle piece icon and look for PixieBrix. Learn more about pinning the PixieBrix Chrome Extension.
Once the Sidebar opens, click "Start Decision Tree" and click through the buttons to progress through the steps.
After testing the Decision Tree, you might want to make other changes and customize the way the Decision Tree works, aside from the content in the Google Sheet.
Before making customizations to the mod, you'll need to copy the mod template in the Page Editor.
Start by opening the Page Editor. (How?)
In the Page Editor, click the three-dot menu next to the activated template. In the menu, select Make a Copy.
If this is your first time copying a mod, you might be asked to create an alias.
Optional: You can change the Mod ID, Name, and Description fields in the modal that appears.
Once you've copied the mod, you can make modifications as you see fit.
A common customization is specifying where your decision tree will appear. As configured in the template, it will appear on every page when you open the Sidebar, but you may prefer to limit it to certain sites.
In the Page Editor, click the Decision Tree Panel mod inside the [Template]: Decision Tree mod.
Make sure the Sidebar Panel brick is selected in the second panel from the left, and you'll see the configuration options in the middle panel. Look at the Sites section to set the pages you'd like to display this sidebar on.
.png)
Note: With this customization, you'll still need to open the PixieBrix Sidebar on those pages. (How?)
The next customization below shows how you can automatically make the Sidebar appear on specified pages.
In some cases, you may want to save a step and automatically open the Sidebar on certain pages rather than have to click the PixieBrix icon.
To do this, you'll need to add another starter brick inside the mod. Click the Add button in the top left of the Page Editor, and select the Trigger item.
.png)
Inside the newly added Trigger brick, you'll see configuration options appear in the middle of the Page Editor. Confirm the Page Load event is selected in the Trigger Event field, and specify the sites you want to automatically open the Sidebar on.
Once you've specified the sites, click the + button below the Trigger brick in the Brick Actions Pipeline.
.png)
Search for the Show Sidebar brick in the modal, then click the Add button. In the middle panel, configure the Show Sidebar brick to specify the Decision Tree Panel heading. If you haven't changed the Tab Title in the Decision Tree mod, you'll just type `Decision Tree` in the Panel Heading field. Set Force Panel to true by clicking the toggle until it's blue.
.png)
Lastly, you'll need to add this new mod into the existing Decision Tree mod package. Click the three dots on the mod in the first panel (it will say something like My {page your on} trigger. Click the three dots and choose Add to mod. In the select field of the modal that appears, search for the Decision Tree mod and then click Move.
.png)
You'll see the new trigger mod appears underneath the [Template] Decision Tree mod, next to the Decision Tree Panel mod. Make sure to save your changes (how?)
Another customization you might make is removing the Restart Tree button. You may remove it entirely or customize when it's displayed.
.png)
To do this, click the Decision Tree Panel mod from the Mod List (first panel) in the Page Editor. Next, click the Render Document brick from the Brick Actions Panel. From the Preview Panel on the far right, click the red Restart Tree button.
If you'd prefer to conditionally show the Restart Tree button, you can set the visibility criteria by scrolling down in the Brick configuration panel in the middle of the screen and adjusting the logic in the Hidden field.
.png)
If you'd prefer to remove the button entirely, you can click the trash button icon that appears above the button.
Before clicking the trash icon, make sure you want to delete it because there's no undo option! If you accidentally deleted it, you can click the the dot menu on the Decision Tree Panel brick in the first panel and choose Reset. However, this will revert all changes since the last save, so you will lose all your progress not just the previous edit.
Just make sure you save any changes you make. PixieBrix will keep unsaved changes in the Page Editor, but you'll need to save the changes for them to take effect when using the mod. Click the save icon next to your mod to save the changes.
Check out our developer docs to learn about concepts that can show you how to customize this mod for your specific use case, such as collecting user input, integrating with other tools, or transforming data.
