NFID Embed
10x your user and transaction volume by eliminating onboarding friction
NFID Embed is NFID Wallet embedded on your page as an iframe. With just a few lines of code, you can eliminate all user onboarding friction to maximize your application's growth and transaction volume.
If you'd like to add NFID Embed in your application, please email [email protected]
Client Example
1. Install the iframe-auth package
npm i @nfid/iframe-auth
2. Set iframe properties
Although a container element of type HTMLElement
and the NFID provider URL of type string
are the only required options, the handlers are strongly recommended since you're unlikely to have a properly functioning application without them.
The full interface looks like this:
export interface IIFrameAuthClient {
iframeElement: HTMLElement;
provider: string;
onSuccess?: (identity: Identity) => void;
onError?: (error?: string) => void;
iframeStyleQueries?: string;
}
The iframeStyleQueries
are a concatenation of string or hex colors as URL parameters. The full list of customization options are:
export interface ScreenStyleParams {
frameBgColor?: string | null
frameBorderColor?: string | null
primaryButtonColor?: string | null
secondaryButtonColor?: string | null
buttonBorderColor?: string | null
mainTextColor?: string | null
secondaryTextColor?: string | null
linkColor?: string | null
}
// Encode them all as a URI component:
const colorCustomization = encodeURIComponent('frameBgColor=red&frameBorderColor=#000000&primaryButtonColor=blue&etc');
The full configuration for NFID Embed looks like this:
const container = document.querySelector(".form-container") as HTMLElement;
const host = "https://nfid.one";
const handleSuccess = (i: Identity) => {
container.innerHTML = `<h3>Authenticated as: <br/> ${i
.getPrincipal()
.toString()}</h3>`;
};
const handleError = (e: string) => {
container.innerHTML = `<h3>Something went wrong: <br/> ${e}</h3>`;
};
const colorCustomization = encodeURIComponent('frameBgColor=red&frameBorderColor=#000000&primaryButtonColor=blue');
Visit our demo page to see how the iframe looks with configurable color combinations.
3. Initialize the IFrameAuthClient
Now just call the IFrameAuthClient
with your callbacks and configuration:
IFrameAuthClient(container, host, handleSuccess, handleError, iframeStyleQueries);