Skip to main content
This guide explains how to integrate our web components using iframes. These components are designed to be easily embedded into any web application while maintaining consistent styling and behavior.

​
Offers Grid Component

The Offers Grid component displays a collection of offer cards with various layout options and filtering capabilities.

​
Integration

<iframe 
  src="https://wave-domain.com/offers?cardType=features&productId=123" 
  width="100%" 
  frameborder="0"
  id="offersGrid">
</iframe>

​
Query Parameters

ParameterDescriptionExample
cardTypeVisual style of cards (text, hero, squared, features, topup)cardType=features
pagePage number for paginationpage=1
pageSizeNumber of items per pagepageSize=12
productIdFilter offers by product IDproductId=123
salesChannelIdFilter by sales channelsalesChannelId=456
billingTypeFilter by billing type (PREPAID/POSTPAID)billingType=PREPAID
nameFilter by offer namename=Premium
metadataFilter by metadata fieldsmetadata.key=value
orderByField to sort by (createdAt/name)orderBy=createdAt
orderSort direction (ASC/DESC)order=desc

​
Card Types

The component supports different card layouts through the cardType parameter:
  1. default: Standard detailed card with hero, title, description, price, and features
  1. text: Simple text-based card with title and description
  1. hero: Large card with prominent image
  1. squared: Compact square card with image
  1. features: Detailed card with feature list
  1. topup: Special card for top-up offers

​
Single Offer Card Component

Displays a single offer card using base64 encoded offer data.

​
Integration

<iframe 
  src="https://wave-domain.com/offers?data=base64EncodedOfferData&cardType=features" 
  width="100%" 
  frameborder="0"
  id="singleOffer">
</iframe>

​
Offer Object Structure

The offer object should follow this structure before base64 encoding: 
interface Offer {
  id: string;
  name: string;
  description: string;
  billingType: "PREPAID" | "POSTPAID";
  pricing: {
    model: "STANDARD";
    properties: {
      price: string;
      currency: string;
      recurrence: "SPOT" | "DAILY" | "MONTHLY" | "WEEKLY" | "YEARLY";
      payInAdvance: boolean;
    };
  };
  product: {
    id: string;
    name: string;
    description: string;
    metadata: Record<string, string | number | boolean>;
  };
  features: string[];
  metadata: Record<string, string | number | boolean>;
  ctaLink?: string;
  bannerUrl?: string;
}
Example usage: 
const offerData = {
  id: "123",
  name: "Premium Package",
  // ... other fields
};
const base64Data = btoa(JSON.stringify(offerData));
const iframeSrc = `https://wave-domain.com/offers?data=${base64Data}&cardType=features`;

​
Product Page Component

Displays a complete product page with details and associated offers.

​
Integration

<iframe 
  src="https://wave-domain.com/products/123" 
  width="100%" 
  frameborder="0"
  id="productPage">
</iframe>
The product page consists of three main sections:
  1. Product Hero - Displays main product information
  2. Product Features - Lists product features
  3. Product Offers - Shows associated offers
This component automatically fetches and displays all product information and related offers based on the provided product ID in the URL.

​
Checkout Component

The Checkout component provides a complete purchase flow for offers. It can be integrated into any web application and maintains communication with the parent window for dynamic height adjustment.

​
Integration

<iframe 
  src="https://wave-domain.com/offers/checkout/123" 
  width="100%" 
  frameborder="0"
  id="checkoutFlow">
</iframe>

​
Component Flow

The checkout process consists of three main states:
  1. Initial verification (required only when user is not logged in)
  2. Order confirmation
  3. Success message

​
Summary View

The summary view displays the offer details and purchase confirmation:

​
Success View

After successful purchase, the component displays a confirmation message:

​
Offer Display in Checkout

The checkout component uses two specialized card types for displaying offer details:

​
Integration with Offers

The checkout component can be accessed in several ways:
  1. From Offer Cards: When users click the CTA button on any offer card, they are directed to the checkout flow for that specific offer.
  2. Direct URL: Using the offer ID in the URL: /offers/checkout/{offerId}
  3. From Product Pages: When browsing product offers, the CTA buttons link to the checkout component.

​
Dynamic Height Adjustment

All components emit a postMessage event containing the scroll height. This allows for dynamic iframe height adjustment to prevent unwanted scrollbars. 
window.addEventListener('message', function(e) {
  if (e.data && e.data.scrollHeight) {
    const iframe = document.querySelector('#myIframe');
    iframe.style.height = `${e.data.scrollHeight}px`;
  }
});
The component sends height updates on:
  • Initial load
  • State changes
  • Content updates
  • Error messages display
Remember to implement the height adjustment listener for all iframe integrations to ensure proper display without scrollbars.