Skip to main content

​
Embed in Websites

You can embed an interactive view of your Blueprint in any website. The embed uses a web component that renders your Blueprint as a read-only, pannable, zoomable diagram — no authentication required.

​
Get the embed code

  1. Open your Blueprint in the editor.
  2. Click the Share button in the toolbar.
  3. Select Embed.
  4. Click Copy Code.
The Embed Blueprint dialog showing the HTML embed code

​
The embed code

The generated code looks like this: 
<script
  type="module"
  src="https://lab.leapter.com/viewer/leapter-blueprint-viewer.esm.js"
></script>

<leapter-blueprint-viewer
  appspace="your-appspace"
  app-id="your-app-id"
  model-id="your-model-id"
  blueprint="base64-encoded-blueprint-data"
  hide-data-panel="true"
  show-descriptions="true"
  show-expressions="true"
  frame="true"
></leapter-blueprint-viewer>
Paste this into your website’s HTML where you want the Blueprint to appear.

​
How it works

The embed code includes your Blueprint data directly as a base64-encoded attribute. This means:
  • No authentication required — viewers do not need a Leapter account
  • No API calls — the Blueprint data is self-contained in the HTML
  • Read-only — viewers can explore the Blueprint but cannot edit it
  • Interactive — viewers can pan and zoom to navigate the diagram

​
Customization attributes

You can modify the web component’s attributes to control what is displayed:
AttributeDescription
hide-data-panelSet to "true" to hide the data panel
show-descriptionsSet to "true" to show node descriptions
show-expressionsSet to "true" to show expressions on nodes
frameSet to "true" to display a border frame around the viewer

​
Updating the embed

Since the Blueprint data is embedded directly in the HTML, the embed shows the Blueprint as it was when you copied the code. If you update your Blueprint, you need to re-copy the embed code and replace it on your website.

​
What to do next