> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wavebybemobi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe

> How to use the web components through iframes

This guide explains how to integrate our usage monitoring components using iframes. These components provide real-time and cached consumption data visualization with a responsive design.

## Usage Summary Component

The Usage Summary component displays an overview of the customer's consumption data, including total usage, available balance, and purchase recommendations when necessary.

### Integration

```html theme={null}
<iframe 
  src="https://your-domain.com/usage?externalCode=USER123" 
  width="100%" 
  frameborder="0"
  id="usageSummary">
</iframe>
```

<Info>The `externalCode` parameter represents a unique identifier for the user. In many implementations, this is the MSISDN (Mobile Station International Subscriber Directory Number) - the user's phone number in international format. However, it can be any unique identifier that your system uses to identify users.</Info>

<img src="https://mintcdn.com/wavebybemobi/Si8KBvlATkRLVFU0/images/usage_summary_preview.png?fit=max&auto=format&n=Si8KBvlATkRLVFU0&q=85&s=83ceeb9543aed6cf1be3e7dd5c7dd686" width="713" height="299" data-path="images/usage_summary_preview.png" />

### Empty State and Alerts

The component includes built-in states for various scenarios:

<img src="https://mintcdn.com/wavebybemobi/Si8KBvlATkRLVFU0/images/usage_summary_empty_state.png?fit=max&auto=format&n=Si8KBvlATkRLVFU0&q=85&s=7e7c53ad0c26a3f8461ed1c4ce23f0e8" width="683" height="175" data-path="images/usage_summary_empty_state.png" />

<img src="https://mintcdn.com/wavebybemobi/Si8KBvlATkRLVFU0/images/usage_summary_alert.png?fit=max&auto=format&n=Si8KBvlATkRLVFU0&q=85&s=184f22c5a1eed4288a671597e8efaace" width="691" height="350" data-path="images/usage_summary_alert.png" />

## Usage Details Component

The Usage Details component provides a detailed breakdown of consumption by product and shows zero-rating/sponsored apps information.

### Integration

```html theme={null}
<iframe 
  src="https://your-domain.com/usage/details?lineId=123&externalCode=USER123" 
  width="100%" 
  frameborder="0"
  id="usageDetails">
</iframe>
```

<img src="https://mintcdn.com/wavebybemobi/Si8KBvlATkRLVFU0/images/usage_details_preview.png?fit=max&auto=format&n=Si8KBvlATkRLVFU0&q=85&s=3a09db754dac29c3d9896444a20576cf" width="1337" height="747" data-path="images/usage_details_preview.png" />

### Zero Rating Apps Display

<img src="https://mintcdn.com/wavebybemobi/Si8KBvlATkRLVFU0/images/usage_details_zero_rating.png?fit=max&auto=format&n=Si8KBvlATkRLVFU0&q=85&s=0f6fe79a7c252a6705a4a1ea53d19080" width="850" height="114" data-path="images/usage_details_zero_rating.png" />

## Cache Management

Both components implement server-side caching for improved performance and resilience. This ensures that usage information remains available even when some external mediation services are temporarily unavailable.

### Cache Behavior

* Default: Components serve cached data when available
* Cache updates automatically in the background
* Cache invalidation follows business rules for data freshness

### Forcing Cache Bypass

To bypass the cache and fetch fresh data, add `online=true` to the URL:

```html theme={null}
<iframe 
  src="https://your-domain.com/usage/details?lineId=123&online=true" 
  width="100%" 
  frameborder="0"
  id="usageDetails">
</iframe>
```

## Customization

The components support extensive customization through the Wave API, allowing you to tailor the user experience to match your brand and requirements.

### Customizable Elements

The following elements can be customized remotely:

* **Text Content**
  * Labels and headings
  * Button text
  * Error messages
  * Information tooltips
  * Success/failure messages

* **Visual Elements**
  * Primary and secondary colors
  * Button styles
  * Card backgrounds
  * Border colors
  * Icon colors

* **Links and Navigation**
  * CTA button destinations
  * External links
  * Help/support links
  * Terms and conditions URLs

### Applying Customizations

Customizations are applied through the Wave API configuration. The components automatically fetch and apply these settings at runtime

## Dynamic Height Adjustment

All components emit a `postMessage` event containing the scroll height. This allows for dynamic iframe height adjustment to prevent unwanted scrollbars.

```javascript theme={null}
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.