Quickstart Guide

This guide explains how to start using the Adobe Express Embed SDK in your own application.

Step 1: Get an API Key

Create a new project in the Developer Console. Select "Add an API" > "Adobe Express Embed SDK".

Then, choose "Single-Page App" and register your domain in the "Allowed Domains" fields.

Step 2: Embed the SDK

The latest version of the SDK is available on Adobe's CDN:

var CDN_URL = "https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js"";
Copied to your clipboard
var CDN_URL = "https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js"";

You can read the changelog to understand known issues as well as what changes have been made.

Load via script tag

<script src="https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js""></script>
<script>
  (async () => {
    const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);
  })();
</script>
Copied to your clipboard
<script src="https://cc-embed.adobe.com/sdk/v4/CCEverywhere.js""></script>
<script>
  (async () => {
    const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);
  })();
</script>

Using import

await import(CDN_URL);
const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);
Copied to your clipboard
await import(CDN_URL);
const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);

Dynamic script

((document, url) => {
    const script = document.createElement("script");
    script.src = url;
    script.onload = async () => {
      if (!window.CCEverywhere) {
          return;
        }
        const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);
    };
    document.body.appendChild(script);
  })(document, CDN_URL);
Copied to your clipboard
((document, url) => {
    const script = document.createElement("script");
    script.src = url;
    script.onload = async () => {
      if (!window.CCEverywhere) {
          return;
        }
        const ccEverywhere = await window.CCEverywhere.initialize(initializeParams, configParams);
    };
    document.body.appendChild(script);
  })(document, CDN_URL);

Step 3: Initialize the SDK

The SDK should only be initialized once each page. To initialize the SDK, pass the following objects: HostInfo and ConfigParams.

HostInfo

CLIENT_ID (string): API key from Developer Console
APP_NAME (string): Name of your integration/app. This name corresponds with the project folder created for your end users in Adobe Express.

(async () => {
    const ccEverywhere = await window.CCEverywhere.initialize({
      clientId: <CLIENT_ID>,
      appName: <APP_NAME>,
    });
})();
Copied to your clipboard
(async () => {
    const ccEverywhere = await window.CCEverywhere.initialize({
      clientId: <CLIENT_ID>,
      appName: <APP_NAME>,
    });
})();

The SDK can be launched delayed login, meaning users won't be asked to sign in until they export. Read more about the initialize API here.

Successful initialization returns a CCEverywhere Class object, with three properties:

editor
module
quickAction

Next Steps: Explore the SDK

Our guides along with the SDK references can help you start working with the SDK in a way that best suits your needs.

Full editor

With the full editor component, your users are able to:

How to create new projects
How to edit existing projects

Users can access Adobe Express's huge template and asset library when starting with a blank new project in the editor. Pre-selected images can also be loaded into the editor for further designing. The editor can also load previous projects (created using your integration) by taking an existing project ID as input.

Quick actions

Once the selected quick action loads in the iframe, users can browse their filesystem for an asset. At this time, only image quick actions can pass a pre-selected asset as input. After the quick action is completed, a download button will appear. You can configure other export options such as taking the user into a full editor component to further customize the modified asset, or saving it back onto your application.