# Configuration

# Introduction

The Widget can be used in two ways: the KycDaoIframeClient (recommended) and the KycDaoClient. Check out our Usage Matrix to see which one is the best for you.

# KycDaoIframeClient (recommended)

The KycDaoIframeClient can be rendered both as a modal, and inline. This is the recommended way to use the Widget.

The KycDaoIframeClient does not require you to host / import any styles locally.

Interface
type KycDaoClientOptions = {
    modal?: boolean; // whether to display as modal or block elem, default: true
    parent: HTMLElement | string; // parent elem to render Widget to, default: document.body
    config: SdkConfiguration; // the SDK config such as enabled blockchains, API URL e.t.c.
    backdrop?: boolean; // whether to display a backdrop, default: true
    iframeOptions?: IframeOptions; // Only used in the `KycDaoIframeClient`
    onFail?: (reason: string) => void; // Called when modal is closed
    onSuccess?: (data?: string) => void; // Called when mint tx is successful with tx URL in tracker
};

Here's a list of all KycDaoIframeClient specific options, explained:

An object containing options for the Widget's iframe.

For the option url you would usually use https://sdk.kycdao.xyz/iframe.html, and for messageTargetOrigin you would usually use window.origin

Example
const iframeOptions = {
    url: 'https://sdk.kycdao.xyz/iframe.html',
    messageTargetOrigin: window.origin,
};

The parent element where the Widget will be rendered. Can be an HTMLElement or a string (the ID of the element).

Environment config options such as enabledBlockchains, demoMode, baseUrl (which kycDAO env to use). All of the config specific options may be viewed in our Core-SDK documentation, by clicking here.

If true, a backdrop will be displayed behind the Widget. If false, no backdrop will be displayed. Relevant only if modal is true.

A callback function that will be called if the modal is closed. The one argument to the function is the 'reason' string, i.e. 'cancelled'

A callback function that will be called if the final mint step is successful. The one argument to the function is the URL to the tracker website for the mint transaction.

# KycDaoWidget

The KycDaoWidget is rendered inline, as a React component.

The KycDaoWidget requires you to import all of it's styles locally.

import "@kycdao/kycdao-web-sdk/app.css"
import "@kycdao/kycdao-web-sdk/client.css"

As the KycDaoWidget is generally 'pre-configured' it accepts only a small subset of the options listed above. They are:

config
onSuccess
onFail