Sample Marketing Extension: Tone Checker

For detailed, step-by-step instructions about creating an extension for marketing content types, see Build Extensions for Marketing Content in Marketing Cloud Next. These code samples are for an extension that allows marketers to use AI to edit the tone of content within a selected component on the canvas.

This sample Apex controller contains the secure callout using named credentials (GeminiNC), and it connects the extension to Gemini. It can revise content in a selected component to match a specified tone.

In this sample, the Tone Checker extension is made available only to heading components within email content. When opened, the extension appears in a 640x600 px floating panel within the email builder.

In this sample, the Tone Checker extension UI includes radio buttons for tone selection, a preview container for the revised content, and action buttons that the user can click to apply, to try generating content again, or to replace the content with the revised version.

Use this sample CSS file to style your Tone Checker extension. If you don’t use this CSS file, your extension automatically inherits Salesforce Lightning Design System (SLDS) styles.

This file demonstrates JavaScript that integrates with experience/blockBuilderApi methods to edit content within components. It takes the content from a selected heading component and revises it using Gemini to match the tone selected by the user. Then it can replace the content in the heading component with the revised content.