Embedding Tableau Pulse: a working example

This small Replit app is a working example of how to embed Tableau Pulse into an HTML page.

If you fork this app, make sure to replace the placeholders in the config file with your own credentials.

The example uses the Python web framework Flask. The Flask app does the following 3 things:

1. reads in your connected app client ID, secret key, secret ID, user email — then creates a JWT Connected Apps token. Check out this post for more detail on Connected Apps.

2. generates an HTML string that uses the Pulse Web Component, along with your Pulse URL and your validated Connected Apps token

3. Serves up the html page

*Note: if you don’t want to embed with the Pulse Web Component, you can also use the Tableau REST API to generate a Vega-lite spec based on your Pulse Metric — see this post that walks through that process.

Here’s a quick video of the app in action:

And here’s the relevant code (also available in Replit).

from flask import Flask
import jwt
import datetime
import uuid
import json

app = Flask(__name__)

#Open the configuration file
with open('config.json', 'r') as file:
    config_data = json.load(file)

#Accessing each variable
connectedAppClientId = config_data['connectedAppClientId']
connectedAppSecretKey = config_data['connectedAppSecretKey']
connectedAppSecretId = config_data['connectedAppSecretId']
user = config_data['user']

#define pulse metric URL
pulse_url = "https://us-east-1.online.tableau.com/pulse/site/mikestableausite/metrics/f550b1d0-f9d4-4704-b680-5a3378db7017"

#create jwt token
token = jwt.encode(
  {
    "iss": connectedAppClientId,
    "exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=10),
    "jti": str(uuid.uuid4()),
    "aud": "tableau",
    "sub": user,
    "scp": ["tableau:insights:embed"]

  },
    connectedAppSecretKey,
    algorithm = "HS256",
    headers = {
    'kid': connectedAppSecretId,
    'iss': connectedAppClientId
        }
  )

#form the html and insert the pulse url and validated token
html_str = """
<h1>Embedding Tableau Pulse Metrics</h1>
<script type="module"
  src="https://online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js">
</script>

<tableau-pulse id="tableauPulse"
    src='{}'
    height="800"
    width="100%"
    token='{}'>
</tableau-pulse>
"""


insertion_1 = pulse_url
insertion_2 = token

html_str = html_str.format(insertion_1, insertion_2)

#serve up the html page 
@app.route('/')
def index():
    return html_str

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=80)

Thanks for reading, and I hope you found this useful!