---
schema_version: "1"
id: 44de4fd28f00fac468f922259267f7254b6b210071b23d005085975d10dc3318
title: Extend Preview and Test in Marketing Cloud Next
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/mktg/264-0-0/mktg_content_extend_preview_and_test.md
canonical_url: https://help.salesforce.com/s/articleView?id=mktg.mktg_content_extend_preview_and_test.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 864ffa81d6c2a84143ece0a8a0c2192cbe8fa02c0557929a1c6182f6edb418ad
description: Preview and Test is a built-in feature in Marketing Cloud Next for reviewing your message content before sending. From the Preview and Test modal, you can see how your email, SMS, or WhatsApp message appears to recipients, personalize the preview with specific segment members, and validate merge fields. The modal includes dedicated tabs for previewing rendered content and running test sends.
products:
  - Marketing
release: "264"
---
# Extend Preview and Test in Marketing Cloud Next

Preview and Test is a built-in feature in Marketing Cloud Next for reviewing your message content before sending. From the Preview and Test modal, you can see how your email, SMS, or WhatsApp message appears to recipients, personalize the preview with specific segment members, and validate merge fields. The modal includes dedicated tabs for previewing rendered content and running test sends.

### Required Editions

[View supported editions](https://help.salesforce.com/s/articleView?id=mktg.mktg_editions.htm&release=264.0.0&type=5 "Marketing Cloud Next is available in Growth and Advanced editions, and requires Salesforce Enterprise or Unlimited editions. Some features are limited by edition or purchased add-on. All functionality is available in Lightning Experience only.").

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d9369e55">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d9369e55 ">To preview and test content: </td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d9369e55 ">Marketing Cloud Manager permission set AND any CMS workspace contributor role </td>

          </tr>
        </tbody>
      </table>

You can view the available Preview and Test extensions in AppExchange by navigating to [AppExchange](https://appexchange.salesforce.com/) and entering preview and test in the search bar.

You can extend Preview and Test by adding custom tabs to the modal. Each custom tab is powered by a Lightning Web Component (LWC) that you build and deploy to your org. The tab receives live preview data, including channel type, content, and merge field values, so you can build custom validation tools, rendering previews, or integration checks directly in the Preview and Test experience.

The extension mechanism is based on a metadata type `UiPreviewMessageTabDef`. When you create and activate a `UiPreviewMessageTabDef` record, your custom tab appears alongside the standard Preview and Test tabs in the modal.

- Complete the setup for Marketing Cloud Growth or Advanced edition. For setup instructions, see the [Getting Started](https://cloud.mail.salesforce.com/marketingcloudadvancedpartnerpocketguide#orgs) guide.
- Set up [Salesforce Workbench](https://workbench.developerforce.com/login.php).
- Provision the Email channel. Without this, `UiPreviewMessageTabDef` is not accessible.

- **[Understand the previewData Object](https://help.salesforce.com/s/articleView?id=mktg.mktg_content_understand_the_previewdata_object.htm&release=264.0.0&type=5)**  
    Your custom LWC receives a previewData object that contains contextual information about the message being previewed. The fields available in previewData vary by channel.

## Step 1: Create and Deploy a Lightning Web Component

Create an LWC and deploy it to your org. The component provides the content that appears in your custom tab. Use the directory structure and file contents specified in the procedure.

1. Create a directory structure for your component:
    
    ```
    
    lwc/
      customTab/
        customTab.html
        customTab.js
        customTab.js-meta.xml
    package.xml
    ```
    
    See [Create Lightning Web Components](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_develop_create_lwc.htm).
2. Add this markup to customTab.html:
    
    ```
    
    <template>
      <div style="padding: 20px;">
        <div>This content appears in the custom tab.</div>
        <div>previewData.channelType: {previewData.channelType}</div>
        <div>previewData.content: {previewData.content}</div>
        <div>previewData.contentKey: {previewData.contentKey}</div>
        <div>previewData.emailSubject: {previewData.emailSubject}</div>
        <div>previewData.emailPreheader: {previewData.emailPreheader}</div>
      </div>
    </template>
    ```
3. Add this code to customTab.js:
    
    ```
    
    import { LightningElement, api } from "lwc";
    export default class CustomTab extends LightningElement {
        @api previewData;
    }
    ```
4. Add this metadata to customTab.js-meta.xml:
    
    ```
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>64.0</apiVersion>
        <isExposed>true</isExposed>
        <capabilities>
            <capability>lightning__dynamicComponent</capability>
        </capabilities>
    </LightningComponentBundle>
         
    ```
5. Add this content to package.xml:
    
    ```
    
    <?xml version="1.0" encoding="UTF-8"?>
    <Package xmlns="http://soap.sforce.com/2006/04/metadata">
        <types>
            <members>*</members>
            <name>LightningComponentBundle</name>
        </types>
        <version>64.0</version>
    </Package>
    ```
6. Deploy the component to your org.
    
    See [Deploy Using Your Own Tools](https://developer.salesforce.com/docs/platform/lwc/guide/get-started-with-your-tools.html).

## Step 2: Create a UiPreviewMessageTabDef Entry

After you deploy your LWC, create a `UiPreviewMessageTabDef` record to register your custom tab.

1. In your org, click the setup icon and select **Developer Console**.
2. In the Developer Console, click the **Query Editor** tab.
3. At the bottom of the Query Editor, select the **Use Tooling API** checkbox.
4. Enter the following query, and then click **Execute**:
    
    ```
    SELECT Id, DeveloperName, TabName, IsActive, SupportedChannel, LightningComponentDefId
    FROM UiPreviewMessageTabDef
    ```
5. Click **Insert Row** and provide values for each required field. For field descriptions, see [UiPreviewMessageTabDef](https://help.salesforce.com/s/articleView?id=mktg.mktg_content_understand_the_previewdata_object.htm&release=264.0.0&type=5).
6. To get the ID of the LWC you deployed, run the following query in the Query Editor:
    
    ```
    SELECT Id, DeveloperName, IsExposed, NamespacePrefix
    FROM LightningComponentBundle
    WHERE IsExposed = true
    ```
7. Copy the `Id` value from your component and enter it in the **LightningComponentDefId** field.
8. Click **Save Rows**.

After you save the `UiPreviewMessageTabDef` record with `IsActive` set to `true`, your custom tab appears in the Preview and Test modal next to the standard Preview and Test tabs. The `previewData` object passed to your component updates automatically when the preview context changes, such as when a user selects a different segment member or switches between personalized and non-personalized views.

## Step 3: Package your Extension

To distribute your Preview and Test extension through AppExchange, include both the `LightningComponentBundle` and `UiPreviewMessageTabDef` records in your managed package.

Users who install your package can control whether the custom tab appears in their Preview and Test modal by modifying the `IsActive` field on the installed `UiPreviewMessageTabDef` record.