Quickstart Guide

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

Step 1: Get an API Key

Create a new project in the Developer Console. Select "Add an API" > "Creative Cloud Everywhere".

Then, choose "Single-Page App" and register your domain in the "Redirect URI Patterns" and "Default Redirect URI" fields. You can read more here.

Step 2: Embed SDK

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

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

You can read the changelog to understand what updates are being made.

Load via script tag

<script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
<script>
  (() => {
    if (!window.CCEverywhere) {
      return;
    }
    const ccEverywhere = window.CCEverywhere.initialize();
  })();
</script>
Copied to your clipboard
1<script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
2<script>
3  (() => {
4    if (!window.CCEverywhere) {
5      return;
6    }
7    const ccEverywhere = window.CCEverywhere.initialize();
8  })();
9</script>

Using import

await import(CDN_URL);
const ccEverywhere = window.CCEverywhere.initialize();
Copied to your clipboard
1await import(CDN_URL);
2const ccEverywhere = window.CCEverywhere.initialize();

Dynamic script

((document, url) => {
    const script = document.createElement("script");
    script.src = url;
    script.onload = () => {
      if (!window.CCEverywhere) {
          return;
        }
        const ccEverywhere = window.CCEverywhere.initialize();
    };
    document.body.appendChild(script);
  })(document, CDN_URL);
Copied to your clipboard
1((document, url) => {
2    const script = document.createElement("script");
3    script.src = url;
4    script.onload = () => {
5      if (!window.CCEverywhere) {
6          return;
7        }
8        const ccEverywhere = window.CCEverywhere.initialize();
9    };
10    document.body.appendChild(script);
11  })(document, CDN_URL);

Step 3: Initialize the SDK

The SDK should only be initialized once each page. To initialize the SDK, pass the default method initialize():

CLIENT_ID (string): API key from Console
APP_NAME (string): Name of the Express folder created for end users of your integration
REDIRECT_URI (string): Specify the redirect URI you registered for the project in Developer Console

(() => {
    if (!window.CCEverywhere) {
      return;
    }
    const ccEverywhere = window.CCEverywhere.initialize({
      clientId: <CLIENT_ID>,
      appName: <APP_NAME>, 
      appVersion: { major: 1, minor: 0 },
      platformCategory: 'web',
      redirectUri: <REDIRECT_URI>
    });
})();
Copied to your clipboard
1(() => {
2    if (!window.CCEverywhere) {
3      return;
4    }
5    const ccEverywhere = window.CCEverywhere.initialize({
6      clientId: <CLIENT_ID>,
7      appName: <APP_NAME>, 
8      appVersion: { major: 1, minor: 0 },
9      platformCategory: 'web',
10      redirectUri: <REDIRECT_URI>
11    });
12})();

This returns a CCEverywhere Class object, with four methods:

openQuickAction(): Quick Actions Component
createDesign(): Adobe Express Editor Component
editDesign(): Adobe Express Editor Component
exchangeAuthCodeForToken(): Authorization

Step 4: Exchange Access Token

Note: To set up a local server, refer to the local development set-up guide

After a user logs in, they are redirected back to the designated redirect URL with an authorization code. At this redirect URL is hit, call the following method to exchange that code for an access token:

ccEverywhere.exchangeAuthCodeForToken();
Copied to your clipboard
ccEverywhere.exchangeAuthCodeForToken();

The returned authorization code is exchanged for an access token, which is saved for future requests to the SDK during this session.

Next Steps: Explore the SDK

The Adobe Create Embed SDK can be initialized with a customized locale. The guides along with the SDK references can help you start working with the SDK in a way that best suits your needs.

Express Editor Component

How to create a project in an Express editor
How to edit an existing project in an Express editor

When the editor first appears in a modal, the user will be asked to either log in, or create a Adobe Express account. Once logged in, users can access Express's huge template and asset library and start creating in a new blank project. The editor can also be spun up taking an existing project ID as input, and users can continue working on a project within the editor.

Quick Actions Editor Component

How to use Image Quick Actions
How to use Video Quick Actions

Users must select the desired Quick Action (QA) so the corresponding QA editor is spun up. Within the QA Editor, users can browse their filesystem for an asset, and then perform the selected QA. They can download the modified asset to their computer, or further customize the modified asset in an Adobe Express editor.

Configure OAuth