Skip to content

update readme #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 27 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Here's a simple Metabase dashboard in action:

Embedding Metabase charts will always be free, but we include a "Powered by Metabase" graphic when using the open source version.

If you'd like to remove the "Powered by Metabase" attribution, check out our [Enterprise Edition](https://www.metabase.com/enterprise/). With full app embedding, you can add dashboards, charts, or even the entire Metabase interface into your own app with a fully branded experience.
If you'd like to remove the "Powered by Metabase" attribution, check out our [paid plans](https://www.metabase.com/pricing/). With [full-app embedding](#full-app-embedding), you can add dashboards, charts, or even the entire Metabase interface into your own app with a fully branded experience.

## Prerequisites

Expand All @@ -22,13 +22,26 @@ If you'd like to remove the "Powered by Metabase" attribution, check out our [En

We'll first need to set up a running instance of Metabase to serve the embedded dashboards.

1. If you already have an instance of Metabase running on your machine, shut it down. Then download and run Metabase according to the guides in our [install section](https://www.metabase.com/docs/latest/operations-guide/installing-metabase.html).
1. Shut down Metabase if you already have it running on your machine.
2. Download the [JAR file for Metabase OSS](https://www.metabase.com/start/oss/jar).
3. Open up a terminal and clone this repo to your machine.
4. Move the `metabase.jar` file from your downloads to the `/embedding-reference-apps/metabase` directory.
5. `cd` into `/embedding-reference-apps/metabase`.
6. Run the JAR file:
```
java -jar metabase.jar
```
7. [Run any example](#running-the-apps) depending on the programming language you choose.

2. Open up a terminal and clone this repo to your machine.
## Enable embedding

3. `cd` into embedding-reference-apps.
Once you've got Metabase running (on port 3000 by default):

3. Run any example depending on the programming language you choose.
1. Go to [`localhost:3000`](localhost:3000) in your browser.
2. Log into Metabase.
- User: plucky@admin.com
- Password: Metabase123
3. Go to **Admin settings** > **Embedding** and click the toggle.

## Running the apps

Expand All @@ -44,35 +57,27 @@ To see an embedded Metabase dashboard in action, [set up Metabase](#set-up-metab

## Embedding charts or dashboards

There are two ways to embed charts or dashboards in web applications:
There are different ways to embed Metabase charts or dashboards in web applications.

### Public embeds

The Public embedding method is to simply use the public URLs inside of an iframe, or really anywhere you can insert HTML. The embedded dashboard has a secure URL, so a user can only look at the contents of the dashboard being shared. An end user never has information they can use to modify the URL and gain access to any other resources on your Metabase instance.
The [public embedding](https://www.metabase.com/docs/latest/questions/sharing/public-links#public-embeds) method is to simply use the public URLs inside of an iframe, or really anywhere you can insert HTML. The embedded dashboard has a secure URL, so a user can only look at the contents of the dashboard being shared. An end user never has information they can use to modify the URL and gain access to any other resources on your Metabase instance.

### Signed embeds

With signed embedding, all embedded charts and dashboards have to be signed using a secret key. This allows you to build dynamic dashboards with a parameter that can be be locked down on the client side. You should sign embedded charts and dashboards on your server, which allows you to embed dashboards accessible to specific organizations, accounts, or users.
With [signed embedding](https://www.metabase.com/docs/latest/embedding/signed-embedding), all embedded charts and dashboards have to be signed using a secret key. This allows you to build dynamic dashboards with a [parameter that can be be locked down](https://www.metabase.com/docs/latest/embedding/signed-embedding-parameters#restricting-data-in-a-signed-embed) on the client side. You should sign embedded charts and dashboards on your server, which allows you to embed dashboards accessible to specific organizations, accounts, or users.

The web applications go into more detail about embedding, and provide examples. Start up the [Node app](/node/README.md) and explore the app.

## Documentation on embeds
### Full-app embedding

You can also learn more about embedding dashboards by reading [Metabase's documentation](https://www.metabase.com/docs/latest/).
Full-app embedding puts the entire Metabase app inside your app, so you can include the query builder in addition to your charts and dashboards. Full-app embedding isn't covered in this repo. Check out the [full-app embedding demo](https://embedding-demo.metabase.com/) instead.

- [Quick search: embed](https://www.metabase.com/search.html?query=embed).
## Docs and articles

Article links:

- [Embedding Metabase components in other applications](https://www.metabase.com/docs/latest/administration-guide/13-embedding.html)
- [Embedding all of Metabase in your web app](https://www.metabase.com/docs/latest/enterprise-guide/full-app-embedding.html)
- [Sharing and embedding dashboards or questions](https://www.metabase.com/docs/latest/administration-guide/12-public-links.html)

## Helpful info
Credentials for Metabase should auto-populate, but here they are for reference:

- user: plucky@admin.com
- password: Metabase123
- [Embedding overview](https://www.metabase.com/docs/latest/embedding/introduction)
- [Publishing data visualizations to the web](https://www.metabase.com/learn/customer-facing-analytics/embedding-charts-and-dashboards)
- [Public sharing](https://www.metabase.com/docs/latest/questions/sharing/public-links)

## Run into trouble?

Expand Down
15 changes: 13 additions & 2 deletions node/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ This Node application demonstrates a simple, barebones Metabase dashboard embedd

## Prerequisites

- **Metabase**. You should have already completed the setup detailed in the [README](../README.md) for this repository, which shows you how to get an instance of Metabase up and running in the [metabase](../metabase) directory of this repository. You have to also configure Metabase for [public sharing](https://www.metabase.com/docs/latest/administration-guide/12-public-links.html) or [embedding](https://www.metabase.com/docs/latest/administration-guide/13-embedding.html).
- **Metabase**. [Install and run](../README.md#set-up-metabase) a fresh Metabase in the `metabase` directory of this repository.

- **Enable embedding**. Make sure to [enable embedding](../README.md#enable-embedding) in your Metabase.

- **Node**. You'll need [Node](https://nodejs.org/en/) installed on your machine to run the application.

Expand All @@ -26,10 +28,19 @@ node index.js

Explore the app to learn more about embedding Metabase charts and dashboards in applications. You can also check out the links to more documentation in the parent repository's main [README](../README.md).

## Charts don't work

1. Go to your Metabase at `localhost:3000`.
2. Click on the **gear** icon > **Admin settings**.
3. Click **Embedding > **Standalone embeds**.
4. Check that the embedding secret key matches the embedding key in `index.js`.
5. If the keys don't match, copy the secret key from your **Admin settings** and replace the secret key in the `index.js` file.

If that doesn't work, try cloning a fresh repo and running a new JAR file.

## Example embedding code

You can find example code for Metabase embeds for:

- **Charts**. See [views/chart.pug](views/chart.pug).
- **Dashboards**. See [views/dashboard.pug](views/dashboard.pug).