Skip navigation
Skip to main content
How-to guides
How-to guides

Getting started

Add the Canva Button to a website with the HTML API.

The Canva Button's HTML API is the simplest way to get up and running with the Canva Button.

This tutorial explains how to create a Canva Button with the HTML API and embed it in a web page.

Prerequisites

This tutorial assumes you have an API key to use the Canva Button. If you don't have one, sign up for an API key.

Step 1: Generate a Canva Button

Canva provides a tool for generating a Canva Button. You can then use HTML attributes to configure the behavior and appearance of the Button.

To generate a Canva Button:

  1. Navigate to canva.com/button/build.
  2. Enter your API key for the Canva Button.
  3. Select a design type. When a user creates a design, the design type determines the dimensions of the design and the templates that Canva shows to the user. For a complete list of the supported design types, refer to Design types.
  4. Select a button size.
  5. Select a button style.
  6. Click Get my button.

The generated code looks like this:

<button
  data-design-type="Poster"
  data-api-key="API KEY GOES HERE"
  class="canva-design-button"
  style="display: none;"
  >Design with Canva</button
>
<script>
  (function (c, a, n) {
    var w = c.createElement(a),
      s = c.getElementsByTagName(a)[0];
    w.src = n;
    s.parentNode.insertBefore(w, s);
  })(document, "script", "https://sdk.canva.com/designbutton/v2/api.js");
</script>
jsx

Copy the code into the part of the web page where you want to display the Canva Button.

Step 2: Customize the Canva Button

The default Canva Button creates a new design in the Canva editor. This is neat, but the Canva Button can do so much more.

To learn about all of the Canva Button's features, refer to the guides in the sidebar.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canva Button</title>
  </head>
  <body>
    <button
      data-design-type="Poster"
      data-api-key="API KEY GOES HERE"
      class="canva-design-button"
      style="display: none;"
      >Design with Canva</button
    >
    <script>
      (function (c, a, n) {
        var w = c.createElement(a),
          s = c.getElementsByTagName(a)[0];
        w.src = n;
        s.parentNode.insertBefore(w, s);
      })(document, "script", "https://sdk.canva.com/designbutton/v2/api.js");
    </script>
  </body>
</html>
jsx