# Rendering an Offer Panel

Partners will often present an Offer after customers have selected a core product (such as a laptop, travel booking, event tickets, etc.). The Offer presentation combines dynamic data from the Create Offer API response with static branding and content elements.

### Key Components of an Offer

There are key components to presenting an Offer:

#### Dynamic Components (from Create Offer API Response)

1. **Price** - Product pricing and financial details
2. **Disclaimer** - Legal disclaimers and policy information
3. **Policy Wording Link** - Link to the Policy Disclosure Statement (PDS)
4. **Product Details** - Product name, benefits, inclusions, and exclusions

#### Static Components (provided or approved by Cover Genius CSE)

* Trustpilot banner and ratings
* Graphical elements and branding
* Layout and design structure
* Additional marketing copy

The following examples are for Single Product cases. You want to make sure for multiple products we are displaying price, disclaimer and pds urls accordingly to not a signle product but multiple.

### Design Structure

Cover Genius offers a standard or customized design structure optimized for the partner-specific use case (e.g., Travel, Parcel, Ticket, Retail, etc.). A Travel example is presented below:

**Travel Protection Offer Panel Example**

<figure><img src="/files/uGC93MznlUG7IuyFEe12" alt=""><figcaption></figcaption></figure>

### API Response Mapping

#### 1. Price Display

**Source:** Create Offer response → `products[].details.finance.price`

```json
{
  "products": [
    {
      "id": "1846ae80-bda8-4288-aeea-4ad130a4de6a",
      "details": {
        "finance": {
          "price": {
            "total_amount": 18.61,
            "total_amount_formatted": "€18.61",
            "total_amount_without_tax": null,
            "total_amount_without_tax_formatted": null
          }
        }
      }
    }
  ]
}
```

**Display Options:**

* **Total Price:** Display `products[0].details.finance.price.total_amount_formatted`
  * Example: "€18.61"
* **Per Unit Price:** Divide `total_amount` by number of travelers/units
  * Example: "€9.31 per traveler" (if €18.61 total for 2 travelers)
* **In Button:** Use in the CTA button from `content.positive_cta`
  * Example: "Yes, add Travel Protection for €18.61"

#### 2. Disclaimer

**Source:** Create Offers response → `content.disclaimer` or `content.disclaimer_html`

{% code overflow="wrap" %}

```json
{
  "content": {
    "disclaimer": "This protection is sold by Cover Genius. Lorem ipsum dolor sit amet...",
    "disclaimer_html": "<p>This protection is sold by Cover Genius. Lorem ipsum...</p>"
  }
}
```

{% endcode %}

**Display:** Show the disclaimer text prominently near the price or at the bottom of the offer panel. Use `disclaimer_html` if you want to render HTML formatting, but make sure to apply HTML sanitization before rendering to mitigate XSS attacks.

#### 3. Policy Wording Link

**Source:** Create Offer response → `products[].details.pds_url`

{% code overflow="wrap" %}

```json
{
  "products": [
    {
      "details": {
        "pds_url": "https://staging.xcover.com/en/pds/fe92ecc3-fe4c-408a-b678-a80e5a073c65?policy_type=travel_ticket_cover_v1"
      }
    }
  ]
}
```

{% endcode %}

**Display:** Render as a hyperlink with text such as:

* "View Wording"
* "Read Policy Details"
* "Policy Disclosure Statement"

**Example:**

```html
<a href="{{ products[0].details.pds_url }}" target="_blank">
  View Policy Wording
</a>
```

#### 4. Offer Heading and Product Content

**Source:** Create Offer response → `content.heading` and `content.products[]`

{% code overflow="wrap" %}

```json
{
  "content": {
    "title": "Trip Cancelation",
    "heading": "Protect your trip",
    "sub_heading": "Make your flights and other prepaid travel costs reimbursable...",
    "products": [
      {
        "id": "6684446b-61bd-4039-b753-a4837643671c",
        "title": "Trip cancellation",
        "description": "Protection for trip cancellations"
      }
    ]
  }
}
```

{% endcode %}

**Display:**

* **Main Title:** Use `content.heading`
* **Sub-heading:** Use `content.sub_heading` for additional context
* **Product Title:** Use `content.products[0].title` for specific product name

#### 5. Benefits

**Source:** Create Offers response → `content.products[].benefits`

{% code overflow="wrap" %}

```json
{
  "content": {
    "products": [
      {
        "benefits": {
          "benefit_1": "Get up to 100% of your flight and prepaid travel costs reimbursed if you have to cancel or cut your trip short due to illness or injury",
          "benefit_2": "Money back for emergency medical costs and access to 24/7 medical assistance",
          "benefit_3": "Protection for your baggage if it is lost, stolen or delayed"
        }
      }
    ]
  }
}
```

{% endcode %}

**Display:** Iterate through the benefits object and display as bullet points:

{% code overflow="wrap" %}

```javascript
const benefits = offerData.content.products[0].benefits;
Object.values(benefits).forEach(benefitText => {
  // Display each benefit as a list item
  console.log(`✓ ${benefitText}`);
});
```

{% endcode %}

#### 6. Call-to-Action Buttons

**Source:** Create Offers response → `content.positive_cta` and `content.negative_cta`

{% code overflow="wrap" %}

```json
{
  "content": {
    "positive_cta": "Yes, add Travel Protection for  per traveler",
    "negative_cta": "No, don't protect my trip",
    "negative_cta_warning": "Are you sure? Without protection you risk having to pay significant medical expenses..."
  }
}
```

{% endcode %}

**Display:**

* **Accept Button:** Use `positive_cta` (may need to inject price)
* **Decline Button:** Use `negative_cta`
* **Warning Modal:** Show `negative_cta_warning` when user clicks decline

#### 7. Trust and Credibility

**Source:** Create Offers response → `content.credibility_message`

{% code overflow="wrap" %}

```json
{
  "content": {
    "credibility_message": "8,000 travellers choose XCover to protect their trips each week"
  }
}
```

{% endcode %}

**Display:** Show near the offer to build trust.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partner-docs.covergenius.com/offers/guides/displaying-the-quote.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.