Example HTML

This page shows example HTML integration of the Swapper Finance Widget with the style adjustements

Swapper Finance Widget Integration

<h1>Integrate Swapper Finance</h1>

<div class="widget-container">
  <!-- src will be set by JavaScript -->
  <iframe
    id="swapperFinanceWidget"
    src=""
    width="100%"
    height="560px"
    title="Swapper Finance Widget"
    allow="camera"
    sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation"
  ></iframe>
</div>

<script>
  // 1. Your unique Integrator ID
  const yourIntegratorId = "xxx"; // <-- REPLACE THIS WITH YOUR ACTUAL INTEGRATOR ID

  // 2. Define the iframe base URI
  const IFRAME_BASE_URI = "https://app.swapper.finance";

  // 3. Define the styles configuration
  const stylesConfig = {
    themeMode: "dark",
    brandTheme: {
      primaryColor: "#FF6B35", // Your primary brand color
    },
    componentStyles: {
      backgroundColor: "#444444"
    }
  };

  // 4. Construct the query parameters with encoded styles
  const queryParams = new URLSearchParams({
    integratorId: yourIntegratorId,
    styles: JSON.stringify(stylesConfig),
  }).toString();

  // 5. Form the full iframe source URL
  const iframeSrc = `${IFRAME_BASE_URI}?${queryParams}`;

  // 6. Get a reference to your iframe element and set the src
  const iframeElement = document.getElementById("swapperFinanceWidget");

  if (iframeElement) {
    iframeElement.src = iframeSrc;
    console.log(
      "Swapper Finance Widget: URL configured with query parameters."
    );
    console.log("Full URL:", iframeSrc);
  } else {
    console.error("Swapper Finance Widget: Iframe element not found.");
  }
</script>