Modules

This guide will demonstrate how to embed our Generate Image and Edit Image modules in your own application.

createImageFromText()

The module class contains all the methods for launching quick action editors. The createImageFromText() API is powered by Adobe Firefly.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.createImageFromText();

TextToImageParams

All the properties in this object are optional.

editImage()

This API launches an iframe that allows users to continue editing an image in a modal. Instead of the entire Express editing experience, this module only loads relevant image-editing capabilities.

// Initialize the SDK first
const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

module.editImage(docConfig);

The only required property is docConfig.

Example: Generate from text

The following code will invoke the generate module. In this example, we pass a string to be used as a prompt. If that field is left empty, the user will be prompted to input a prompt once the modal is open.

data-variant=info

data-slots=header, text1

// Initialize SDK and save CCEverywhere object as ccEverywhere 
ccEverywhere.module.createImageFromText(
    promptText: "Flying cows",
    appConfig : {
    thumbnailOptions: ["edit-dropdown", "rich-preview", "publish"],
    publishConfig: {
        id: "saveToHostApp",
        label: "Publish"
    }, editDropdownOptions: [
        { "option": "add-effects" },
        { "option": "remove-background" },
        { "option": "insert-object" },
        { "option": "apply-adjustment" },
        { "option": "remove-object" }
    ],
    featureConfig: {
        "community-wall": true,
        "fast-mode": true,
        "custom-models": true
    },
    fastModeConfig: { defaultFastModeState: "off" },
    appVersion: '2',
    callbacks: {
        onCancel: () => { },
        onError: (err) => { },
        onLoadStart: () => { },
        onLoad: () => { },
        onPublishStart: () => { },
        onPublish: (publishParams) => { },
    }
},
    exportConfig : [
    {
        action: {
            context: 'new',
            target: 'express'
        },
        id: 'editor',
        label: 'Create a design',
        style: {
            uiType: 'button'
        }
    },
    {
        action: {
            target: 'publish',
            outputype: "URL",
            closeTargetOnExport: true
        },
        id: 'saveToHostApp',
        label: "Publish",
        style: {
            uiType: 'button'
        }
    },
]
);

Example: Edit Image

The following code will invoke the Edit Image module.

const { module } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

const docConfig = {
  asset: {
    data: "replace-with-base64-encoded-asset",
    dataType: "base64",
    type: "image",
  },
};

const exportOptions = [
  {
    type: "continue-editing",
    label: "Continue Editing",
    style: {
      uiType: "button",
    },
    options: [
      {
        id: "exportOption3",
        style: {
          uiType: "dropdown",
        },
        action: {
          target: "image-module",
          intent: "remove-background",
        },
      },
      {
        id: "exportOption4",
        style: {
          uiType: "dropdown",
        },
        action: {
          target: "express",
          intent: "add-images",
        },
      },
      {
        id: "exportOption5",
        style: {
          uiType: "dropdown",
        },
        action: {
          target: "express",
          intent: "add-text",
        },
      },
    ],
  },
];

module.editImage(docConfig, exportOptions);