Pyas Connect is a Stencil web-component that lets developers who use Pyas for their calendar integrations embed a multi-step OAuth setup wizard for Google, Microsoft 365 (Outlook), and Zoom in minutes.

• Framework-agnostic: ships as a standards-based custom element plus thin wrappers for Vue 3, React 18+, and Angular 19+
• Configurable UI: light/dark themes, custom copy, optional badge/disclaimer
• Rich events: accountConnected and connectError

Need a Pyas account? Create one free at https://www.app.pyas.io/auth/register. Learn more at https://pyas.io and see full API docs at https://docs.pyas.io.

Light Mode

Step 1:

Step 2:

Dark Mode

Step 1:

Step 2:

Follow these quick steps once. Screenshots are in the online docs.

1. Sign up / Log in – https://www.app.pyas.io/auth/register

2. Create an App – Go to Apps → Create App (guide: https://docs.pyas.io/fundamentals/getting-set-up/creating-an-app). This generates a sandbox project on Pyas. Lean more about Pyas Apps here https://docs.pyas.io/fundamentals/pyas-apps.

3. Set up Authentication – Pyas Auth is enabled by default for quick testing, but you can switch to Provider/Native Auth later (guide: https://docs.pyas.io/fundamentals/getting-set-up/setup-authentication).

4. Copy your Client ID – Go to Apps → [app] → Settings → General Details → Developer Info (right panel).

5. Create / copy a Token Name – Go to Apps → [app] → Settings → API Keys. Either copy the name of an existing, unexpired key or click Generate New API Key first (guide: https://docs.pyas.io/rest-api-reference/api-authentication#generate-api-keys). Make sure to copy just the name of the api key and not the actual api key value.

6. Add Allowed Origins – Still in Settings → General Details, list every domain you’ll embed Pyas Connect on (e.g. https://your-app.com). Localhost entries (http://localhost:3000) are fine for testing but should be removed in production. You can also supply the list during initial app creation.

   6.1 Note: API Calls coming from origins not in your Allowed Origins list will result in an "Access denied. Origin not allowed" message.

You now have:

Client ID → pyas_9ecf2ab8-… Token Name → Dev Key 

Both values are required props for <pyas-connect>.

Try Pyas Connect instantly in your browser: Live Demo

Install one of the framework wrappers below; each automatically brings in the core @pyas/connect package.

# Vue 3 – includes the core package automatically npm install @pyas/connect-vue # React 18+ – includes the core package automatically (npm ≥ 7 auto‑installs peer deps) npm install @pyas/connect-react # Angular 19+ – includes the core package automatically npm install @pyas/connect-angular # Vanilla JS / no framework npm install @pyas/connect

<scripttype="module" src="https://cdn.jsdelivr.net/npm/@pyas/connect@latest/dist/esm/pyas-connect.js">

The component auto-registers as <pyas-connect> once the script is loaded.

<pyas-connectclient-id="YOUR_CLIENT_ID" token-name="YOUR_TOKEN_NAME" user-name="John" user-email="Doe" ></pyas-connect><script>document.querySelector('pyas-connect').addEventListener('accountConnected',(e)=>{// e.detail →{provider, accountId, email, name, status, scopes }console.log('OAuth linked!',e.detail);});</script>

<pyas-connect> itself renders as an accessible <button> element. To customize the label or add an icon, supply inline markup in the default slot. Do not nest another <button> or you’ll create an invalid button‑in‑button tree.

<pyas-connectclient-id="YOUR_CLIENT_ID" token-name="YOUR_TOKEN_NAME" ><spanclass="flex items-center gap-2"><imgsrc="icon.svg" alt="" class="w-5 h-5" /> Link Calendars </span></pyas-connect>

PyasConnect relies on sensible browser defaults for margins, paddings, font-weights, and box-model behavior. If your app uses a blanket reset like:

*,*::before,*::after{margin:0; padding:0; font-weight: normal}

it may inadvertently break PyasConnect’s spacing, headings, icons, and transitions. To keep everything working smoothly, please follow one of these approaches:

1. Use a Targeted Reset

Instead of resetting every element, only reset the ones you need. For example:

@layer base{html,body{box-sizing: border-box; margin:0; font-weight: normal} }

2. Remove Blanket Wildcard Resets

Please remove any global *{…} reset from your stylesheet. If you need to zero-out your page, scope it to only the document root:

html,body{margin:0; padding:0}

The component exposes CSS variables on :host and auto‑switches to dark via OS or theme="dark".

Note: The main button text uses the --pc-text-invert variable.

pyas-connect{--pc-bg-button-primary:#10b981; --pc-bg-button-primary-hover:#059669}

<pyas-connecttheme="dark" />

pyas-connect[theme='dark']{--pc-bg-surface:#1e1e1e}

pyas-connect{--pc-bg-button-primary:theme(colors.indigo.600)}

pyas-connect{--pc-bg-button-primary: transparent; --pc-bg-button-primary-hover: transparent; --pc-text-invert: inherit; border: none}

The core component lazy-loads its logic; when server-side rendering you may want to dynamically import the script only on the client to avoid hydration warnings.

Detailed setup for each framework lives below.

npm install @pyas/connect-vue # core (@pyas/connect) auto‑installed

Use the wrapper directly inside any component file. No need to modify main.ts or register a global plugin.

<script setup>import{PyasConnect } from'@pyas/connect-vue'consthandleConnected= (event) =>{console.log('Account connected:', event)}consthandleConnectError= (error) =>{console.error('Connect error:', error)}</script> <template> <PyasConnectclient-id="YOUR_CLIENT_ID"token-name="YOUR_TOKEN_NAME":user-email="email":user-name="name"theme="dark":show-disclaimer="true"@account-connected="handleConnected"@connect-error="handleConnectError" > <span>Connect an Account</span> </PyasConnect> </template>

npm install @pyas/connect-react # core (@pyas/connect) auto-installed

import{PyasConnect}from'@pyas/connect-react';functionApp(){consthandleSuccess=(e)=>console.log(e.detail);consthandleError=(e)=>console.log(e)return(<PyasConnectuserName="Jane Doe"userEmail="[email protected]"clientId="some-client-id"tokenName="MY_TOKEN_NAME"onAccountConnected={handleSuccess}onConnectError={handleError}><span> Connect an Account </span></PyasConnect>);}

npm install @pyas/connect-angular # core (@pyas/connect) auto-installed

Import the Component

// app.component.ts ... import{Component}from'@angular/core';import{CommonModule}from'@angular/common';import{PyasConnect}from'@pyas/connect-angular';// <-- PyasConnect angular component @Component({selector: 'app-root',standalone: true,imports: [CommonModule,PyasConnect],templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})exportclassAppComponent{title='angular-example';//handle accountConnected eventonAccountConnected(acc: any){console.log('Connected:',acc)}//handle connectError eventonConnectError(err: any){console.error('Error:',err)}}

Use in your HTMl template

<pyas-connectclientId="YOUR_CLIENT_ID" tokenName="YOUR TOKEN NAME" userName="Jon Snow" userEmail="[email protected]" theme="light" productName="Skyline AI" (accountConnected)="onAccountConnected($event)" (connectError)="onConnectError($event)" ></pyas-connect>

Load the component via CDN in your index.html:

<scripttype="module" src="https://cdn.jsdelivr.net/npm/@pyas/connect@latest/dist/esm/pyas-connect.js">

Then use <pyas-connect> or the wrappers as usual.

MIT © BrutForce Technologies