Text Area Widget
This template allows you to add custom notes, messages, images, tables and more, anywhere on your dashboard. These widgets are usually static text areas that are used as a point of reference for the end user. While there are probably hundreds of uses, we’ll provide just a few examples to get you started.
GENERAL TEXT FORMATTING
Most use cases involve adding text and doing some basic formatting, so that’s what we’ll begin with.
For additional text formatting tips, visit the resources provided at the end of this article.
ALERT
Need users to be aware of certain information regarding the dashboard? Create alerts of different sizes that’ll catch their attention.
Sample Markdown Language
#### Rome wasn't built in a day, but they were laying bricks every hour. *Make sure you hit your numbers before you leave for the day!*{: style="color: red"} Days turn into weeks which turn into months which turn into years.
QUOTE
Sometimes your dashboard is kind to you. Other times it’s brutally honest and you might need a little pick me up. Nothing like an inspirational quote to do the trick.
Sample Markdown Language
> ## "Where performance Is measured, performance improves. Where performance is measured and reported, the rate of improvement accelerates." > > ~THOMAS S. MONSON ~
LINKS & BUTTONS
Here are a few examples of links and buttons:
Sample Markdown Language
[Visit Parsey](https://parsey.com)
[Visit Parsey](https://parsey.com){class="btn btn-default btn-xs"}
[Visit Parsey](https://parsey.com){class="btn btn-info btn-sm"}
[Visit Parsey](https://parsey.com){class="btn btn-primary btn-default"}
[Visit Parsey](https://parsey.com){class="btn btn-success btn-lg"}
[Visit Parsey](https://parsey.com){class="btn btn-danger btn-lg btn-block"}
IMAGE
Let’s say you’re the sentimental type and want to have that special someone looking at you while you look at your dashboard. We’ve got you covered! Simply replace the image source URL below with the URL of your hosted image. Alternatively, you could copy our code exactly to have Violet on your dashboard, but look out for Screech. Okay, okay, you can also do something cool like add your company logo to the dashboard.
Sample Markdown Language
{:width="100%"}
HYPERLINKED IMAGE
So now that you’re familiar with links as well as images, how do you put them together? If you’d like to insert an image that is clickable and will open up a specific web page in a new tab, follow these steps:
Sample Markdown Language
[{:width="100%"}](https://parsey.com)
VIDEO
Want to push a weekly video update to your team? While you can’t play a video within Graphly, you can insert a link to a YouTube video with it’s image still. Simply replace our image video Id “Uj1ykZWtPYI” with another video Id in the two locations below. Or leave the video Id as is so your team can view R2’s secret message.
Sample Markdown Language
[](http://www.youtube.com/watch?v=Uj1ykZWtPYI)
TABLE
Need to reference static data that can be difficult to remember? Check out the table below that acts as a reminder of which employees are assigned to each team.
Sample Markdown Language
| Sales Team A | Sales Team B | Sales Team C |
| :--- |:--- | :--- |
| Jarrod | Brennen | Emma |
| Dustin | Michael | Sterling |
| Andrew | Liberty | Clayton |
| Amanda | Brett | Tanner |
| Colton | Dallin | JimBob |
{:class="table"}
RESOURCES
Markdown Tutorial: http://commonmark.org/help/
Twitter Bootstrap CSS: http://getbootstrap.com/css/
Applying Attributes: http://kramdown.gettalong.org/quickref.html#block-attributes
Markdown Cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet