Build Extensions for Salesforce CMS

Build extensions for Salesforce CMS to boost productivity for content authors, enabling them to draft, revise, or customize their content with external tools right in the editor.

You can build extensions that work with any third-party tool. This topic explains how to build an extension that integrates with the TLDR API, an external AI service, that provides a summary of existing content. 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.

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 tldrthis. 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 TLDR 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.

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

Set the targetConfig targets 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.

An extension with this targeting configuration is visible to all CMS content types, including marketing content types that support extensions.

This example shows the configuration file of a TLDR summary extension that's available to all CMS and marketing content types that support extensions. When opened, the extension appears in a 400x400 px floating panel.

To make an extension available only to specific content types, such as News or Document, specify the contentTypes under targetconfig for lightning__CmsEditorExtension. 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.

CMS Content Fully Qualified Names

This example shows the configuration file of an extension that's available only to the News content type. When opened, the extension appears in a 400x400 px floating panel.

The HTML file uses standard LWC markup to display the extension's user interface in the floating panel. This UI is where the content author interacts with the extension.

In this example, the TLDR extension UI includes fields and buttons for selecting what part of the current content to summarize, setting the length of the summary, and generating the summary.

The JavaScript file defines the business logic of the extension and event handling. It uses the experience/cmsEditorApi methods to read and write content. The JavaScript file also manages the integration with the Apex controller, which, in this case, sends the existing text to the TLDR API and gets a summary.

This example shows the core logic of the TLDR extension, which gets content from the CMS content editor, creates a summary, and updates the content.

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