---
schema_version: "1"
id: 72d9ea136376671cd4a87be18d53ace3cd95d95703199b6b26d128bf894ca009
title: Recommended Promotions Widget Template
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/mktg/264-0-0/loyalty_personalization_widget_details.md
canonical_url: https://help.salesforce.com/s/articleView?id=mktg.loyalty_personalization_widget_details.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 51b515903a220da913931d91aa466dc1c60a045c227a7cdbc6ff1653de96b4f6
description: The Recommended Promotions widget template lets customers see promotions recommended for them. Customer can view the name, description, and coupon code of the recommended promotions. The widget also enables members to copy the coupon code.
products:
  - Marketing
release: "264"
---
# Recommended Promotions Widget Template

The Recommended Promotions widget template lets customers see promotions recommended for them. Customer can view the name, description, and coupon code of the recommended promotions. The widget also enables members to copy the coupon code.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col style="width:100%"></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions with Real-Time Offer Management. Additionally, you need Data Cloud and Personalization.</td></tr></tbody></table>

## Widget Content

The Recommended Promotions widget has the not enrolled, enrolled and the error state. You can customize all these states.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:33.33333333333333%">
          <col style="width:33.66336633663366%">
          <col style="width:33.003300330033%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d16686e76">STATE</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d16686e79">SECTION</th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d16686e82">WHAT YOU CAN CUSTOMIZE</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="STATE" class="slds-cell-wrap" rowspan="3" style="vertical-align:top;" headers="d16686e76 ">Not Enrolled</td>

            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Background</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 "> Consists of the widget’s background. You can add a color or image for the
              background and change the background’s height and padding.</td>

          </tr>
          <tr class="">
            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Body</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Consists of a header and cards that contain the details of all the recommended
              promotion that customers can redeem but are not enrolled in. Each promotion card
              contains the name and description of the promotion. You can change the header and
              the background of the cards that contain the promotion details.</td>

          </tr>
          <tr class="">
            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Footer</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Each promotion card consists of a button that members can use to join the
              promotion.</td>

          </tr>
          <tr class="">
            <td data-label="STATE" class="slds-cell-wrap" rowspan="3" style="vertical-align:top;" headers="d16686e76 ">Enrolled</td>

            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Background</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Consists of the widget’s background. You can add a color or image for the
              background and change the background’s height and padding.</td>

          </tr>
          <tr class="">
            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Body</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Consists of a header and cards that contain the details of all the recommended
              promotion that customers can redeem. Each promotion card contains the name,
              description, and coupon code of the promotion. You can change the header and the
              background of the cards that contain the promotion details.</td>

          </tr>
          <tr class="">
            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Footer</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Each promotion card consists of a button that members can use to avail the
              promotion.</td>

          </tr>
          <tr class="">
            <td data-label="STATE" class="slds-cell-wrap" rowspan="2" style="vertical-align:top;" headers="d16686e76 ">Error</td>

            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Background</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Consists of the widget’s background. You can add a color or image for the
              background and change its height and padding.</td>

          </tr>
          <tr class="">
            <td data-label="SECTION" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e79 ">Message</td>

            <td data-label="WHAT YOU CAN CUSTOMIZE" class="slds-cell-wrap" style="vertical-align:top;" headers="d16686e82 ">Consists of the message that is shown to the members when the widget can’t show
              any data to the members. You can change the text in the message.</td>

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

## Example for Customizing Widget in Flexcard Designer

The loyalty program manager of a company wants to customize the image size and coupon code display in the enrolled state of the Recommended Promotions widget.

The program manager expands the enrolled state, opens the child card, and customizes the image size. The manager chooses to display the promotion cards with the image as a background. The manager decides to show the coupon code at the bottom of the promotion cards and ensures that the message in the default state copy message components is set to Code copied when customers copy the coupon code.

## Preview the Widget

After customizing the widget, the program manager previews it to see how members will view their recommended promotions. In the preview, the program manager must provide these values:

- Number of recommendations: The number of recommendations that the widget previews.
- Personalization Point: The personalization point for which the widget is previewed.
- Membership number, Individual ID or the Loyalty Program Member ID: The details of the individual for whom the widget is previewed for.

The marketing managers can also choose to define these values based on their requirements:

- Dataspace Name: The data space that defines the boundary of a personalization context.
- Channel ID: The channel for which to retrieve eligible promotions that the widget previews.
- Promotion Per Product Limit: The maximum number of promotions that can be recommended for a product.
- Choose whether to preview the image of the promotion.