> ## Documentation Index > Fetch the complete documentation index at: https://developers.resistant.ai/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Embed the Offline iFrame viewer and render results by sending the original file + API outputs via postMessage. This quickstart shows a **minimal working integration** for the Offline iFrame viewer: 1. Render an ` ``` *** ## Communication protocol Use `window.postMessage()` to send analysis data to the Offline iFrame viewer. ```js theme={null} const message = { // Optional but recommended (display/debugging) submissionId: "YOUR_DOCUMENT_SUBMISSION_ID", // Required fraud: JSON.stringify(responseFromGetFraudAPI), // Optional decision: responseFromGetDecisionAPI ? JSON.stringify(responseFromGetDecisionAPI) : undefined, classification: responseFromGetClassificationAPI ? JSON.stringify(responseFromGetClassificationAPI) : undefined, // Required (ArrayBuffer) fileData: fileArrayBufferAssociatedWithSubmission, // Optional (stringified JSON) style: JSON.stringify({ colors: DEFAULT_COLORS, }), // Optional locale: "en", }; document.getElementById("rai-offline-iframe").contentWindow.postMessage( message, "", [message.fileData] ); ``` *** ## Message parameters * `submissionId` *(optional, recommended)*: identifier used for display/debugging in the viewer. Use the API’s `submission_id` value. * `fraud` *(required)*: `JSON.stringify()` of the response from `GET /v2/submission/{submission_id}/fraud` * Required for overlays/highlights: request fraud with `?with_metadata=true` * `decision` *(optional)*: `JSON.stringify()` of the response from `GET /v2/submission/{submission_id}/decision` * `classification` *(optional)*: `JSON.stringify()` of the response from `GET /v2/submission/{submission_id}/classification` * `fileData` *(required)*: `ArrayBuffer` of the original uploaded file * `style` *(optional)*: `JSON.stringify()` of a style object (you can pass a partial override) * `locale` *(optional)*: `"en"` or `"pt"` (ISO 639-1 language code) *** ## Styling If no style is passed, the UI uses a default color scheme. You can override all or part of the palette. ```js theme={null} const DEFAULT_COLORS = { primary: "#5890fe", error: "#e44356", background: { primary: "#ffffff", secondary: "#fbfbfb", }, text: { primary: "#0e153c", secondary: "#62666e", }, border: { primary: "#e6e6e6", }, metadata: { background: "#f7f8f9", text: { primary: "#6b7280", secondary: "#62666e", }, }, pdfViewer: { background: "#dcdee4", scrollbar: { track: "#c5c6cd", thumb: "#a7aab1", indicator: "#858d95", indicatorShown: "#e44356", }, }, scrollbar: { track: "#dcdee4", thumb: "#b9bbcb", thumbHover: "#b9bbcb", }, documentType: { trusted: "#00be90", normal: "#5890fe", warning: "#ffb646", highRisk: "#e44356", failed: "#0c0a2c", approved: "#00be90", declined: "#e44356", manualReview: "#ffb646", }, icon: { primary: "#0e153c", disabled: "#C8CED6", }, }; ``` *** ## Locale If no locale is passed, `"en"` is used. ```js theme={null} const SUPPORTED_LOCALES = { en: "en", pt: "pt", }; ``` Example: override primary color and locale: ```js theme={null} document.getElementById("rai-offline-iframe").contentWindow.postMessage( { style: JSON.stringify({ colors: { primary: "blue", }, }), locale: "en", }, "" ); ``` *** ## Implementation notes ### Ensure the iframe loads before sending a message Messages sent before the iframe is fully loaded may not be received. * Prefer attaching a `load` event handler to the iframe (as shown in the example). * If your application has complex routing, ensure you resend on re-mount when needed. ### Recommended iframe dimensions * Width: **1250 px** (recommended), **1000 px** (minimum) * Height: **750 px** (recommended), **600 px** (minimum) ### Use transferable objects for `fileData` Use the transferable object pattern when sending `fileData` to improve performance: * pass `[message.fileData]` as the third argument to `postMessage()` *** ## Debugging tips If nothing appears or you see an error screen after sending the message: * Check the browser console for errors * Ensure all required fields (`fraud`, `fileData`) are present and correctly formatted * Confirm the iframe URL origin matches the `postMessage` target origin * If using a strict CSP, ensure scripts are allowed (avoid inline scripts in production) *** ## Browser compatibility | Browser | Supported versions | | ------- | ------------------ | | Chrome | 100+ | | Firefox | 99+ | | Safari | 15.4+ | | Edge | 100+ |