❗Required Customization

The Capsule modal is the easiest way to get integrated. The modal implements all session management and cookie logic needed for account creation, login, and account management.

The modal also has configuration options to customize for your specific integration.

To apply these changes, simply pass the following configs as properties to the CapsuleModal Component

<CapsuleModal
  capsule={capsule}
  isOpen={isOpen}
  onClose={() => {
    setIsOpen(false);
  }}
  appName={YOUR_APP_NAME}
  logo={YOUR_LOGO_URL} // a link to your logo, to be shown in the modal
  theme={CUSTOM_THEME}
  oAuthMethods={["GOOGLE", "TWITTER", "DISCORD"]}
  twoFactorAuthEnabled={true}
  disableEmailLogin={true}
/>

Available modal & button configuration props

PropertyTypeRequiredDefaultDescription

capsule

Capsule

yes

undefined

set your Capsule instance

isOpen

boolean

yes

undefined

control whether modal is open or closed

onClose

() => void

yes

undefined

function called on modal close (should set isOpen state to false)

appName

string

yes

undefined

set the app name to be used in the modal

logo

string

no

undefined

set url used for the logo in the modal

theme

Theme

no

undefined

set the theme of the modal

oAuthMethods

OAuthMethod[]

no

[]

add social login options Available OAuth Options

twoFactorAuthEnabled

boolean

no

false

enable/disable the 2FA step in the modal

disableEmailLogin

boolean

no

false

enable/disable the email login step in the modal

Custom Theme object

backgroundColor?: string; // Used to derive the background colors of your modal
foregroundColor?: string; // Used to derive the foreground/highlight colors of your modal
borderRadius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'; // The border radius of your modal.
font?: string; // The custom font to use in your modal elements
customPalette?: CustomPalette; // Custom palette used to customize theming of individual components
oAuthLogoVariant?: 'dark' | 'light' | 'default'; // Sets the color variant of the oauth logos. 'default' will show the full color logos, 'dark will show the logos in black and 'light' will show the logos in white.

Custom Palette

text?: {
  primary?: string;
  secondary?: string;
  subtle?: string;
  inverted?: string;
  error?: string;
};
modal?: {
  surface?: {
    main?: string;
    footer?: string;
  };
  border?: string;
};
input?: {
  surface?: {
    disabled?: string;
    default?: string;
  };
  border?: {
    placeholder?: string;
    active?: string;
    error?: string;
  };
};
tileButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
  };
  border?: string;
};
primaryButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
    disabled?: string;
  };
  border?: {
    default?: string;
    disabled?: string;
  };
  outline?: string;
};
secondaryButton?: {
  surface?: {
    default?: string;
    hover?: string;
    pressed?: string;
    disabled?: string;
  };
  border?: {
    default?: string;
    disabled?: string;
  };
  outline?: string;
};
divider?: string;
spinner?: {
  path?: string;
  circle?: string;
};
pill?: {
  text?: string;
  container?: {
    background?: string;
    border?: string;
  };
};
progressIndicator?: {
  active?: string;
  next?: string;
  previous?: string;
};
qr?: {
  fill?: string;
  background?: string;
  border?: string;
};
slideButton?: {
  slider?: {
    background?: string;
    border?: string;
    text?: string;
    container?: {
      start?: {
        background?: string;
        border?: string;
      };
      end?: {
        background?: string;
        border?: string;
      };
    };
  };
  start?: {
    text?: string;
  };
  end?: {
    text?: string;
  };
};
alert?: {
  surface?: {
    error?: string;
  };
  border?: {
    error?: string;
  };
};

Constructor Options

Here's an example of constructorOpts that can be passed in as the third argument to the Capsule() constructor object

// see getting started for imports

const constructorOpts = {
    // passkey configs
    portalBackgroundColor: 'white', // deprecated
    portalPrimaryButtonColor: 'red', // deprecated
    portalTextColor: 'black', // deprecated
    portalPrimaryButtonTextColor: '#FFFFFF', // deprecated
    portalTheme?: {} // See Custom Theme below;
    
    // email configs
    emailTheme: 'light',
    emailPrimaryColor: 'pink',
    githubUrl: 'https://github.com/vbuterin',
    linkedinUrl: 'https://www.linkedin.com/company/wanderlust-creamery-llc';
    xUrl: 'https://twitter.com/eatwanderlust',
    homepageUrl: 'https://wanderlustcreamery.com/',
    supportUrl: 'mailto:help@me.com',    // can also be a webpage URL
}

const capsule = new Capsule(
    Environment.BETA,
    "YOUR_API_KEY",
    constructorOpts
)

Capsule Passkey Prompt

The passkey screen also supports custom images and colors. Custom colors should be passed in as the following opts when instantiating the capsule object.

portalBackgroundColor?: string; // deprecated
portalPrimaryButtonColor?: string; // deprecated
portalTextColor?: string; // deprecated
portalPrimaryButtonTextColor?: string; // deprecated
portalTheme?: Theme;

Images are configured via API key- get in touch to update these!

Custom Theme object

backgroundColor?: string; // Used to derive the background colors of your portal
foregroundColor?: string; // Used to derive the foreground/highlight colors of your portal
borderRadius?: BorderRadius; // The border radius of your portal elements. Options: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'

User-Facing Emails

The following values can be set on emails to brand them - these should be passed in as the following opts when instantiating the capsule object.

  /**
   * Base theme for the emails sent from this Capsule instance.
   * @default - dark
   */
  emailTheme?: EmailTheme;

  /**
   * Hex color to use as the primary color in the emails.
   * @default - #FE452B
   */
  emailPrimaryColor?: string;

  /**
   * Linkedin URL to link to in the emails. Should be a secure URL string starting with https://www.linkedin.com/company/.
   */
  linkedinUrl?: string;

  /**
   * Github URL to link to in the emails. Should be a secure URL string starting with https://github.com/.
   */
  githubUrl?: string;

  /**
   * X (Twitter) URL to link to in the emails. Should be a secure URL string starting with https://twitter.com/.
   */
  xUrl?: string;

  /**
   * Support URL to link to in the emails. This can be a secure https URL or a mailto: string. Will default to using the stored application URL is nothing is provided here.
   */
  supportUrl?: string;

  /**
   * URL for your home landing page. Should be a secure URL string starting with https://.
   */
  homepageUrl?: string;

Last updated