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

API Response Mapping

1. Price Display

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

{
  "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

{
  "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>"
  }
}

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

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

Display: Render as a hyperlink with text such as:

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

Example:

<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[]

{
  "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"
      }
    ]
  }
}

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

{
  "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"
        }
      }
    ]
  }
}

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

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

6. Call-to-Action Buttons

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

{
  "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..."
  }
}

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

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

Display: Show near the offer to build trust.