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.

Generating an embed

EMBED

Waiting for share link...

COPY

<iframe
  src="https://app.abstract.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

Create responsive embed to maintain aspect ratio

<div style="position: relative; padding-top: 75%; min-width: 400px;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://app.goabstract.com/embed/c53e8159-2e24-4118-b02b-6fe4b3a3afee"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

Embed should have a wrapper, full width and height, so it would inherit the container size. In this case, padding-top is responsible for an aspect ratio, and to get a value you have to divide height on the width and multiply by 100 (height / width * 100), which means that 3 / 4 * 100 = 75 - is our padding-top value.

More details can also be found here.

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>