> ## 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.

# Display Panel

# Introduction

Display Panel is a responsive horizontal display banner consisting of a still image and a redirect link.

<Frame caption="Example of the Display Panel Ad format">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/4d25566d63520b77bf56aa87eb9a806e10389530464bd9042121abd511a3c2c9-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=20a40b470fd927f4ce4c4376efc407ee" alt="Example of the Display Panel Ad format" width="1034" height="882" data-path="images/retailer-integration/docs/4d25566d63520b77bf56aa87eb9a806e10389530464bd9042121abd511a3c2c9-image.png" />
</Frame>

***

# Technical details

* The safe zone should remain visible for every breakpoint.
* The whole image should be clickable and should host a redirection link.
* Depending on placement size, the background image will be cropped (height stays the same):

<Frame
  caption="If the placement width is equal or superior to `1400px`,  
the background image is displayed in full size."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/96b4b51d07c0ef06aac744c5b87d9180f925119b8c01b341910534d003c56313-image.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=54010455a03e552edf98fadd0ffcf6c6"
    alt="If the placement width is equal or superior to `1400px`,  
the background image is displayed in full size."
    width="682"
    height="98"
    data-path="images/retailer-integration/docs/96b4b51d07c0ef06aac744c5b87d9180f925119b8c01b341910534d003c56313-image.png"
  />
</Frame>

<Frame
  caption="If the placement width is between `750px` and `1400px`,  
the background image is cropped on both sides"
>
  <img
    src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/d7044297694feb35a7350ab57ddfddea03da1570491b80b2de27dfd55f713ab1-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=0441a5a2c63b0fdefbfecd7009363f79"
    alt="If the placement width is between `750px` and `1400px`,  
the background image is cropped on both sides"
    width="682"
    height="98"
    data-path="images/retailer-integration/docs/d7044297694feb35a7350ab57ddfddea03da1570491b80b2de27dfd55f713ab1-image.png"
  />
</Frame>

<Frame
  caption="If the placement width is less than `750px`,  
the background image is cropped to the safe zone."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/cab1951c3b87a4d8ca37edc2c72a84aa9439898de5a7e91aa98a734befba4130-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=f6e2ecf48bd601e984fda8c5b8ea8577"
    alt="If the placement width is less than `750px`,  
the background image is cropped to the safe zone."
    width="682"
    height="98"
    data-path="images/retailer-integration/docs/cab1951c3b87a4d8ca37edc2c72a84aa9439898de5a7e91aa98a734befba4130-image.png"
  />
</Frame>

<br />

***

## Mobile version

The creative width is equal to 100% of the parent div. It scales in proportion. When the width reduces, the height reduces as well. The background image is never cropped.

<Frame
  caption="If the placement width is less than 750px, the Display Panel switches  
to mobile configuration. The banner is 100% of the width  
of the device, and scales the creative proportionally."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/c5eb4b71d90bd14a5694fc541adc24734bfcf1210e93202e2efbd51948ef6a7a-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=55c8c63e6d7d1e0cb97819eaef956e86"
    alt="If the placement width is less than 750px, the Display Panel switches  
to mobile configuration. The banner is 100% of the width  
of the device, and scales the creative proportionally."
    width="226"
    height="415"
    data-path="images/retailer-integration/docs/c5eb4b71d90bd14a5694fc541adc24734bfcf1210e93202e2efbd51948ef6a7a-image.png"
  />
</Frame>

***

# Asset sizes

## Desktop

Background image sizes:

* `1400x200px` with a safe zone of `750x200px`

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/fd1f8411d82cf451ad57e8e076367110a617c1f6f5220f2c0c2da83a7efc27d4-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=11d19bf9105d529fa46aaa9e346c2757" alt="fd1f8411d82cf451ad57e8e076367110a617c1f6f5220f2c0c2da83a7efc27d4 image" width="559" height="189" data-path="images/retailer-integration/docs/fd1f8411d82cf451ad57e8e076367110a617c1f6f5220f2c0c2da83a7efc27d4-image.png" />
</Frame>

<br />

* `1400x300px` with a safe zone of `750x300px`

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/4656b6ba044b2a64c139772e1ff80f6adc21a56ba8f0250a9e5173ff51eb823f-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=2221d108201c48c9791ee5faac8efe61" alt="4656b6ba044b2a64c139772e1ff80f6adc21a56ba8f0250a9e5173ff51eb823f image" width="559" height="267" data-path="images/retailer-integration/docs/4656b6ba044b2a64c139772e1ff80f6adc21a56ba8f0250a9e5173ff51eb823f-image.png" />
</Frame>

<br />

<Info>
  Please note that **only one of these size will be used once chosen**.
</Info>

***

## Mobile web and app

Background image sizes:

* `1350x570px`
* `1350x900px`

<Frame caption="Background of `1350x570px`">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/32586baa02126e32032ade4a6d6f2a959c42bab230f7a107b05ef1ac295d903d-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=ec910f3b2c8bc7484e97f8fe4c05330b" alt="Background of `1350x570px`" width="388" height="166" data-path="images/retailer-integration/docs/32586baa02126e32032ade4a6d6f2a959c42bab230f7a107b05ef1ac295d903d-image.png" />
</Frame>

<Frame caption="Background of `1350x900px`">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/c745bef0461f8b0a7bbca30fa842a1fc29a20fce1ac8c5fef507dcccdcd1e3f8-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=61ac358ccdf51b448cdf16de97bf3f73" alt="Background of `1350x900px`" width="388" height="250" data-path="images/retailer-integration/docs/c745bef0461f8b0a7bbca30fa842a1fc29a20fce1ac8c5fef507dcccdcd1e3f8-image.png" />
</Frame>

<Info>
  Please note that **only one of these size will be used once chosen**.
</Info>

***

# 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>
            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>
            “\_blank”: redirects to a new tab
          </li>

          <li>
            “\_self”: redirects in the same tab
          </li>
        </ul>

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

***

# Sample response

## Display panel

```json theme={null}
{
    "status": "OK",
    "placements": [{
        "viewSearchResult_API_desktop-bottom": [{
            "format": "DP",
            "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",
                "redirect_url": "https://www.criteo.us/p/salade-batavia-3000001ffgghjhg040194",
                "redirect_url_app": "app redirect",
                "redirect_target": "_self"
            },
            "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=gU6UTFHZRX8h%2bLm%2fgfardqYdNcwv1OkAlS4I1Go8pZDMgtJ9b6J28QWdhsC2nAZTzLCJmI3i486hJaSNb8cJMQcCSlgYxB4OSIhR%2bzYBx9jpKqNjHfVQcNiNKp8NNaSTu3BnA23%2fpeljDGSOjBFZEddfotGA1NP%2bVCC8JJMGfgh2n1uJxTdGoTrkriygDOy0iz7qAwf7sj%2bctHKVa2suRSe2ZRLawkZfztW231Vcw3xn0FTPeKbhdhjYGBzNKs%2fkUbP7Q0bLzX0s4WqAqMzV1IppHg%3d%3d&ev=2",
            "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=qK9HLTImiTHdD5zv6c%2fcyCgOlBfgaplqmu0CkokA1jIrovi4qrVG%2bibqys%2b8SojsJTKuZ28LCqGFUlSdX0013z8mG%2frmJhXcnM2bq0V4DSDewNZWUmVGudiBAY8mrK9CB0f0DjKkrhy7tDGmjSiJJgTqLzxIOYAoCQaj664x%2fZVdfgh4RsNU%2fcgtoYMcAI%2fDmZrmoxbPhzH8EFx%2bkm2My4dfHd9MFyuTmDhGLpM3FAhsqdDVD1bKwNJH49PXo2iGztiD&ev=2",
            "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=rjTAB7fXC6J7S%2f8%2bT2IIaMHIMdfg9LvCYDHSua%2bOdx2dEzgUby%2f9fJGwebUZgEoQa2Ecm6RqVonJscN52%2fiwK87d5HxbrfghxGLpGXueXg5ioxvfsm9%2bZ9JHfmCa7zu8QgVRk7Qtq1Kb28gX2%2fup3jaCCckAjMxxgplInlqBxUZ7LRXmqYr8HUrKsTZoYlxmt9s56OaHXEW9YvGeQpou%2fsJjilzmjXb7AJOrndW5ch0TX4G2zZ4qaJyKPuBgl4t1CjHH&ev=2",
            "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=yVma5fEYR2%2baGTU2mFGoD1SImhAifgUXBh4kE5yCe2a%2fiMcLRlrG%2bA1DuZZlyVFolE%2bBYhimmashpJaYNhmBEhbLLSbPIcm35fghNjyhlND50SEwwUwMFYfY58Qmnec3wOjPp%2bwfdH7GDA6fnCP6Yg8N%2flhIlc1bwhNle%2bboNzAfTWEKgv8dM3m%2bYvV5TbXB0W8GHbINKwMwY6nzhU2uKklutTRQTPoxj4kGFfK70Oyx23rd6j3r2864Pl3TLsB6QD1Y&ev=2"
        }]
    }]
}
```

***

<br />