> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Content Manifest Configuration

> Custom content manifest for the B2BIdentityProvider component

If your project has Custom Scopes configured, the Consent UI can be customized via the `getIDPConsentManifest` prop. Supply a custom manifest for fine-grained control over the wording used and grouping of the permissions being requested. If no `getIDPConsentManifest` function is defined, the `description` field for each scope will be used instead.

To see all authentication and customization options, see the [UI configuration props](./configuration).

<Panel>
  <CodeGroup>
    ```jsx theme={null}
    import { createStytchB2BClient, StytchB2BIdentityProvider } from '@stytch/vanilla-js/b2b';

    const stytch = createStytchB2BClient('public-token-test-be835f9a-ac37-44cf-817d-f58ac2b3ae3d');

    const isProfileScope = (scope) => scope === 'openid' || scope === 'email' || scope === 'profile';
    const isDataScope = (scope) => !isProfileScope(scope);

    const getScopeDescription = (scope) => {
      switch (scope) {
        case 'openid':
          return 'Your account ID';
        case 'email':
          return 'Your email address';
        case 'profile':
          return 'Your name and profile';
        case 'read:data':
          return 'Read access to your data';
        case 'write:data':
          return 'Write access to your data';
        default:
          return `The ${scope} permission`;
      }
    };

    const getManifest = ({ scopes, clientName }) => [
      {
        header: `${clientName} wants to view your Profile`,
        items: [
          {
            text: 'View information stored in your Profile about your account and your user.',
            details: scopes.filter(isProfileScope).map(getScopeDescription),
          },
        ],
      },
      {
        header: `${clientName} wants to access your Data`,
        items: scopes.filter(isDataScope).map(getScopeDescription),
      },
    ];

    const presentation = {
      theme: { 'font-family': 'Arial' },
    };

    customElements.define('stytch-identity-provider', StytchB2BIdentityProvider);
    // In HTML: <stytch-identity-provider id="stytch-identity-provider" />
    document.getElementById('stytch-identity-provider').render({
      client: stytch,
      presentation,
      getIDPConsentManifest: getManifest,
    });
    ```
  </CodeGroup>
</Panel>
