Skip to main content

🎨 Widget Creation & Integration

This comprehensive guide will walk you through the process of embedding the Onmeta Widget into your website or decentralized application.

Integration Overview​

The Onmeta Widget integration consists of three simple steps:

1️⃣

Include JS File

Add SDK script to <head>

2️⃣

Set Widget Location

Add container div element

3️⃣

Initialize Widget

Configure and launch

Step 1: Include SDK Script​

Add the Onmeta SDK script in the <head> section of your HTML:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    
    <!-- Add Onmeta SDK script -->
    <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
  </head>
  <body>
    <!-- Your website content -->
  </body>
</html>

Step 2: Add Widget Container​

Create a <div> element with an id where the widget will be rendered:

<body>
  <!-- Widget container -->
  <div id="widget"></div>
</body>

Step 3: Initialize Widget​

Add the initialization script with your configuration:

<script>
  let createWidget = new onMetaWidget({
    elementId: "widget",           // Matches the div id above
    apiKey: "your_api_key",        // Your API key from dashboard
    environment: "staging"         // "staging" or "production"
  });
  
  createWidget.init();             // Initialize the widget
</script>

Configuration Parameters​

Below is a comprehensive list of all configuration parameters you can use:

📋 Widget Configuration Parameters

ParameterTypeRequiredDescriptionExample
elementIdstringRequired

The ID of the HTML element where widget will render. Must be an ID, not a class.

"widget"
apiKeystringRequired

Your API key from the dashboard. Used for authentication.

"8794c8xxx..."
environmentstringRequired

Environment mode. Use "staging" for testing, "production" for live.

"staging"
fiatTypestringOptional

Fiat currency to use. Supported: "inr" (Indian Rupee), "php" (Philippine Peso), "idr" (Indonesian Rupiah)

"inr"
walletAddressstringOptional

Wallet address to receive crypto tokens. Can be pre-filled or entered by user.

"0xEcc24..."
fiatAmountnumberOptional

Pre-filled amount for purchase.

100
userEmailstringOptional

User's email address. If provided, skips registration step in widget.

"user@..."
chainIdstringOptional

Blockchain network ID. Example: "137" for Polygon.

"137"
tokenAddressstringOptional

Contract address of token. Use with chainId to show specific token. Otherwise shows all tokens from chain.

"0xEcc24..."
tokenSymbolstringOptional

Token symbol (e.g., USDT, USDC). Alternative to tokenAddress for filtering tokens.

"USDT"
paymentMethodstringOptional

Pre-select Payment Method (e.g., INR_UPI, INR_IMPS).

"INR_UPI"
widgetHeightstringOptional

Adjust Widget Height (e.g., "560px").

"560px"
metaDataobjectOptional

Custom data sent with webhook events. Must be key-value pairs of strings only.

{userId: "..."}
onRampstringOptional

Enable buy crypto functionality (on-ramp). Default: "enabled"

"enabled"
offRampstringOptional

Enable sell crypto functionality (off-ramp). Default: "disabled"

"disabled"
successRedirectUrlstringOptional

URL to redirect on successful order. Must start with http:// or https://

"https://..."
failureRedirectUrlstringOptional

URL to redirect on order failure. Must start with http:// or https://

"https://..."
Token Filtering

When using chainId, you must provide either tokenAddress OR tokenSymbol to display a specific token. If neither is provided, all tokens from that chain will be shown to users.

Complete Integration Example​

Here's a full HTML page with the widget integrated:

complete-example.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Onmeta Widget Integration</title>
    
    <!-- Add Onmeta SDK script -->
    <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
    
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        margin: 0;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      #widget {
        width: 100%;
        max-width: 480px;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        background: white;
      }
    </style>
  </head>
  
  <body>
    <!-- Widget container -->
    <div id="widget"></div>
    
    <script>
      // Initialize widget with configuration
      let createWidget = new onMetaWidget({
        elementId: "widget",                           // Mandatory
        apiKey: "your_api_key_here",                   // Mandatory - Replace with your key
        environment: "staging",                        // Mandatory - "staging" or "production"
        fiatType: "inr",                               // Optional
        walletAddress: "0xEcc24eab0fb83Ef0c536b35C44C578F750FDBB6E", // Optional
        fiatAmount: 100,                               // Optional
        userEmail: "user@example.com",                 // Optional
        chainId: "137",                                // Optional - Polygon
        tokenSymbol: "USDT",                           // Optional
        widgetHeight: "560px",                         // Optional
        metaData: {                                    // Optional
          userId: "USER_12345",
          userName: "John Doe",
          source: "website"
        },
        successRedirectUrl: "https://example.com/success", // Optional
        failureRedirectUrl: "https://example.com/failure"  // Optional
      });
      
      // Initialize the widget
      createWidget.init();
      
      // Listen to widget events
      createWidget.on("ALL_EVENTS", (data) => {
        console.log("Widget Event:", data);
      });
    </script>
  </body>
</html>

Widget Events​

You can listen to widget events using the .on() method:

createWidget.on(eventType, callbackFunction);

Available Events​

Event Types

ALL_EVENTS

Listens to all widget events (recommended for debugging)

ORDER_EVENTS

Listens to the order related events

ORDER_COMPLETED_EVENTS

Triggered when order is successfully completed

ACTION_EVENTS

Listens to action events

Minimal Integration​

For a quick start with minimal configuration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Onmeta Widget - Minimal</title>
    <!-- SDK Script -->
    <script src="https://stg.platform.onmeta.in/onmeta-sdk.js"></script>
  </head>
  <body>
    <!-- Widget Container -->
    <div id="widget"></div>
    
    <script>
      // Initialize with required params only
      let createWidget = new onMetaWidget({
        elementId: "widget",
        apiKey: "test_your_api_key",
        environment: "staging"
      });
      createWidget.init();
      
      // Optional: Listen to all events
      createWidget.on("ALL_EVENTS", (data) => console.log("Event:", data));
    </script>
  </body>
</html>

Troubleshooting​

Widget not rendering

Solutions:
  • Verify SDK script is loaded (check browser console)
  • Ensure elementId matches your div's id attribute
  • Check that API key is valid
  • Confirm init() is called after widget creation
  • Look for errors in browser console

API key authentication failed

Solutions:
  • Verify API key is copied correctly (no extra spaces)
  • Ensure environment matches your API key (staging/production)

What's Next?​

Ready to test the widget in action?

👉 Live Widget Testing - Try the widget directly in our documentation