Embed elements

An embed element is a type of element that renders rich, embeddable media from a third-party platform, such as a YouTube video or an Instagram photo.

Apps can use the Design Interaction capability to add embed elements to a user's design.

Supported media sources

Under the hood, Canva uses Iframely to embed media from third-party platforms. This means apps can embed any media that is supported by the Iframely API.

To check if a URL is supported, see What URLs to send to Iframely.

Creating embed elements

There are two ways to add an embed element to a design:

import React from "react";
import { getDesignInteraction } from "@canva/design-interaction";

export const App = () => {
  const designInteraction = getDesignInteraction();

  const handleClick = () => {
    designInteraction.addNativeElement({
      type: "EMBED",
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Add embed element</button>
    </div>
  );
};

Limitations

• Iframely can't embed arbitrary HTML files. It can only embed media supported by its API.
• If the original media is deleted, an error is displayed in place of the media.
• If the original media changes, the changes are not immediately reflected in the user's design.
• Users can't apply effects to embeds.