# All In One

## Enabling The All In One Component

The All In One Component is enabled when you specify a combination of properties in the Quadrata Component.

You can enable the All In One Component in one of the following ways:

* Specify `sharedProps` and either `kybProps` or `kycProps`
* Specify both `kybProps` and `kycProps`

## Example

This example demonstrates how to set up the `Quadrata` component to launch the All In One multi-component.

This context gives the user an intro screen where they can select either Individual User Onboarding or Business Onboarding.

<figure><img src="/files/M0hXaECOTp2tdBRka8Qq" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In this context, if the wallet address is unknown, the Individual User option will be disabled on the intro screen.
{% endhint %}

{% hint style="warning" %}
Not all of the required configuration or props are included in this example

See all available KYC props and configuration at the following page: [QuadClient Package](/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package.md)

See all available KYB props and configuration at the following page: [QuadrataKyb Package](/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package.md)
{% endhint %}

{% hint style="info" %}
It is suggested that you use the built-in [`withWagmiConnect`](/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/with-wagmi-connect.md) props initializer to abstract connecting a wallet and signing transactions, but you are free to implement your own logic.
{% endhint %}

{% hint style="info" %}
You can use the [`createAccessToken`](/integration/how-to-integrate/quadrata-sdk/advanced/api-libraries/api-service-libraries/create-access-token.md) API Service to create the access token you need to pass in to the component.
{% endhint %}

```tsx
import * as QuadrataTypes from '@quadrata/sdk/types';
import { Quadrata } from '@quadrata/sdk/client';

const quadrataSdkConfig: QuadrataTypes.QuadrataSdkConfiguration = {
    environment: QuadrataTypes.QuadrataEnvironment.SANDBOX
};

export default function AllInOneOnboardingComponent(props: { accessToken: string }) {
    const quadrataProps = {
        accessToken: props.accessToken,
        sdkConfig: quadrataSdkConfig,
        clientConfig: {
            _debug: true,
            protocolName: 'Your Company Name'
        },
        sharedProps: {
            onApplicationEnd: (data: Record<string, any>) => {
                console.log('Application ended', data.status, data.error);
            },
        },
        kycProps: {
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/individual-passport-onboarding/4.-quadclient-package#less-than-quadclient-greater-than-props
            account: '0x123',
            attributes: [
                QuadrataTypes.QuadrataAttribute.DID,
                QuadrataTypes.QuadrataAttribute.COUNTRY,
                QuadrataTypes.QuadrataAttribute.AML
            ],
            chainId: QuadrataTypes.QuadrataNetwork.SEPOLIA,
            privacyScopes: [
                QuadrataTypes.QuadrataPrivacyConsent.EMAIL,
                QuadrataTypes.QuadrataPrivacyConsent.DATE_OF_BIRTH,
                QuadrataTypes.QuadrataPrivacyConsent.FIRST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.LAST_NAME,
                QuadrataTypes.QuadrataPrivacyConsent.ADDRESS
            ],
        },
        kybProps: {
            // since clientConfig and sharedProps define everything, nothing is 
            // required here unless you want to override anything or have more 
            // control over the callbacks
            
            // see available props at
            // https://docs.quadrata.com/integration/how-to-integrate/onboard-users/business-passport-onboarding/3.-quadratakyb-package
        }
    };
    return (
        <Quadrata {...quadrataProps}>
            {((helper: QuadrataTypes.Client.Components.Helper) => {
                if (helper.isApplicationComplete) {
                    return <p>Application is Complete</p>;
                }
                if (helper.isPassportInReview) {
                    return <p>Your application is in review.</p>;
                }
                return (
                    <button
                        disabled={!helper.isApplicationReady}
                        onClick={helper.launchApplication}
                    >
                        Launch Application
                    </button>
                );
            })}
        </Quadrata>
    );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quadrata.com/integration/how-to-integrate/quadrata-sdk/advanced/client-libraries/client-examples/all-in-one.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.