> ## Documentation Index
> Fetch the complete documentation index at: https://developers.criteo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Digital Shelf Talker

> Specifications for the Digital Shelf Talker Ad format

# Introduction

**Digital Shelf Talker is a responsive vertical display banner with a still image and a redirect link**.

Points to remember:

* Available within the grid.

Redirects to 1 URL:

* On desktop via **Branding Zone** and **call-to-action button**,
* On mobile via **Branding Zone**.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/9afeaf8cd9e69c3c2c0a196b125f5b601d5cc25f1b3e689d69b60621ace96edc-image.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=7927c7a49f0a21e1994959981ade4a1f" alt="9afeaf8cd9e69c3c2c0a196b125f5b601d5cc25f1b3e689d69b60621ace96edc image" width="1280" height="1084" data-path="images/retailer-integration/docs/9afeaf8cd9e69c3c2c0a196b125f5b601d5cc25f1b3e689d69b60621ace96edc-image.png" />
</Frame>

***

# For desktop

## Asset sizes

* **Background image**is `310x500px` with fixed safe zone of `180x320px`
* **Background image small**is `270x390px` with fixed safe zone `180x190px`

**Please note that only one of these size will be used once it is chosen.**

<Frame caption="Background `310x500px`">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/d60698c73b7ccfdadbd08ea8331d70e4942163f379c1d41774cc76e08c156361-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=75f691a3ee8653cea81d1b06fc77b375" alt="Background `310x500px`" width="437" height="342" data-path="images/retailer-integration/docs/d60698c73b7ccfdadbd08ea8331d70e4942163f379c1d41774cc76e08c156361-image.png" />
</Frame>

<Frame caption="Background `270x390px`">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/34743256f3c1695dc501c05c75d5a690655032a2ac19f011d41177789b82703e-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=ca98d6a6812e39bbd37e83f9a5817b0a" alt="Background `270x390px`" width="384" height="266" data-path="images/retailer-integration/docs/34743256f3c1695dc501c05c75d5a690655032a2ac19f011d41177789b82703e-image.png" />
</Frame>

***

## Technical specifications

* The **branding zone** size is equal to the size of one product tile.
* **The redirection link** (URL) is mandatory. The entire image will be clickable. It's possible to have the redirection happen on the same page (`_Self_`) or in a new tab (`_Blank_`, not applicable for App). A redirection button (call to action) can be added as well.

### Call-to-action specifications

* **Button size**: `150x30px`
* **Button font**: `Roboto Regular, 12px`
* The gap between the options area and the bottom of the branding zone is fixed to `7px`
* There is a **safe zone** at the top of the format. This area should remain visible for every breakpoint.
* If the branding zone is smaller than the background image, then the image should be cropped on both sides uniformly and/or at the bottom.
* If the branding zone is bigger than the background image, the extra available space is filled with a plain colored background (CSS).

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/4e84979a80b2e222c15ef83085728473b8ca33ce8001e19cccd6f91c4bcbb7b2-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=8323e599713be2350299de0cb7ddfd81" alt="4e84979a80b2e222c15ef83085728473b8ca33ce8001e19cccd6f91c4bcbb7b2 image" width="910" height="392" data-path="images/retailer-integration/docs/4e84979a80b2e222c15ef83085728473b8ca33ce8001e19cccd6f91c4bcbb7b2-image.png" />
</Frame>

***

# For mobile

## Asset size

* Background image is `1242x300px`

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/64239392a17b86dd35793b152ed1da88921ae7a3caac150cb57918eb42ce0f80-image.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=d18e06f319d36b30122d03a96c27e4ef" alt="64239392a17b86dd35793b152ed1da88921ae7a3caac150cb57918eb42ce0f80 image" width="982" height="280" data-path="images/retailer-integration/docs/64239392a17b86dd35793b152ed1da88921ae7a3caac150cb57918eb42ce0f80-image.png" />
</Frame>

***

## Technical specifications

* The entire format should be clickable
* The creative width is equal to 100% of the parent div and scales in proportion. When the width reduces, the height reduces as well. The background image should never be cropped.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/27653a64267dc8d0f5e3f909ea47b16853331c45ac3d89a990bcb985d472d224-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=a323ba506639a9eed9a37d5862e90b19" alt="27653a64267dc8d0f5e3f909ea47b16853331c45ac3d89a990bcb985d472d224 image" width="504" height="838" data-path="images/retailer-integration/docs/27653a64267dc8d0f5e3f909ea47b16853331c45ac3d89a990bcb985d472d224-image.png" />
</Frame>

***

# Response keys

<table>
  <thead>
    <tr>
      <th>
        <p>
          Field
        </p>
      </th>

      <th>
        <p>
          Description
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <code>
            desktop\_background\_image
          </code>
        </p>
      </td>

      <td>
        <p>
          URL of Background image file for desktop
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            desktop\_background\_image\_alt\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          Alternative text for desktop background image
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            mobile\_background\_image
          </code>
        </p>
      </td>

      <td>
        <p>
          URL of Background image file for mobile
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            mobile\_background\_image\_alt\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          Alternative text for mobile background image
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            background\_color
          </code>
        </p>
      </td>

      <td>
        <p>
          Background color hexa code of the creative tile
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_url
          </code>
        </p>
      </td>

      <td>
        <p>
          Web URL that the user should be redirected to
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_url\_app
          </code>
        </p>
      </td>

      <td>
        <p>
          App deeplink that the user should be redirected to
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_target
          </code>
        </p>
      </td>

      <td>
        <p>
          Redirection target, can have the following values:
        </p>

        <ul>
          <li>
            <code>
              \_blank
            </code>

            : redirects to a new tab
          </li>

          <li>
            <code>
              \_self
            </code>

            : redirects in the same tab
          </li>
        </ul>

        <p>
          (only applicable for web)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            footer\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          Button text
        </p>

        <p>
          (not applicable for mobile version)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            footer\_text\_color
          </code>
        </p>
      </td>

      <td>
        <p>
          Button text color
        </p>

        <p>
          (not applicable for mobile version)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            footer\_background\_color
          </code>
        </p>
      </td>

      <td>
        <p>
          Button background color
        </p>

        <p>
          (not applicable for mobile version)
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

# Sample response

```json theme={null}
{
    "status": "OK",
    "placements": [{
        "viewSearchResult_API_desktop-inGrid": [{
            "format": "ST",
            "products": [],
            "rendering": {
                "desktop_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "desktop_background_image_alt_text": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "mobile_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "mobile_background_image_alt_text": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "background_color": "#ffff00",
                "redirect_url": "https://www.criteo.us/p/salade-batavia-3000001ffgghjhg040194",
                "redirect_url_app": "app redirect",
                "redirect_target": "_self",
                "footer_text": "click here",
                "footer_text_color": "#FFFFFF",
                "footer_background_color": "#2A3279",
            },
            "OnLoadBeacon": "//b.us5.us5.us.criteo.com/rm?rm_e=gU6UTFHZRX8h%2bLm%2fgfardqYNcwv1OkAlS4Ip1Go8pZDMgtJ9b6J28QWdhsC2nAZTzLCJmI3i486hJaSNb8JMQcCSlgYxB4OSIhR%2bzYBx9jpKqNjHfVQcNiNKp8NNaSTu3BnA23%2fpeljDGSOjBFZEddfotGA1NP%2bVCC8JJMGfgh2n1uJxTdGoTrkriygDOy0iz7qAwf7sj%2bctHKVa2suRSe2ZRLawkZfztW231Vcw3xn0FTPeKbhdhjYGBzNKs%2fkUbP7Q0bLzX0s4WqAqMzV1IppHg%3d%3d&ev=2",
            "OnViewBeacon": "//b.us.criteo.com/rm?rm_e=qK9HLTImiTHdD5zv6c%2fcyCgOlBfgaplqmu0CkokA1jIrovi4qrVG%2bibqys%2b8SojsJTKuZ28LCqGFUlSdX0013z8m%2frmJhXcnM2bq0V4DSDewNZWUmVGudiBAY8mrK9CB0f0DjKkrhy7tDGmjSiJJgTqLzxIOYAoCQaj664x%2fZVdfgh4RsNU%2fcgtoYMcAI%2fDmZrmoxbPhzH8EFx%2bkm2My4dfHd9MFyuTmDhGLpM3FAhsqdDVD1bKwNJH49PXo2iGztiD&ev=2",
            "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=rjTAB7fXC6J7S%2f8%2bT2IIaMHIMdg9LvCYDHSuka%2bOdx2dEzgUby%2f9fJGwebUZgEoQa2Ecm6RqVonJcN52%2fiwK87d5HxbrfghxGLpGXueXg5ioxvfsm9%2bZ9JHfmCa7zu8QgVRk7Qtq1Kb28gX2%2fup3jaCCckAjMxxgplInlqBxUZ7LRXmqYr8HUrKsTZoYlxmt9s56OaHXEW9YvGeQpou%2fsJjilzmjXb7AJOrndW5ch0TX4G2zZ4qaJyKPuBgl4t1CjHH&ev=2",
            "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=yVma5fEYR2%2baGTU2mFoD1qSImhAifgUXBh4kE5yCe2a%2fiMcLRlrG%2bA1DuZZlyVFolE%2bBYhimashpJaYNhmBEhbLLSbPIcm35fghNjyhlND50SEwwUwMFYfY58Qmnec3wOjPp%2bwfdH7GDA6fnCP6Yg8N%2flhIlc1bwhNle%2bboNzAfTWEKgv8dM3m%2bYvV5TbXB0W8GHbINKwMwY6nzhU2uKklutTRQTPoxj4kGFfK70Oyx23rd6j3r2864Pl3TLsB6QD1Y&ev=2"
        }]
    }]
}
```

***

# Implementation example

<br />

<iframe height="400" style={{ width: "100%", border: "none" }} src="https://codepen.io/demo_placement/embed/poXKXva" loading="lazy" allowfullscreen />

***

<br />

## What's next

* [IAB](/retailer-integration/docs/iab)
* [Display Panel](/retailer-integration/docs/display-panel)