Introduction

You can embed a Latitude data app in an iframe on your website or in a web application. This allows you to display the app in a specific location on your website and it’s the most straightforward way to embed a Latitude data app.

If you’re using React, we recommend using the React component to embed a Latitude data app in your React application.

Embedding

To embed a Latitude data app in an iframe, you need to use the following HTML code:

<iframe src="https://url-to-your-app.latitude.so/" width="100%" height="600" frameborder="0"></iframe>

Replace https://url-to-your-app.latitude.so/ with the public URL where your Latitude data app is deployed. You can also adjust the width and height attributes to fit your website’s layout.

Passing parameters

You can pass parameters to the Latitude data app using the URL query string. For example, to pass a country parameter with the value US, you can use the following URL:

<iframe src="https://url-to-your-app.latitude.so/?country=US" width="100%" height="600" frameborder="0"></iframe>

This will pass the country parameter with the value US to the underlying queries in the data app.

Passing parameters is useful when you want to filter the data displayed in the app based on the context of the page where the app is embedded, for example you can scope the data to a specific user by passing a user_token parameter (or any other parameter that makes sense for your use case).

Passing signed parameters

If you want to pass sensitive information to a Latitude data app, you can use signed parameters. This allows you to pass parameters that are encrypted and signed by your server, so that they can’t be tampered with by the user. The signed parameter has to be called __token

<iframe src="https://url-to-your-app.latitude.so/?__token=[SECRET_TOKEN]

To learn more about how to generate a [SECRET_TOKEN] please refer to the signed parameters documentation.