Editor embedding

This app workflow is designed to integrate with the Creatopy editor. It allows users to start a session in the Creatopy editor (AdStudio or GenStudio) while already logged in, directly from a link click.

To access this workflow, the integrating client must provide a JWT as an entry point. This token should contain the clientId, userId (for session impersonation), and an action defining what the session will do before redirecting the user to editor mode. All of this must be signed with the secret.

The clientId and secret pair are created in Creatopy under Team settings/API credentials.

You can generate the token using the NodeJS script:

// nodejs
import jwt from 'jsonwebtoken';

const clientId = 'yourClientId'; // Replace with your actual clientId
const secret = 'yourSecret';     // Replace with your secret key

// Create the payload
const payload = {
  clientId,
  userId,
  action: {
    type: "create_blank_design",
    sizes: [{"width": 111, "height": 111}],
    projectId: 100,
    folderId: 111, // this is optional
    editorMode: "adstudio"
  }
};

// Sign the payload to create a JWT
const token = jwt.sign(payload, secret);

// Construct the URL
const url = `https://app.creatopy.com/token-auth/${token}`;

console.log(url);

or for testing purposes, you can use a JWT playground like the one from https://jwt.io/ where you can generate manually the token. To start the session just add the generated token to the Creatopy app https://app.creatopy.com/token-auth/${token}

JWT.IO example

Actions for the session

To start a session, you need to provide an action type. Currently, we support three actions: create_design_from_template, create_blank_design, and edit_design. To call these actions, add the action/type field in the JWT. Each action has a set of specific parameters, which are explained for each type below.

"action": {
    "type": "create_design_from_template",
}

Edit design

This action will create a new design from an already existing design (template).

Parameters for this action:

hash - The hash of the template (design or custom template)

editorMode - Which editor to open in the session ("adStudio" or "genStudio")

{
  "clientId": "YOUR-CLIENT_ID",
  "userId": userId,
  "action": {
    "type": "edit_design",
    "hash": "template-hash",
    "editorMode": "adstudio" | "genstudio"
  }
}

Create a design from a template

This action will create a new design from an already existing design (template).

Parameters for this action:

hash - The hash of the template (design or custom template)

name - The name I want the design to have (Optional)

projectId - ID of the project in which we want this design to be created

folderId - ID of the folder in which we want this design to be created (optional)

editorMode - Which editor to open in the session ("adStudio" or "genStudio")

{
  "clientId": "YOUR-CLIENT_ID",
  "userId": userId,
  "action": {
    "type": "create_design_from_template",
    "name": "My design name",
    "hash": "template-hash",
    "projectId": your-project-id,
    "folderId": your-folder-id, // this is optional
    "editorMode": "adstudio" | "genstudio"
  }
}

Create blank design

This action will create a new blank design.

Parameters for this action:

sizes - An array of sizes for the design

name - The name I want the design to have (Optional)

projectId - ID of the project where the design will be created

folderId - ID of the folder where the design will be created (optional)

editorMode - Editor to open in the session ("adStudio" or "genStudio")

{
  "clientId": "YOUR-CLIENT_ID",
  "userId": userId,
  "action": {
    "type": "create_blank_design",
    "name": "My design",
    "sizes": [{"width": 111, "height": 111}],
    "projectId": your-project-id,
    "folderId": your-folder-id, // this is optional
    "editorMode": "adstudio" | "genstudio"
  }
}

Flow: Create from Url (BETA)

This action will start the flow of creating a design from a URL using AI

Parameters for this action:

projectId - ID of the project where the design will be created

{ 
	type: 'nextgen_flow_create_from_url', 
	projectId: 100
}

Flow: Create from a template (BETA)

This action will start the flow of creating a design from the template

Parameters for this action:

projectId - ID of the project where the design will be created

{ 
	type: 'nextgen_flow_create_from_template', 
	projectId: 100
}

Flow: Create from assets (BETA)

This action will start the flow of creating design from assets (logo, images etc.)

Parameters for this action:

projectId - ID of the project where the design will be created

{ 
	type: 'nextgen_flow_create_from_assets', 
	projectId: 100
}