Academy
Hudu Team
Hudu Team
Hudu Team

Using the Magic Dash: A Guide to Supercharge Your Client Dashboards

The Magic Dash is a versatile and powerful feature in Hudu that transforms your client dashboards into dynamic, customizable spaces for displaying relevant data. Whether you're embedding client reports, linking to external sites, or integrating PSA metrics, the Magic Dash is designed to adapt to your specific needs.

This guide will walk you through configuring and maximizing the potential of the Magic Dash.

What Is the Magic Dash?

The Magic Dash is a customizable widget embedded within select client dashboards in Hudu. Its flexibility comes from its seamless integration with Hudu's robust API, allowing users to:

  • Embed iFrames: Add client reports, diagrams, or dashboards from external tools.

  • Link External Sites: Provide quick access to related resources or documentation.

  • Customize Content: Adapt content via the API to suit your unique requirements.

Getting Started with the Magic Dash

1. Setting Up the Magic Dash

There’s no global toggle to enable the Magic Dash—it appears only for clients where a Magic Dash has been created.

To create your first Magic Dash:

  1. Go to Admin > API.

  2. Create an API key with the desired permissions. Scope this key to Magic Dash only (highly advised).

  3. Use Hudu's Swagger API documentation or tools like Insomnia or Postman to run the API commands (guides coming soon...).

Example JSON for Creating a Magic Dash:

{
  "message": "string",
  "company_name": "string",
  "title": "string",
  "icon": "string",
  "image_url": "string",
  "content_link": "string",
  "content": "string",
  "shade": "string"
}

Note: This POST request is also how you update an existing Magic Dash. Simply ensure the company_name and title match the existing one. There’s no PUT request available for updates.

2. Customizing the Magic Dash

You can enhance the Magic Dash with additional style and functionality:

  • Shades and Colors: Modify available shade colors by going to Admin > Design > Custom CSS. Learn more about Custom CSS.

  • Dynamic Content: Use the content_link field to embed dynamic elements like live reports or external dashboards.

  • Client-Specific Dashboards: Tailor each Magic Dash to display data that’s most relevant to the individual client.

3. Common Use Cases

Embedding Reports

Embed reports or dashboards from tools like Datto, SolarWinds, or any product supporting iframe embedding. Use the content field in your Magic Dash JSON to include the iframe code.

Linking External Sites

Provide links to external resources such as vendor portals or documentation sites using the content_link field.

Custom Metrics

Display metrics like SLA compliance or open tickets using integrations with PSAs or other tools.

Note:

Utilize either content_link or content , you cannot use both.

Utilize either icon or image_url , you cannot use both.

Best Practices

  1. Secure API Usage: When creating API keys, restrict permissions to minimize exposure (e.g., scope to a single company or limit IP addresses). For Magic Dash scripts, ensure that you scope this to Magic Dash ONLY.

  2. Maintain Style Consistency: Customize shades and colors using the Custom CSS tab to align with your branding.

  3. Iterate and Improve: Since updates require a POST request, save your Magic Dash configurations to streamline future changes.

Additional Resources

Further Reading

more →