# Delivery Message Element

> 📘 Buy with Prime API is now available for early access
>
> Sign up for early access to the Buy with Prime API using the 'Sign Up' button below. The API may change as Amazon receives feedback and iterates on it.

[block:html]{"html":"<a href=\"https://www2.amazonbuywithprime.com/api-interest-list?utm_medium=website&utm_source=direct\"\n   style=\"background-color: #5a9bd5; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-top: 10px; display: inline-block; font-size: 16px; border-radius: 5px; text-decoration: none;\">\n    Sign Up\n</a>"}[/block]

The delivery message element is a web component that displays the Prime Check logo, a delivery estimate, and eligibility for returns. Use the delivery message element on the product listing, cart, or checkout page to show that the product is eligible for Buy with Prime, provide a delivery estimate, and indicate whether the product is returnable.

* JavaScript source: `https://cdn.elements.amazon/elements/amazon-delivery-message/v1.0/web-component.js`.
* HTML tag: `<amazon-delivery-message>`.

The following image shows a delivery message element on a category page.

![Amazon delivery message element in context](https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-banner.png)

# Attributes on the element tag

The delivery message element requires a product identifier attribute, and it has optional attributes for display settings.

## Product identifier

One of the following:

| Attribute             | Description                                                 |
| --------------------- | ----------------------------------------------------------- |
| `product-external-id` | An identifier from your ecommerce platform.                 |
| `product-id`          | A Buy with Prime generated product ID.                      |
| `product-sku`         | A SKU from your ecommerce platform.                         |
| `product-amazon-sku`  | Amazon SKU on Amazon Seller Central or Supply Chain Portal. |

You can also optionally specify a marketplace by using the `product-marketplace-id` attribute, which is set to `US` by default. For a site that doesn't use Shopify, see [Handle product variants](https://documents.buywithprime.amazon.com/bwp-api/docs/add-an-element-to-your-site#step-3-optional-handle-product-variants). For a site that uses Shopify, to support variants, use the following attributes.

| Attribute        | Value                                         | Description                                                                                                                                                                                                                                                                                                                                                                |
| ---------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `provider`       | `"shopify"`                                   | Sets the ecommerce service provider.                                                                                                                                                                                                                                                                                                                                       |
| `variant-helper` | `"true"`<br>`"false"`                         | Determines whether the element automatically updates when a shopper selects a new variant on a product detail page. The default is `"true"`.                                                                                                                                                                                                                               |
| `context`        | `"collection"`<br>`"in-cart"`<br>`"in-order"` | Determines whether the element refreshes the delivery estimate after a shopper signs in with Login with Amazon (LWA). Set to `"collection"` on a product listing page to keep the estimate static. Set to `"in-cart"` on a cart page or `"in-order"` on a checkout or order confirmation page to refresh the estimate with the shopper's saved address after they sign in. |

## Appearance

<table>
   <tr>
      <th>Attribute</th>
      <th>Value</th>
      <th>Description</th>
      <th style="width: 300px;">Example</th>
   </tr>
   <tr>
      <td><code>message-type</code></td>
      <td><code>"none"</code><br><code>"options-available"</code></code><br><code>"delivery-estimate"</code><br><code>"delivery-estimate-and-returns"</code></td>
      <td>Shows whether Prime options are available, or displays a delivery estimate and returns information. The default is <code>"delivery-estimate"</code>.</td>
      <td><code>"none"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-message-text-none.png"/><br><code>"options-available"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-message-text-options-available.png"/><br><code>"delivery-estimate"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-message-text-estimate.png"/><br><code>"delivery-estimate-and-returns"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-message-text-estimate-returns.png"/></td>
   <tr>
      <td><code>color-mode</code></td>
      <td><code>"light"</code><br><code>"dark"</code></td>
      <td>The color mode of the element. The default is <code>"light"</code>. </td>
      <td><code>"dark"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-dark-mode.png"/></td>
   </tr>
   <tr>
      <td><code>text-color</code></td>
      <td>Hex color code</td>
      <td>The text color of the element.</td>
      <td><code>"#B35E14"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-message-text-color.png"/></td>
   </tr>
   <tr>
      <td><code>font-family</code></td>
      <td>Name of the font</td>
      <td>The font of the element. The default is <code>"Amazon Ember"</code>.</td>
      <td><code>"Times', serif"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-font-family.png"/></td>
   </tr>
   <tr>
      <td><code>font-size-base</code></td>
      <td>Size in pixels, for example <code>16px</code></td>
      <td>The font size of the element. The Prime Check logo increases or decreases in size to match. The default is <code>14px</code>.</td>
      <td><code>18px</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-font-size-base.png"/></td>
   </tr>
   <tr>
      <td><code>content-alignment</code></td>
      <td><code>"left"</code><br><code>"right"</code> <br><code>"center"</code></td>
      <td>The alignment of the element. The default is <code>"left"</code>.</td>
      <td><code>"left"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-align-left.png"/> <br><code>"right"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-align-right.png"/><br><code>"center"</code><br><img src="https://d1t6aow54ifh7o.cloudfront.net/bwp_api_assets/amazon-delivery-message-element-align-center.png"/></td>
   </tr>
</table>

# Example

```html
<amazon-delivery-message product-external-id="[YOUR-PRODUCT-EXTERNAL-ID]" message-type="options-available" content-alignment="right">
</amazon-delivery-message>
```

# Related topics

* [Add an Element to Your Site](https://documents.buywithprime.amazon.com/bwp-api/docs/add-an-element-to-your-site)
* [Sign-In Card Element](https://documents.buywithprime.amazon.com/bwp-api/docs/sign-in-card-element)
* [Elements Overview](https://documents.buywithprime.amazon.com/bwp-api/docs/elements-overview)