Today, I am proposing a very simple tutorial. I needed to integrate a Metabase dashboard in one of my applications and I realized there is no article which explains how to do that. So, ta-da!

Requirements

To follow this tutorial, you will need

• a Metabase dashboard (read this article from my fellow Laurent Dogin to have yours set up in a few minutes)
• a Ruby on Rails application (read this article by me if you need to set up one)

Enabling integration in Metabase

From your Metabase, click on the top right gear icon, then Admin. On the left menu select Embedding in other Applications. Toggle the button to have it saying Enabled. You will now get an Embedding API key. Save it for later.

Leave Metabase admin and select the dashboard you want to integrate. Click the sharing and embedding icon on the top right of your dashboard. Now select Embed this dashboard in an Application. Finally, click on the Publish button.

Integrate Metabase in Rails

In your Gemfile, add gem 'jwt' then run $ bundle install. If your application is deployed on Clever Cloud go to your application's console and under your application's menu go to the environment variables menu. If you deploy locally, use the gem figaro and edit your application.yml. Anyway you must add two environment variables

METABASE_SITE_URL: <your metabase url>
METABASE_SECRET_KEY: <the API key from metabase admin>

In the controller action where you want to integrate your metabase dashboard, add the following lines:

payload = {
          :resource => {:dashboard => <your dashboard number>},
          :params => { },
          :exp => Time.now.to_i + (60 * 10) # 10 minute expiration
    }
token = JWT.encode(payload, ENV["METABASE_SECRET_KEY"])
@iframe_url = ENV["METABASE_SITE_URL"] + "/embed/dashboard/" + token + "#bordered=true&titled=true"

Now in your view, add

<iframe
    src="<%= @iframe_url %>"
    frameborder="0"
    width="800"
    height="600"
    allowtransparency
></iframe>

You are all set. Just restart your application so the new environment variables are taken in consideration. Voilà, your application now has an integrated Metabase dashboard.

The fastest, easiest way to share data and analytics inside your company.

How to deploy Metabase

mkdir metabase # Create a metabase Folder
touch metabase.jar # Create a dummy placeholder file for the jar we will download.
git init # Create the git repository
git add . # Add your files
git commit -m"init" # Create the first commit
clever create --type jar Metabase # Create the java application
clever addon create postgresql-addon --plan m MetabasePG # Create the PostgreSQL instance
clever sevice link-addon MetabasePG # link the addon
clever env set CC_JAR_PATH ./metabase.jar # Configure the jar path
clever env set CC_PRE_BUILD_HOOK 'rm ./metabase.jar && wget -O metabase.jar http://downloads.metabase.com/v0.33.0/metabase.jar' # make sure you download the latest metabase release
clever env set MB_ENCRYPTION_SECRET_KEY `openssl rand -base64 32` # Generate a random key to encrypt the database configuration
clever env set MB_JETTY_PORT  # Tell Metabase to use the port 8080
clever env set MB_DB_TYPE postgres # Tell Metabase to use Postgres instead of the default H2
# Metabase uses it's own environment variables to configure postgres so you have to copy the one we give you:
clever env set MB_DB_DBNAME dbName
clever env set MB_DB_HOST host
clever env set MB_DB_PASS password
clever env set MB_DB_PORT port
clever env set MB_DB_USER user
clever deploy # Deploy the application