# Example HTML

Swapper Finance Widget Integration

```html
<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>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.swapper.finance/swapper-widget/example-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.