*** title: iFrame slug: integration/web/iframe subtitle: Embed Transak's interface in your site for a seamless experience -------------------------------------------------------------------------- The Transak iFrame integration allows you to embed Transak’s interface directly into your website, enabling users to buy or sell crypto without leaving your page. ## Single Embed iFrame Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters). The response returns a `widgetUrl`.

A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow.

**Example Request:** ```bash curl --request POST \ --url https://api-gateway-stg.transak.com/api/v2/auth/session \ --header 'access-token: YOUR_ACCESS_TOKEN' \ --header 'content-type: application/json' \ --data '{ "widgetParams": { "apiKey": "YOUR_API_KEY", "referrerDomain": "yourdomain.com" } }' ``` Add the `widgetUrl` to your page by embedding the iframe and message listener below. **Example:** ```html

``` ### Extensions

We do not recommend using the extension integration, as the Transak interface requires browser camera permission. Integration will only work if the browser permission is already set to **Allow**.

Chrome extensions built using [Manifest v3](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/) cannot programmatically request access to the device camera. Since the Transak KYC flow requires camera access for identity verification (such as capturing ID documents or performing liveness checks), the extension cannot trigger the browser’s camera permission prompt when the widget loads. Because of this limitation, the KYC process may fail unless the user has already manually granted camera access in their browser settings. ## Double Embed iFrame Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters). The response returns a `widgetUrl`.

A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow.

**Example Request:** ```bash curl --request POST \ --url https://api-gateway-stg.transak.com/api/v2/auth/session \ --header 'access-token: YOUR_ACCESS_TOKEN' \ --header 'content-type: application/json' \ --data '{ "widgetParams": { "apiKey": "YOUR_API_KEY", "referrerDomain": "yourdomain.com" } }' ```

Add `allow=camera;microphone;payment` to both the outer and inner iframe. If you cannot set these attributes, the widget will detect it and provide a unique KYC link during the flow (also emailed to the user).

**Example:** ```typescript title="Outer iframe" import { ChangeEvent, useState } from "react"; import "./App.css"; import { useSearchParams } from "react-router-dom"; type Environment = "STAGING" | "PRODUCTION"; export default function OuterIframe() { const [searchParams] = useSearchParams(); const [environment, setEnvironment] = useState( (searchParams.get("environment") as Environment) || "STAGING" ); const [sessionId, setSessionId] = useState( (searchParams.get("sessionId") || "") ); const [apiKey, setApiKey] = useState( searchParams.get("apiKey") || "" ); const toggleEnvironment = (selectedEnvironment: Environment) => { setEnvironment(selectedEnvironment); }; const handleApiChange = (e: ChangeEvent) => { setApiKey(e.target.value); }; const apiUrl = environment === "STAGING" ? `https://transak-double-iframe-supporter.vercel.app/staging?environment=${environment}` : `https://transak-double-iframe-supporter.vercel.app/production?environment=${environment}`; const finalUrl = `${apiUrl}${apiKey ? `&apiKey=${apiKey}` : ""}`; return (

Select Environment:

API Key

); }; export const Production = () => { const [searchParams] = useSearchParams(); const apiKey = searchParams.get("apiKey") || " "; return ( ); }; export const Home = () => { return

Transak Double iframe Supporter

; }; const router = createBrowserRouter([ { path: "/", element: , }, { path: "/staging", element: , }, { path: "/production", element: , }, ]); export default function App() { return ; } ``` ## Events

Event Name	Description
`TRANSAK_WIDGET_INITIALISED`	Widget initialised with query params
`TRANSAK_WIDGET_OPEN`	Widget fully loaded
`TRANSAK_ORDER_CREATED`	Order created by user
`TRANSAK_ORDER_SUCCESSFUL`	Order is successful
`TRANSAK_ORDER_CANCELLED`	Order is cancelled
`TRANSAK_ORDER_FAILED`	Order is failed
`TRANSAK_WIDGET_CLOSE`	Widget is about to close