> ## Documentation Index
> Fetch the complete documentation index at: https://imprint-b3c5d5af-partner-docs-latest.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web

> Embed the Imprint application experience on your website 

## How it works

The Imprint Web SDK renders the application experience inside an **`<iframe>`** that the SDK injects into the container on your page. Everything the member sees and interacts with — the application flow, and any redirect-based flows such as [Account Linking](/account-linking) — is loaded *within* that iframe.

<Warning>
  Because the experience runs inside an iframe, **every page the member is redirected to must be allowed to render in a frame.** If any page in a redirect chain returns an `X-Frame-Options: DENY` (or `SAMEORIGIN`) header, or a Content-Security-Policy `frame-ancestors` directive that excludes Imprint's origin, the browser will refuse to display it and the flow will break — typically with a blank frame and no error the SDK can surface.

  This most commonly affects the **Account Linking** OIDC sign-in flow, where the member is redirected to your login/authorization page. See [Account Linking → Framing requirements](/account-linking#framing-requirements-web-sdk) for the exact requirements.
</Warning>

<Note>
  This framing constraint applies only to the Web SDK. The [iOS](/ios) and [Android](/android) SDKs present the experience in a native view (not an iframe), so `X-Frame-Options` / CSP `frame-ancestors` headers do **not** affect them.
</Note>

## Installation

<Steps>
  <Step title="Load the Imprint script">
    Include the Imprint script either at `index.html` or the page on which you plan on loading the Imprint application. It must always be loaded directly from the URL below, rather than included in a bundle or hosted yourself.

    ```javascript theme={null}
    <script src="https://sdk.imprint.co/v1/imprintsdk.js"></script>
    ```

    <Note>
      In sandbox, use `https://sdk.sbx.imprint.co/v1/imprintsdk.js` instead.
    </Note>
  </Step>

  <Step title="Add a container to your page">
    Create a container for the Imprint application.

    <CodeGroup>
      ```javascript HTML theme={null}
      <div id="imprint-ui" />
      ```

      ```css CSS theme={null}
      #imprint-ui {
        height: 900px;
        width: 700px;
      }
      ```
    </CodeGroup>

    <Note>
      Imprint application requires a minimum width of 375px.
    </Note>
  </Step>

  <Step title="Display the card application experience">
    The script exposes the global `Imprint` object. **`Imprint.create()`** initializes the UI flow and accepts a configuration object with an optional callback function and additional data fields.

    `Imprint.create()` needs to be initialized with a `client_secret ` (generated by [Creating a Customer Session](https://docs.imprint.co/api-reference/customer-sessions/create-a-new-customer-session)).

    The configuration object accepts an optional `onCompletion` callback function, which is triggered at the end of the application flow in different scenarios. Please refer to the full list  of `onCompletion` parameter options below.

    *Example Implementation:*

    ```javascript theme={null}
    Imprint.create({
     client_secret: "QzMyNzg4QzgtNEUwOS00QkU4LThDMjEtMkU5OUQ3QzkwRDhGCg==",
     selector: "#imprint-ui", // reference to your container
     onCompletion: (result, data) => {
       switch (result) {
         case "OFFER_ACCEPTED":
           // Implement logic for new approved members
           console.log("Offer accepted, data:", data);
           break;
         case "REJECTED":
           // Implement logic for rejected applications
           console.log("Rejected, data:", data);
           break;
         case "IN_PROGRESS":
           // Implement logic for abandoned applications
           console.log("Abandoned, data:", data);
           break;
         case "ERROR":
           // Implement error handling
           console.log("Error occurred:", data);
           break;
       }
     }
    });
    ```
  </Step>
</Steps>

## Reference

`Imprint.create()` \~ Configuration Object Fields:

| PROPERTY NAME | REQUIRED | TYPE | DESCRIPTION |
| - | - | - | - |
| **`client_secret`** | TRUE | String | Generated through [Create Customer Session](https://docs.imprint.co/api-reference/customer-sessions/create-a-new-customer-session) endpoint |
| **`selector`** | FALSE | String | DOM element to load the application. If not provided, Imprint will try to find a container with `id="imprint-ui"` (`#imprint-ui` selector) |
| **`onCompletion`** | FALSE | String | Callback function that accepts a `result` and `data` parameters (see all possible values below) |
| `referralCode` | FALSE | String | For use with Imprint's Referral Program |
| `offerConfigUUID` | FALSE | String | Identifier for specific reward offer |
| `offerConfigUUIDs` | FALSE | String\[] | Identifiers for specific reward offers. Takes precedence over `offerConfigUUID` if both are provided. |

`onCompletion` \~ Callback `result` values:

| ENUM | DESCRIPTION |
| - | - |
| **`OFFER_ACCEPTED`** | Application has been approved and credit offer accepted. New member! |
| **`REJECTED`** | Application has been rejected by Imprint |
| **`IN_PROGRESS`** | Application has been exited, not completed |
| **`ERROR`** | Invalid request parameters (e.g., invalid token) |

`onCompletion` \~ Callback `data` object fields:

| PROPERTY NAME | TYPE | DESCRIPTION |
| - | - | - |
| **`customer_id`** | string \| null | Imprint Customer ID |
| **`payment_method_id`** | string \| null | Payment Method ID |
| **`partner_customer_id`** | string \| null | Partner Customer ID |
| **`error_code`** | string \| null | Error Code |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.