Domo Embedded Starter

This starter template is designed for embedding Domo cards and dashboards into your application. Built with SvelteKit, TailwindCSS, and leveraging Auth0 for authentication, it provides a streamlined approach to integrating Domo content, making it easy to authenticate users and embed dynamic visualizations.

Note: This documentation is still a work in progress. Eventually, it will include detailed instructions on setting up Auth0 and Domo accounts and configuring each service to work with the starter template. For now, you can refer to the existing codebase and the official documentation for Auth0 and Domo.

Getting Started

To begin using the Domo Embedded Starter, ensure you have the necessary tools and dependencies installed. This template serves as a foundational starting point, allowing you to quickly integrate Domo content into your SvelteKit application with built-in support for user authentication via Auth0.

Prerequisites

Before diving into the setup, make sure you have the following:

• Auth0 Account: Handles user authentication within the app.
• Domo Account: Required for accessing and embedding Domo cards and dashboards.

Components

The starter includes components tailored for embedding Domo content with ease.

Dashboard

The Dashboard component allows for the seamless embedding of entire Domo dashboards. Simply pass the embedId of the desired dashboard, and the component handles the rest.

<script>
  import { Dashboard } from '$lib/components/dashboard.svelte';
</script>

<Dashboard embedId="1A2bc" />

Card

The Card component is designed for embedding individual Domo cards. It provides flexibility in styling and customization.

<script>
  import { Card } from '$lib/components/card.svelte';
</script>

<Card title="New visits by state" embedId="1A2bc" />

For further customization, you can pass custom CSS classes to adjust the styling of the iframe containing the Domo card.

<script>
  import { Card } from '$lib/components/Card.svelte';
</script>

<Card
  title="New visits by state"
  embedId="1A2bc"
  class="border-solid-gray-200 aspect-square rounded-sm border-2 bg-gray-100 p-2 lg:aspect-auto"
/>