Creating Variations

Perform the following steps to create a new variation:

  1. On the Omnichannel Personalization Dashboard page, go to Content > Dynamic Experiences.

  2. Select the dynamic experience created for social proof from the experience list.

  3. Set/update segment and context for the created dynamic experience.

  4. Go to the last step Variations.

  5. Click + ADD VARIATION. The Variation editor window is displayed.

  6. In the Variation editor window, perform the three crucial steps to complete the creation of a new variation.

    1. General: Set up the variation name, audience percentage, trigger, and frequency.

    2. Template: Choose a page-specific template (Item, List, or Cart page) for the social proof message.

    3. Design: Customize message thresholds and settings based on the selected page type.

Perform the following steps to set up a variation for social proof:

  1. Set up the following variation parameters:

    Graphical user interface Description automatically generated

    1. Variation name: Specify a new variation name for the selected social proof experience.

    2. Audience: Specify the audience value in percentage.

    3. Trigger: By default, select Page load to trigger the social proof message whenever the defined page is loaded.

    4. Frequency: By default, select Once per page view to define the frequency of variation displayed to the user.

  1. Click Save.

  2. Click Next step.

Perform the following steps to select a template for social proof:

  1. Select the required template to enable the social proof on the required page type.

    Note: Currently templates are available for social proofing on item page, list page and cart page only.

  1. Click Save.

  2. Click Next step.

Design is different for item page, list page and cart page. For item page, there are multiple thresholds for multiple messages whereas for list page/cart page, you have to select which message to display (only one metric is available which is called an event as part of configuration). Hence threshold is available only for an event instead of all message types. Priority is not applicable for list page/cart page, as there is only one message displayed. You can also publish the variation to QA/Integration and Production environment.

The templates have default algorithms and variables to display social proof messages to avoid client-side users starting from scratch template. Additional changes may require making it work for the client site. The templates have a list of variables and code to configure social proof message. The design page and setup vary for item page, list page, and cart page:

Perform the following actions to set up Variables and Code on the Design page:

  1. Click the Variables tab, set up the following template variables and group details:

    1. Event Metric Intervals

      • Views Right Now: Set the value to define the Views Right Now metric.

      • Views Today: Set the value to define the Views Today metric.

      • Purchases Last 1 Hour: Set the value to define the Purchases in the last 1 hour metric.

      • Purchases Today: Set the value to define the Purchases Today metric.

      • Add to Carts Last 1 Hour: Set the value to define the Add to Carts in the last 1 hour metric.

      • Add to Carts Today: Set the value to define the Add to Carts Today metric.

    2. Event Metric Interval Unit

      • Views Right Now: Select the unit for Views Right Now metric. Available units are minutes, hours, days, and weeks.

      • Views Today: Select the unit for Views Today metric. Available units are minutes, hours, days, and weeks.

      • Purchases Last 1 Hour: Select the unit for Purchases Last 1 Hour metric. Available units are minutes, hours, days, and weeks.

      • Purchases Today: Select the unit for Purchases Today metric. Available units are minutes, hours, days, and weeks.

      • Add to Carts Last 1 Hour: Select the unit for Add to Carts Last 1 Hour metric. Available units are minutes, hours, days, and weeks.

      • Add to Carts Today: Select the unit for Add to Carts Today metric. Available units are minutes, hours, days, and weeks.

    3. Threshold

      For Item Page template:

      • Views Right Now: Set the minimum threshold value for displaying the Views Right Now message.

      • Views Today: Set the minimum threshold value for displaying the Views Today message.

      • Views Since Last Visit: Set the minimum threshold value for displaying the Views Since Last Visit message.

      • Purchases Last 1 Hour: Set the minimum threshold value for displaying the Purchases Last 1 Hour message.

      • Purchases Today: Set the minimum threshold value for displaying the Purchases Today message.

      • Purchases Since Last Visit: Set the minimum threshold value for displaying the Purchases Since Last Visit message.

      • Add to Carts Last 1 Hour: Set the minimum threshold value for displaying the Add to Carts Last 1 Hour message.

      • Add to Carts Today: Set the minimum threshold value for displaying the Add to Carts Today message.

      • Add to Carts Since Last Visit: Set the minimum threshold value for displaying the Add to Carts Since Last Visit message.

      • Inventory: Set the minimum threshold value for displaying the inventory remaining message.

        For more details about Inventory Messaging, see Creating Variations.

      • Message Visibility Duration: Set the minimum duration of a social proof message in milliseconds when the Message Cycle Enabled checkbox is selected as part of the configuration.

      For List Page and Cart Page templates:

      • Event Threshold Count: Set the minimum event count for displaying the message.

    1. Priority

      Which message to display first among all the messages is defined by priority. If the priority is set for the message as 1, then that message will be the highest priority among all other messages.

      When the Message Cycle Enabled checkbox (Part of the configuration section) is selected, then the order of priority of the messages will follow the priority order. If the Message Cycle Enabled checkbox is unselected, only one message will be displayed, and it will be the message with the highest priority.

      Note: The 'Priority' variable setup is available only for Item Page template.

      • Views Right Now: Set the priority for displaying the Views Right Now message.

      • Views Today: Set the priority for displaying the Views Today message.

      • Views Since Last Visit: Set the priority for displaying the Views Since Last Visit message.

      • Purchases Last 1 Hour: Set the priority for displaying the Purchases Last 1 Hour message.

      • Purchases Today: Set the priority for displaying the Purchases Today message.

      • Purchases Since Last Visit: Set the priority for displaying the Purchases Since Last Visit message.

      • Add to Carts Last 1 Hour: Set the priority for displaying the Add to Carts Last 1 Hour message.

      • Add to Carts Today: Set the priority for displaying the Add to Carts Today message.

      • Add to Carts Since Last Visit: Set the priority for displaying the Add to Carts Since Last Visit message.

      • Inventory: Select the checkbox to enable the inventory metric in the social proof message.

    2. Visibility

      Select the following checkbox(s) individually to show the metrics in the social proof message.

      • Views Right Now

      • Views Today

      • Views Since Last Visit

      • Purchases Last 1 Hour

      • Purchases Today

      • Purchases Since Last Visit:

      • Add to Carts Last 1 Hour

      • Add to Carts Today

      • Add to Carts Since Last Visit

      • Inventory

    3. Message Design

      Note: The 'Message Design' variable setup is similar for Item Page, List Page, and Cart Page.

      • Text Color: Select the color for the social proof message.

      • Width: Set the width of the social proof message box.

      • Height: Set the height of the social proof message box.

      • Margin: Set the margin for the social proof message box with respect to the surrounding page component.

      • Padding: Set the padding (inner space) for the social proof message.

      • Font Family: Set the font of the social proof message text. For example, Kant, sans-serif.

      • Font Size:  Set the font size of the social proof message text.

      • Background Color: Select the background color of the social proof message box.

      • Line Color: Select the line color of the social proof message box.

    4. Message Text

      Message Text provides information of user behavior with respect to time. 'Right Now' refers to the last 15 minutes and 'Today' refers to the last 12 hours.

      • Views Right Now: Specify the message text for the Views Right Now metric. For example, @usercount people are viewing this right now.

      • Views Today: Specify the message text for the Views Today metric. For example, @usercount people viewed today.

      • Views Since Last Visit: Specify the message text for the Views Since Last Visit metric. For example, @usercount people viewed since last visit.

        Note: The 'Views Since Last Visit' metric is available only for Item Page template.

      • Purchases Last 1 Hour: Specify the message text for the Purchases Last 1 Hour metric. For example, @usercount people have purchased in the last hour.

      • Purchases Today: Specify the message text for the Purchases Today metric. For example, @usercount people purchased today.

      • Purchases Since Last Visit: Specify the message text for the Purchases Since Last Visit metric. For example, @usercount people purchased since last visit.

        Note: The 'Purchases Since Last Visit' metric is available only for Item Page template.

      • Add to Carts Last 1 Hour: Specify the message text for Add to Carts Last 1 Hour metric. For example, @usercount people have added to cart in the last hour.

      • Add to Carts Today: Specify the message text for Add to Carts Today metric. For example, @usercount people have added to cart today.

      • Add to Carts Since Last Visit: Specify the message text for the Add to Carts Since Last Visit metric. @usercount people have added to cart since last visit.

        Note: The 'Add to Carts Since Last Visit' metric is available only for Item Page template.

      • Inventory: Specify the message text for the Inventory remaining metric. For example, Last @inventorycount items remaining.

        For more details about Inventory Messaging, see Creating Variations.

    5. (Conditional) Configuration

      If you selected "Item Page" template, then specify the following:

      • Message Cycle Enabled: Select the checkbox to repeat the defined social proof messages that meet the threshold and display one after the other for every few seconds based on the threshold set for message visibility duration.

      • Message Location: Select the location of the message to display on the item page. Options available are item_image or cart_button.

      • API Key: Specify the API key for the required client. To obtain API Key, see Getting API Key.

      • Location Selector:  Specify XPATH, ID, or class selector for the element for which the social proof message is inserted on the page followed by #.

      • Output Variable Name: Specify the output variable name.

      • Preview Item Id: Specify the external product ID to pass in the social proof API for previewing templates.

      • Message Position Cart Button: Select the position of the message to display corresponding to the cart button. Options available are above or below.

      • Message Position Image Overlay: Select the position of the message corresponding to the product image. Options available are top, middle, or bottom.

      • Page Type: Select the page type. By default, page type is selected for item_page.

      If you selected "List Page" or "Cart Page" template, then specify the following:

      • API Key: Specify the API key for the required client. To obtain API Key, see Getting API Key.

      • Preview Item Ids: Specify all the external product IDs to pass in the social proof API for previewing templates.

      • Anchoring Element Type: Specify the Anchoring Element Type.

      • Anchoring Element Attribute: Specify the attribute name which contains the item ID. When the value mentioned in the attribute name matches the itemIds then only the social proof message will be visible on that item.

      • Selected Event Metric: Select the metric for displaying the social proof message based on the event. Options available are viewedRightNow, viewedToday, purchasesIntheLast1Hour, purchasedToday, addToCartintheLast1Hour, addToCartToday, and random.

      • Message Position Image Overlay: Select the position of social proof message to display on the page. Options available are top and bottom.

      • Page Type: Select the page type. By default, page type is selected according to the template selected (list_page or cart_page).

      • Output Variable Name: Specify the output variable name.

  1. Click the Code tab, edit the codes to customize the variables of social proof messages to display accordingly on the item page.

  1. Click Save to save all the defined variables.

  2. Click Preview. The Variation preview configuration window is displayed.

  1. In the Variation preview configuration window, specify the item page URL on which the social proof is to be enabled.

  2. Click Preview.

    The Variation preview configuration window displays the notification as Preview cache is building, please wait.

  3. When the cache is built, the notification changes to Preview cache is built, then again click Preview.

    The actual item page URL (in case of Social Proof for Item page) of the site is displayed.

    Note: This is an example view of the item page URL from the client site with the social proof message enabled which displays 13 people purchased today.

    Graphical user interface, website Description automatically generated