The Magic Dash allows you to create custom dashboard tiles on a company's overview page, populated with information from almost any source. Because it is an API-first feature, you can use it to surface client environment summaries, Microsoft 365 licensing data, PSA/RMM metrics, service status, and more — including data Hudu doesn't already sync natively.
Example: A company overview page with a Magic Dash tile. Clicking Open expands the tile's HTML content in place, without leaving the page.
Visit REST API for additional information on API keys, scoping, and rate limits.
What could I use it for?
There are lots of possibilities. A few common use cases:
- Create summaries of your client environments
- Track errors across services for each client
- Bring in user and licensing information from your Microsoft 365 environment
- Store custom fields that aren't available in the main Hudu interface
- Track system status and downtime across services
- Bring in more detailed information from your PSA or RMM platform that Hudu doesn't already sync
Guides
Getting started with the Magic Dash
The Magic Dash is an API-first feature, so the "magic" is that it can be used for almost anything. To get started, create an API key by navigating to the Hudu admin area >> API Keys.
When creating the key, you can scope it to Magic Dash use only. We recommend granting the least access the application requires.
Sending a request to Magic Dash
You can view the full request documentation from within your instance at Hudu admin >> API Keys >> View API documentation. Magic Dash uses a simple REST API format.
The format looks like this:
{
"title": "Microsoft 365",
"company_name": "AcmeCorp",
"message": "Hey, look at me!",
"content_link": "",
"content": "",
"image_url": "",
"icon": "fas fa-user",
"shade": "success"
}Each attribute is covered here:
| Attribute | Description |
|---|---|
title |
Sets the title of the Magic Dash item. Used together with company_name to match an existing item when updating. |
company_name |
The name of the company to place the Magic Dash item in. |
message |
The text displayed when the item is not expanded. This is the most prominent part, so keep it clear, short, and readable. |
content |
HTML content displayed when the item is opened. Use either this or content_link, not both. |
content_link |
A link displayed for the Magic Dash item. Use either this or content, not both. |
image_url |
The URL of an image to display as the Magic Dash icon. Use either this or icon, not both. |
icon |
A Font Awesome icon class to display as the icon (for example, fas fa-user). Use either this or image_url, not both. |
shade |
The background color of the item. Use success (green) or danger (red); leaving it blank defaults to blue. |
background_color |
Sets a custom background color for this specific tile (for example, a hex value such as #222831), overriding shade. Useful when you want per-tile colors rather than the standard shades. |
To create or update a tile, send the same request. If the title and company_name match an existing item, that item is updated instead of creating a duplicate.
Customizing tile colors
There are three ways to control tile color, from simplest to most flexible:
- Set
shadetosuccessordangerin your request for the standard green or red states. - Set
background_colorin your request to apply a custom color to a single tile. - Apply custom CSS to change tile styling globally, via Admin >> Custom CSS.
FAQ
Magic Dash does not support direct iframe paste-through of a public URL. Instead, you push content in through the API using content, or provide a clickable link with content_link that opens the external dashboard.
No. You must use one or the other, not both. The same applies to icon and image_url.
Send a request with the same title and company_name as the existing tile. Hudu matches on those values and updates the existing item rather than creating a duplicate.
Related resources
Visit Embed BrightGauge KPIs (Dashboards & Gauges) in Hudu for a worked example of surfacing external metrics through the Magic Dash.
From the Hudu Community: