# Use with React

Follow the steps below to integrate the Widget in any generic React application.

# Integration steps

Step 1 Add the Widget package to your project with:

yarn add @kycdao/widget


npm install @kycdao/widget

Step 2 Import the Widget Iframe client.

import {KycDaoIframeClient} from "@kycdao/widget"

Step 3 Create an Iframe client instance and open it conditionally.

const iframeClient = new KycDaoIframeClient({
    parent: '#modalroot',
    iframeOptions: {
        url: "https://sdk.kycdao.xyz/iframe.html",
        messageTargetOrigin: window.origin,
    config: {
        demoMode: true,
        enabledBlockchainNetworks: ["PolygonMumbai"],
        enabledVerificationTypes: ["KYC"],
        evmProvider: "ethereum",
        baseUrl: "https://staging.kycdao.xyz",

function Iframe() {
    return (
            <button onClick={() => iframeClient.open()}>
                Open modal

            <div id="modalroot" />

Step 2 Import the Widget and its styles.

import {KycDaoWidget} from "@kycdao/widget"

Step 3 Create a Widget widget instance and render it.

function Component() {
    const [widgetOpen, setWidgetOpen] = useState(false)

    return (
            <button onClick={() => setWidgetOpen(true)}>
                Open modal

            {widgetOpen && (
                    onSuccess={(tx_url) => console.log(tx_url)}
                    onFail={(err) => console.error(err)}
                        baseUrl: "https://staging.kycdao.xyz",
                        enabledVerificationTypes: ["KYC"],
                        enabledBlockchainNetworks: ["PolygonMumbai"],
                        evmProvider: 'ethereum',

# Configuration options

For details on the SDK configuration, see: Configuration options

# Full examples

If you're looking for full examples, check out the Integration examples page.