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

# Web

> Embed the Imprint application experience on your website 

## 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://apply.imprint.co/imprintsdk.js"></script>
    ```
  </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 cardholders
           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 in the referral system                                                                                 |

`onCompletion` \~ Callback `result` values:

| ENUM                 | DESCRIPTION                                                              |
| -------------------- | ------------------------------------------------------------------------ |
| **`OFFER_ACCEPTED`** | Application has been approved and credit offer accepted. New cardholder! |
| **`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          |