Vidi kan indlejres på en hjemmeside vha. embed.js scriptet.

Eksempel på indlejring:

<!-- Scriptet kan loades både i toppen og bunden af siden -->
<script src="https://vidi.swarm.gc2.io/js/embed.js"></script>

<!-- Eksempel på et Vidi div element -->
<div data-vidi-token="eyJ0aXRsZSI......" data-vidi-width="800px" data-vidi-height="600px" data-vidi-tmpl="embed.tmpl"></div>

Der en række data attributer, som skal/kan sættes:

• data-vidi-token (obligatorisk)
  • Projektets "token" som indeholder state-id, host, database mv. Skal angives.
• data-vidi-width (valgfri)
  • Bredde på kort. Standard 100% 
• data-vidi-height (valgfri,)
  • Højde på kort. standard 100%
• data-vidi-tmpl (valgfri)
  • Hvilken template kortet skal bruge. Standard embed.tmpl, som er en template beregnet til indlejring.
• data-vidi-search (valgfri)
  • Kan sættes til "none" hvis søgeboksen skal skjules. Standard ikke sat.
• data-vidi-history (valgfri)
  • Kan sættes til "none" hvis forrige/næste udsnit kanpperne skal skjules. Standard ikke sat.
• data-vidi-use-config (valgfri)
  • Kan sættes til "true" og derved bruges config'en fra token, hvis den indeholder en config.
• data-vidi-use-schema (valgfri)
  • Kan sættes til "true" og derved bruges schemaet fra token, hvis den indeholder et schema.

Scriptet embed.js anvender MutationObserver API'et til at detektere Vidi div elementernes opståen. Hvis hjemmesiden skal anvendes i ældre browsere (< IE11) skal scriptet placeres i bunden efter alle Vidi div elementerne eller der skal loades en polyfill for MutationObserver.

Eksempel på indlejring:

https://s3-eu-west-1.amazonaws.com/mapcentia-www/test/test.html