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.

Client ID

Your Pyas App Client ID

Token Name

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

Google Calendar

Microsoft Outlook

Zoom

Main Label (Default Slot) Content

Modal Title

Modal Description

Form Title

Form Description

User Name

User Email

Theme

Primary Color

Primary Hover Color

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>

Want more? See the full PyasConnect component documentation and installation guide on NPM.