PyasConnect
Interactive Demo

Play with the props below to see how <PyasConnect /> reacts in real time.

For a complete demo, please register or log in to your Pyas account to get a Client ID and Token Name.

Your Pyas App Client ID

The name of the token you want to use for authentication.
Do NOT include your actual API key value here!

Click me!

Note: this is a Vue code snippet. If using this in plain HTML or a different framework, be sure to tweak the style binding accordingly, or move the styles to a CSS file.
Also, be sure to handle the events accountConnected and connectError to capture the connection results accordingly.


		<PyasConnect
    :client-id="YOUR_CLIENT_ID_HERE"
    :token-name="YOUR_TOKEN_NAME_HERE"
    :show-google="true"
    :show-outlook="true"
    :show-zoom="true"
    :modal-title="Connect Your Calendar"
    :modal-description="Select a calendar to connect."
    :form-title="Enter Your Details"
    :form-description="Please fill in the form below to connect your calendar."
    :user-name="John Connor"
    :user-email="john@skynet.com"
    :theme="light"
    :style="{
        '--pc-bg-button-primary': #2563EB;
        '--pc-bg-button-primary-hover': #1D4ED8
    }"
    @account-connected="handleAccountConnected"
    @connect-error="handleConnectError"
    >
    <span>
        Connect a Calendar
    </span>
</PyasConnect>