# Trello Status Sidebar
{% hint style="info" %}
🍎 Before you begin this tutorial, make sure you've completed the [Developer Quick Start Guide](https://docs.pixiebrix.com/quick-start/mod-developer).
{% endhint %}
In this tutorial, we'll use the PixieBrix Sidebar to show the [Trello Status Page](https://trello.status.atlassian.com/) when you're working in Trello. There's a video at the end of the tutorial demonstrating what’s covered in the text.
⚡Want to start using this without building it first? Activate this mod from our marketplace to start using it right away without building it from scratch by following the steps below. Activate here.
### 1. Add a Sidebar
#### Open the Page Editor
Start by navigating your browser to [Trello](https://trello.com/). Then, [open the PixieBrix Page Editor](https://docs.pixiebrix.com/platform-overview/page-editor/open-the-page-editor), and grant PixieBrix access to the page.
#### Add a Sidebar
Click **New Mod** in the top left of the Page Editor and choose **Sidebar Panel.**
Go to the Page Editor Sidebar Panel brick that appears and change "Side Panel" to "Trello Status" in the name and heading fields.
Click **Render Panel** in the top right of the Page Editor
*Note: In the configuration settings for the sidebar, you’ll see Trello is the only site by default, because that’s the page you’re currently on. If you want this sidebar to appear when you’re on other pages besides Trello, click the “All URLs” option to allow for more match patterns.*
### 2. Configure the Sidebar Content
#### **Add an IFrame Brick**
In the Render Document Brick, click the three dots in the preview on the right side to show a menu of options, then select the “Brick”.
Going back to your Bricks on the left side, Then on the left side, click the "+” button just below the Brick, and above the message “No output produced”.
Next search `IFrame` and select **+ Add**
#### Configure the **IFrame**
Populate the URL field with the Trello Status page URL: `https://trello.status.atlassian.com/`
Make the width `100%`. You can test the height setting to adjust as you prefer, but start with 1000, which is an average page height.
Your IFrame configuration should look like the image below:
Click **Render Panel** in the top right of the Page Editor, and then click **Save.**
Clicking the **Save** icon will bring up a modal for [packaging-a-mod](https://docs.pixiebrix.com/developing-mods/sharing-mods/packaging-a-mod "mention"). Set an alias if you haven't already. Provide a unique ID for the mod, then click **Create**.
### 3. Test the Trello Status Sidebar
#### Pin the PB icon to your Toolbar
* You can [pin the PixieBrix extension icon](https://docs.pixiebrix.com/how-to/pinning-the-chrome-extension) to your Google Toolbar to toggle the sidebar
* Click the puzzle piece icon in the top right of your browser window, and then click the pin icon next to the PixieBrix extension
* You should now see the PixieBrix extension icon in your Google toolbar, which you can click to toggle the sidebar.
### Extras You Can Add
Want to take this to the next level? You can create a [Trigger](https://docs.pixiebrix.com/developing-mods/developer-concepts/types-of-mods/trigger) to open the sidebar whenever you go to trello.com or a [Quick Bar action](https://docs.pixiebrix.com/developing-mods/developer-concepts/types-of-mods/quick-bar-action) that opens the Sidebar to this specific panel. The options are endless!
{% hint style="info" %}
🙋Need some help with building? [Head over to the Slack Community](https://slack.pixiebrix.com/), and we’ll gladly help you!
{% endhint %}
