Customize Capsule

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
    logoDark={YOUR_LOGO_URL}    // an optional link to your logo, to be shown in the modal when in dark theme
    theme='light' // or 'dark'
    oAuthMethods=['GOOGLE', 'TWITTER', 'DISCORD']    // more coming soon
    twoFactorAuthEnabled={false}
/>

Available modal & button configuration props

PropertyTypeRequiredDefaultDescription

capsule

Capsule

yes

undefined

set your Capsule instance

isOpen (modal only)

boolean

yes

undefined

control whether modal is open or closed

onClose (modal only)

() => void

yes

undefined

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

appName

string

yes

undefined

set the app name to be displayed in the modal

logoUrl

string

no

undefined

set url used for the logo in the modal header

theme

light dark

no

dark

set the theme of the modal

oAuthMethods

Array

no

[]

add social login options

twoFactorAuthEnabled

boolean

no

false

enable/disable the 2FA step in the modal

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',
    portalPrimaryButtonColor: 'red',
    portalTextColor: 'black',
    portalPrimaryButtonTextColor: '#FFFFFF',
    
    // 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;
portalPrimaryButtonColor?: string;
portalTextColor?: string;
portalPrimaryButtonTextColor?: string;

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

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