Build Extensions for Marketing Content in Marketing Cloud Next

In Marketing Cloud Next, build extensions that are compatible with marketing content types and components to boost productivity. Marketers can use extensions to draft, revise, or customize the entire content body or individual components within a marketing asset.

You can build extensions that work with any third-party tool. This topic explains how to build an extension that integrates with an external AI service to generate or refine marketing copy. This process involves developing an Apex controller with a secure callout and a Lightning web component (LWC) that uses specific metadata to target the CMS content editor UI.

You can connect this type of extension to any third-party generative AI API, such as Gemini or ChatGPT. In this topic, the extension is connected to Gemini.

In the content builder, extensions work best with non-personalized content—content that doesn’t include merge fields or dynamic content variations. We recommend that content authors add merge fields or create dynamic variations after they use an extension.

Most marketing content types support extensions except for expressions and form handlers. Forms support extensions only for components within the content body, and not for fields.

For this extension, we use named credentials for secure external API callouts to make sure that your API key isn’t exposed in code. The name of the credential in the Apex Controller is GeminiNC. For information and instructions about configuring a named credential, see Named Credentials in the Apex Developer Guide.

Create an Apex Controller to securely connect the extension to the Gemini API. Set up the callout by using the named credential. The callout abstracts the API interaction to ensure security. See Apex Server-Side Controller Overview in the Lightning Aura Components Developer Guide.

In the Apex controller, you can transform the generative AI output to make sure that it’s compatible with structured marketing content. For example, to build a fully styled Paragraph component with your extension, use the Apex controller to map the AI response directly into the JSON schema of a paragraph component. This allows the extension to return a complete, editable component rather than text only. For information about component JSON schemas, see Reference: Component Properties and JSON Structures.

This sample Apex controller contains the secure callout, and it connects the extension to a generative AI service, in this case, Gemini. It can return a fully structured marketing email including a subject line, preheader, HTML, and structured components or blocks.

To make your extension visible in the marketing content builder, set targets and targetConfigs in the extension’s configuration or .js-meta.xml file. The primary target is lightning__CmsEditorExtension, which makes the extension appear in the extensions menu in the CMS content builder.

Set the targetConfig to lightning__CmsEditorExtension and set the height and width attributes for the extension’s floating panel. This table shows possible values for the height and width attributes.

Height and Width Attributes

An extension with this target configuration is visible to all CMS and marketing content types that support extensions. For a basic code sample, see Build Extensions for Salesforce CMS.

To make your extension available only to a specific marketing content type, such as an email or landing page, specify the contentTypes under targetconfig for lightning__CmsEditorExtension. This allows your extension to interact with the entire canvas and any other properties of the content type that you’re targeting, such as an email’s subject line and preheader. Set the contentType fullyQualifiedName to the fully qualified name (FQN) of the content type that you want to target. To target multiple content types, list multiple content types under targetconfig. You can target both marketing and non-marketing content types.

Marketing Content Fully Qualified Names

This table contains the FQNs of only the marketing content types that support extensions.

This example shows the configuration file of a generative AI extension that’s available only to email content. When opened, the extension appears in a 640x600 px floating panel within the email builder.

To make your extension available only to a specific component, specify the blockTypes under targetconfig for lightning__CmsEditorExtension. To make an extension available to all supported component types, don’t target the extension to any specific components.

To target the extension to a component type, set the blockType fullyQualifiedName to the fully qualified name (FQN) of the component you want to target. For example, to target the AI content generator to a paragraph component, set the blockType fullyQualifiedName to lightning__paragraph. To target multiple component types, list multiple components under the targetconfig or, if you’re also targeting a specific content type, list the components under the content type.

If you specify a component type, but not a content type, your extension is available to the component in all content types that support it. For example, if you target a heading component without specifying any content types, your extension is available to heading components in emails, landing pages, content blocks, templates, and forms.

Fully Qualified Names of Components in Marketing Content

This table contains the FQNs only of the component types that support extensions.

This example shows the configuration file of a generative AI extension that’s available only to paragraph components in the email and landing page content types.

The HTML file uses standard LWC markup to display the extension’s user interface (UI) in the floating panel. This UI is where the marketer interacts with the extension to generate content.

In this sample, the Email AI Assistant extension UI includes an input area for an AI prompt, a button to generate content, a loading spinner, interactive controls, and two displays of the AI output.

The CSS file is optional. Lightning web components automatically inherit Salesforce Lightning Design System (SLDS) styles, but you can use a CSS file if you want custom styling within your extension.

Here’s an example CSS file for the Email AI Assistant extension.

The JavaScript file defines the business logic of the extension and event handling. It can use experience/cmsEditorApi methods to read and write content in an entire marketing asset, or it can use experience/blockBuilderApi methods to read and write content within a selected component on the canvas.

The JavaScript file also manages the integration with the Apex controller to send the user’s prompt to the generative AI model and maps the resulting data into a format compatible with marketing content.

This is a sample JavaScript of the Email AI Assistant extension. It integrates with experience/cmsEditorApi methods and methods from the Apex controller. It takes the user input from the extension UI, sends it to the generative AI model, and programmatically updates the email to insert styled components onto the email canvas.

This sample also includes code that manages the state of the extension by using the actionstart and actiondone standard Salesforce CMS events. These events are useful to make sure that marketers don’t accidentally exit the extension before they’re finished using it.

For an example of JavaScript that integrates with experience/blockBuilderApi methods to edit content within components, see Sample Marketing Extension: Tone Checker.

• Lightning Web Components Developer Guide: experience/cmsEditorApi
• Lightning Web Components Developer Guide: Define a Component