Edit

Embeds

Embeds can be used to display interactive, up-to-date previews for layers and collections in any environment that supports HTML. To use an embed, create an <iframe> with a special URL derived from public share URLs.

Note: Only links for publicly-shared layers or collections can be embedded at this time.

Generating an embed

EMBED
Waiting for share link...
COPY
<iframe
  src="https://app.goabstract.com/embed/"
  width="784"
  height="360"
  frameborder="0"
></iframe>

Manually creating an embed

Given a public share link:

https://share.goabstract.com/c53e8159-2e24-4118-b02b-6fe4b3a3afee

An embed can be created by using the following URL as the src of an <iframe>:

https://app.goabstract.com/embed/c53e8159-2e24-4118-b02b-6fe4b3a3afee

Chrome-less embeds

Sometimes it's preferable to hide Abstract-specific UI components within an embed until the embed is hovered. This can provide a more-seamless visual look and feel when using embeds in certain contexts. To achieve this, a chromeless URL parameter can be added to an embed's URL:

https://app.goabstract.com/embed/c53e8159-2e24-4118-b02b-6fe4b3a3afee?chromeless

Examples

The following examples demonstrate both layer and collection embeds created from the above share link.

Layer embed

<iframe
  src="https://app.goabstract.com/embed/c53e8159-2e24-4118-b02b-6fe4b3a3afee"
  width="784"
  height="360"
  frameborder="0"
></iframe>

Collection embed

<iframe
  src="https://app.goabstract.com/embed/733ca894-a4bb-43e3-a2b1-dd27ff6d00c4"
  width="784"
  height="360"
  frameborder="0"
></iframe>
← Latest commitsClient →