iFrame

Embed OZZOBiT's interface in your site for a seamless experience

The iFrame integration method allows you to embed the OZZOBiT widget directly within your web application using an HTML iframe. Users stay on your site throughout the entire transaction process, providing a more seamless user experience compared to redirection.

Single Embed (Recommended)

The simplest approach is to embed the OZZOBiT widget directly in a single iframe:

Create Your Container

Add a container element in your HTML where the iframe will be rendered:

htmlhtml

<!-- HTML Container -->
<div id="OZZOBiT-container" style="height: 680px; width: 100%; max-width: 480px; margin: 0 auto;">
  <!-- OZZOBiT iframe will be embedded here -->
</div>

Embed the iFrame

Add an iframe element pointing to the OZZOBiT widget URL with your configuration:

iframe-basic.htmlhtml

<iframe
  src="https://OZZOBiT.com/global?apiKey=YOUR_PUBLIC_API_KEY&productsAvailed=BUY&themeColor=%231461db&hostLogoURL=https://your-logo.com/logo.png"
  allow="camera; microphone"
  style="width: 100%; height: 100%; border: none; border-radius: 12px;"
  id="OZZOBiT-iframe"
/>

For React/Next.js applications:

OZZOBiTIframe.tsxtsx

// components/OZZOBiTIframe.tsx
'use client'

export default function OZZOBiTIframe() {
  const params = new URLSearchParams({
    apiKey: process.env.NEXT_PUBLIC_OZZOBiT_API_KEY || '',
    productsAvailed: 'BUY',
    network: 'ethereum',
    defaultCryptoCurrency: 'ETH',
    themeColor: '#1461db',
    hostLogoURL: 'https://your-app.com/logo.png',
  })

  return (
    <iframe
      src={`https://OZZOBiT.com/global?${params.toString()}`}
      allow="camera; microphone"
      style={{
        width: '100%',
        height: '680px',
        border: 'none',
        borderRadius: '12px',
      }}
      title="OZZOBiT Widget"
    />
  )
}

⚠️

Important: Extensions Warning

Some browser extensions (especially ad blockers and privacy extensions) may block or interfere with iframes from third-party domains. If you encounter issues with the iframe not loading, recommend users to whitelist your domain or try the JavaScript SDK as an alternative.

Double Embed (Advanced)

For advanced use cases where you need full control over event handling and communication between your app and the OZZOBiT widget, you can use a double-embed approach with postMessage:

Outer iFrame Setup

Create an outer iframe that hosts your own HTML page which then contains the inner OZZOBiT iframe:

double-embed.htmlhtml

<!-- Outer iframe in your main application -->
<iframe
  id="OZZOBiT-outer"
  src="/OZZOBiT-widget.html"
  style="width: 100%; height: 700px; border: none; border-radius: 12px;"
/>

<!-- /public/OZZOBiT-widget.html (inner page) -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    #OZZOBiT-inner { width: 100%; height: 100vh; border: none; }
  </style>
</head>
<body>
  <iframe
    id="OZZOBiT-inner"
    src="https://OZZOBiT.com/global?apiKey=YOUR_KEY&..."
    allow="camera; microphone"
  />
  
  <script>
    // Listen for messages from inner OZZOBiT iframe
    window.addEventListener('message', (event) => {
      if (event.data && event.data.eventName) {
        // Forward events to parent window
        window.parent.postMessage(event.data, '*')
      }
    })
  </script>
</body>
</html>

Handle Events from Parent

In your main application, listen for forwarded events from the outer iframe:

event-handler.tsxtsx

// In your main application
useEffect(() => {
  const handler = (event: MessageEvent) => {
    const data = event.data
    
    switch (data.eventName) {
      case 'ORDER_CREATED':
        console.log('Order created:', data)
        break
      case 'ORDER_SUCCESSFUL':
        console.log('Order successful:', data)
        // Handle success - update UI, show confirmation
        break
      case 'ORDER_FAILED':
        console.log('Order failed:', data)
        break
      case 'MARKET_QUOTE':
        console.log('Quote updated:', data)
        break
    }
  }

  window.addEventListener('message', handler)
  return () => window.removeEventListener('message', handler)
}, [])

iFrame Events

Event Name	Description	Data
INITIALIZED	Widget has loaded and initialized	{}
ORDER_CREATED	User has initiated an order	{ orderId, status }
ORDER_PROCESSING	Order is being processed	{ orderId, status }
ORDER_SUCCESSFUL	Order completed successfully	{ orderId, status, cryptoAmount }
ORDER_FAILED	Order has failed	{ orderId, status, message }
ORDER_CANCELLED	Order was cancelled by user	{ orderId }
MARKET_QUOTE	Exchange rate quote received	{ fiatAmount, cryptoAmount, rate }
CLOSE_WIDGET	User closed the widget	{}

ℹ️

Recommendation

For most use cases, we recommend using the JavaScript SDK instead of raw iframes, as it provides a cleaner API for event handling and lifecycle management.