> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.credit.aarthiklabs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.credit.aarthiklabs.com/_mcp/server.

# Front-End Integrations

> Request an embed URL from your back-end and open the Hosted Experience for the borrower.

The front-end integration is intentionally small. Your front-end never calls Aarthik Labs directly. It calls your back-end, receives an `embedURL`, and opens that URL for the borrower.

## Recommended Web Flow

1. Borrower taps a product entry point in your app.
2. Your front-end calls your back-end endpoint.
3. Your back-end returns `embedURL`.
4. Your front-end renders the Hosted Experience.
5. If the URL expires or the borrower returns later, your front-end asks your back-end for a fresh URL.

## Examples

* [NextJS Examples](/documentation/hosted-experience/front-end-integrations/next-js-examples) shows a client component that requests an `embedURL` from your back-end and opens the Hosted Experience in an `iframe`.

## `iframe` Requirements

For web embeds, use:

```tsx
allow="camera; microphone; clipboard-read; clipboard-write"
```

Also make sure:

* your domain is allowlisted for the application
* your host app runs over HTTPS in production
* your page layout gives the `iframe` enough height for borrower forms and lender screens
* your own Content Security Policy allows the Hosted Experience URL as a frame source

## Mobile Applications

If your product opens Hosted Experience in a mobile webview or app shell, follow the same principle:

* request `embedURL` from your back-end
* open it immediately
* register the mobile bridge before loading Hosted
* handle external lender-step events from Hosted
* allow camera and file permissions when the journey needs them
* create a fresh URL when the borrower returns later

For mobile implementations, also read:

* [Bridge](/documentation/common/mobile-applications/bridge)
* [Permissions](/documentation/common/mobile-applications/permissions)

## Loading And Retry States

Show a loading state while your back-end creates the URL. If URL creation fails, show a retry action that calls your back-end again.

Do not retry by reusing an old `embedURL`. The URL contains a short-lived bootstrap token and should be treated as a one-time browser entry point.