Introduction to Embedded Templates

This guide assumes you are familiar with Dashboards and Workspaces already. If not, please review API Dashboards

An embedded template is a special type of workspace that enables you to embed API logs and charts directly into your customer-facing apps with a few clicks.

Dynamic fields make embedded templates super powerful since they don’t need to be defined until the chart is actually rendered in your UI. This makes it possible to securely sandbox data based on dynamic fields like user id. When a user logs in, their user ID is then used to fetch the relevant data for display.

Custom Metrics

Any API call or action can be displayed in an embedded template. For example, below we are displaying a custom action called “File Download” and grouping by the type.

Embedded API Logs

Both public links and embedded templates allows users to embed and style a chart generated in Moesif via an iFrame element in their UI. Both support the same styling parameters such as primary color, etc, but their use case and integration method are quite different.

Public links can be embedded in pretty much any HTML page with just a single code snippet. While this makes public links super easy to embed in your website, their sandboxing is limited as the filters need to be known ahead of time. The charts displayed are not able to support dynamic filtering. When the metric/filter is consistent, then a static embedded chart via a public link is sufficient.

Embedded templates contain dynamic fields that can be programmatically populated when you render the chart. This offers a more customized approach to rendering logs and charts. The integration is slightly more complex than statically embedding a chart, like with a public link, since it requires adding a backend endpoint that can securely generate these links in a trusted environment for your frontend.

  Public Link Embed Template
Type Static Embed Dynamic Embed
Shareable link Yes No
Integration complexity Frontend snippet only Frontend snippet + backend code
Sandboxing Static/Predefined Dynamic/Performed during rendering
Use case Embed static/predefined charts for internal dashboards Securely embed charts with dynamic/unknown filter criteria such as for customer-facing apps