How can we help?

Dynamic content introduction

Overview

Dynamic content enables you to personalize messages at scale. Using Smarty tactics such as conditionals and loops in your message HTML, you can send one message that will load content specific to each individual contact, showing messaging tailored to product affinity, age, location, and much more.

This article introduces a few impactful ways to begin using dynamic content in your messages.

Get started with dynamic content

In order to unlock all the possibilities of dynamic content in Cordial, you need to have data flowing into your account via Data Job, API, or JavaScript Listeners embedded on your site.

With real-time data available to you, you can create dynamic content in a message using the HTML Editor—or in a Sculpt Block, which you can then add to a Sculpt Template or message.

1. Create a new message using the HTML Editor and navigate to Message Content, or create a new Sculpt Block.

  • HTML Editor: Messages > Create New Message > HTML Editor (radio selection) > Message Content

  • Sculpt Block: Content > Sculpt Blocks > New

2. Use the tactics described below to create dynamic content in your message or Sculpt Block.

Salutations, gender, affinity, and other conditional content

Using conditional {if} statements in your HTML is a great way to greet contacts by first name and send content specific to gender, product affinity, and more.

Here's a basic example of using {if} statements to send a personalized greeting and content specific to gender.

  •   Hey{if $contact.first_name} {$contact.first_name}{/if},
      <p></p>
      {if $contact.gender == 'male'}
      We have tons of exciting deals in our new men's wear collection!
      {elseif $contact.gender == 'female'}
      Our new women's wear is flying off the shelves! Don't miss out on these deals.
      {else}
      You'll love these seasonal deals!
      {/if}
    
  • Man

    Hey Marcus,

    We have tons of exciting deals in our new men's wear collection!

    Woman

    Hey Tina,

    Our new women's wear is flying off the shelves! Don't miss out on these deals.

    Gender not specified

    Hey,

    You'll love these seasonal deals!

Display similar and related products

{foreach} statements allow you to loop through an array of data and render the results in a message. They're commonly used to display similar and related products after someone browses or purchases an item, or puts a product in their cart.

The following example shows a JSON array of data getting pulled from an example collection called pants, which could be sent to a contact after they browse pants on a site. The example then uses an {if} statement to only display pants under $90.

  • {$clothing=$utils->getSupplementRecords('pants')}
      {foreach $clothing as $pants}
      {if $pants.price < 90}
          <strong>{$pants.item} {$pants.collection}</strong><br>
          ${$pants.price}<br>
      {/if}
      {/foreach}
  • [
        {
          "model": "joggers",
          "collection": "spring",
          "price": 75,
          "id": "01"
        },
        {
          "model": "sweatpants",
          "collection": "winter",
          "price": 60,
          "id": "02"
        },
        {
          "model": "rise_jeans",
          "collection": "fall",
          "price": 100,
          "id": "03"
        },
        {
          "model": "capris",
          "collection": "spring",
          "price": 85,
          "id": "04"
        },
        {
          "model": "cargos",
          "collection": "fall",
          "price": 100,
          "id": "05"
        },
        {
          "model": "old_school",
          "collection": "fall",
          "price": 95,
          "id": "06"
        }
      ]
  • Joggers
    $75
    Spring collection

    Sweatpants
    $60
    Winter collection

    Capris
    $85
    Spring collection

Display nearest store location to a contact

People love to know what store is closest to them. The following code builds upon the distanceBetweenPostalCodes utility using {foreach} statements to do exactly that.

  • {$locations=$utils->getJson("https://p5.zdassets.com/hc/theme_assets/656597/200049057/store_locations.json")}
    {foreach $locations as $location}
    {$distance = $utils->distanceBetweenPostalCodes({$contact.address.postal_code},{$location.ZIP})}
    {$tempArray[] = [
    'distance' => {$distance},
    'address' => {$location.Address},
    'name' => {$location.Name},
    'state' => {$location.State},
    'zip' => {$location.ZIP}
    ]}
    {/foreach}
    <!--Sort Locations by Distance-->
    {$sorted_by_distance = $utils->sortArray($tempArray, 'distance', 'asc')}
    <!--Print Locations-->
    <strong>Nearest Location</strong><br><br>
    {foreach $sorted_by_distance as $closest}
    {$closest.name}<br />
    {$closest.address}<br />
    {$closest.state} {$closest.zip}<br />
    Approx {$closest.distance|string_format:"%d"} miles<br /><br />
    {/foreach}
  • [{ 
    "Address":"3430 Galleria Circle",
    "Name":"Birmingham",
    "State":"Alabama",
    "ZIP":"35244"
    },
    { 
    "Address":"11525 Cantrell Rd",
    "Name":"Little Rock",
    "State":"ARKANSAS",
    "ZIP":"72212"
    },
    { 
    "Address":"3040 El Camino Real",
    "Name":"Tustin",
    "State":"CALIFORNIA",
    "ZIP":"92782"
    },
    { 
    "Address":"24201 Valencia Blvd Suite 3210",
    "Name":"Valencia",
    "State":"CALIFORNIA",
    "ZIP":"91355"
    },
    { 
    "Address":"5102 North Nevada Avenue",
    "Name":"Colorado Springs",
    "State":"COLORADO",
    "ZIP":"80918"
    },
    { 
    "Address":"8100 W Crestline Ave",
    "Name":"Littleton",
    "State":"COLORADO",
    "ZIP":"80123"
    },
    { 
    "Address":"4920 Thompson Pkwy",
    "Name":"Loveland",
    "State":"COLORADO",
    "ZIP":"80534"
    },
    { 
    "Address":"10438 Towncenter Drive",
    "Name":"Westminster",
    "State":"COLORADO",
    "ZIP":"80021"
    },
    { 
    "Address":"18713 Biscayne Boulevard",
    "Name":"Aventura",
    "State":"FLORIDA",
    "ZIP":"33180"
    }]
  • Nearest Location (will only display one store location)

    Birmingham
    3430 Galleria Circle
    ALABAMA 35244
    Approx 4 miles

    Tustin
    3040 El Camino Real
    CALIFORNIA 92782
    Approx 79 miles

    Valencia
    24201 Valencia Blvd Suite 3210
    CALIFORNIA 91355
    Approx 143 miles

    Colorado Springs
    5102 North Nevada Avenue
    COLORADO 80918
    Approx 805 miles

    Littleton
    8100 W Crestline Ave
    COLORADO 80123
    Approx 816 miles

    Westminster
    10438 Towncenter Drive
    COLORADO 80021
    Approx 824 miles

    Loveland
    4920 Thompson Pkwy
    COLORADO 80534
    Approx 849 miles

    Little Rock
    11525 Cantrell Rd
    ARKANSAS 72212
    Approx 1417 miles

    Aventura
    18713 Biscayne Boulevard
    FLORIDA 33180
    Approx 2260 miles

Continue exploring

These examples are only the beginning of what you can do with dynamic content in Cordial.

As always, feel free to contact your CSM to learn more about using dynamic content.

Comments

0 comments

Please sign in to leave a comment.