The most varied page in Settings
Apps Integration (/settings/apps-integration) is where ClinyPal connects to the outside world — calendar syncs, payment providers, cloud file storage, and email/CRM tools. If most Settings pages are a single consistent form, this one is the opposite: it's a grid of cards, and each card can behave completely differently depending on what kind of app it represents. A calendar sync, a one-click storage connection, and a credential-entry integration all live on this same page, each with its own connect flow and its own management drawer shape once connected.
That variety is deliberate, not accidental complexity — a payment processor genuinely needs different information than a calendar sync, and forcing every integration through one generic form would either lose functionality or bury each app's real settings in irrelevant fields. This article works through the whole page: the summary strip at the top, why buttons differ card to card, and the four distinct drawer shapes you'll run into once you actually open one.
- What the health hero's stat chips show, and why some simply don't appear
- Why the button on an integration card depends on both its status and its type
- The four drawer shapes: sync-shape, connect-only, and the Apple Calendar and Stripe/PayPal/Brevo/HubSpot special cases
- Why re-entering credentials for PayPal, Brevo, or HubSpot always starts from a blank form
- When footer buttons like Reconnect and Save actually appear
- How connecting a payment provider here is what unlocks deposits on Online Booking
The health hero
At the top of the page, a health hero summarizes the state of every integration at a glance using stat chips — a quick way to answer "is anything broken" without scanning the entire grid of cards below.
Why the button on a card isn't always the same
Each integration is shown as a card, and the single visible action button on it is a function of two things together: the integration's current connection status, and what kind of app it is. Reading the button correctly tells you what clicking it will actually do before you click it.
| Card status / type | Button shown | What clicking it does |
|---|---|---|
| Connected | <strong>Manage</strong> | Opens that integration's management drawer directly. |
| Error | <strong>Reconnect</strong> | Opens the management drawer, typically landing you where you can walk back through reconnecting. |
| Not connected — Apple Calendar, PayPal, Brevo, HubSpot | <strong>Enable</strong> / <strong>Connect</strong> | Opens the management drawer directly, since setup for these apps happens entirely inside the drawer rather than before it. |
| Not connected — Google Drive, OneDrive | <strong>Connect</strong> | Opens a consent modal first, before the connect flow proceeds any further. |
| Not connected — most other apps | <strong>Connect</strong> | Goes straight into an OAuth connect flow with the provider, no intermediate step. |
| Not yet available | <strong>Notify me</strong> (disabled) | Nothing — it's disabled until the integration actually ships. |
The four drawer shapes
Once you open an integration's management drawer — whether by clicking Connect, Manage, Reconnect, or Enable — its internal layout falls into one of four distinct shapes. Knowing which shape you're looking at tells you what to expect before you scroll through it.
| Drawer shape | Apps | Before connecting | Once connected |
|---|---|---|---|
| <strong>Sync-shape</strong> | Calendar and CRM syncs | Standard connect flow, then the drawer appears with a target-selector dropdown for choosing what to sync (e.g. which calendar). | Connection status, the target-selector dropdown, and a <strong>Sync</strong> button to trigger a sync on demand. |
| <strong>Connect-only</strong> | Square, Google Drive, OneDrive | Standard connect flow (Google Drive and OneDrive show a consent modal first, per above). | Connection status only, with disconnect/reconnect actions — there's no target picker or sync trigger for these, the connection itself is the whole feature. |
| <strong>Apple Calendar</strong> (special case) | Apple Calendar | An explainer with an <strong>Enable</strong> button, opened directly from the card rather than any OAuth flow. | The feed URL, a <strong>Copy</strong> button, an "Add to Apple Calendar" link (visible only when you're on an Apple device), and a <strong>Regenerate link</strong> button. |
| <strong>Stripe</strong> (special case) | Stripe | Standard connect flow. | Connection status, plus a note pointing you to the deposit-percentage setting under Online Booking — Stripe's real payoff lives on a different page once it's connected here. |
| <strong>Credential-entry</strong> (special case) | PayPal, Brevo, HubSpot | A form for entering credentials directly — Client ID and Client Secret for PayPal, or an API key/token for Brevo and HubSpot — with a show/hide toggle on the secret field. PayPal's form also includes a "Use sandbox" checkbox for testing before going live. | Connection status, a target/list picker (Brevo and HubSpot only), a <strong>Sync</strong> button, and the same credential form again, always blank, for rotating keys. |
Footer buttons are conditional, not universal
Don't expect every drawer to show the same footer actions — the buttons at the bottom of a drawer only appear when they're actually relevant to that integration's current state.
- <strong>Reconnect</strong> / <strong>Finish setup</strong> — only shown when the integration's status is currently Error.
- <strong>Save</strong> (for the target picker) — only shown once a selectable target actually exists to save; a sync integration with nothing yet to choose from won't show a Save button for that picker.
Payment integrations unlock Online Booking deposits
Connecting a payment provider here isn't only about processing payments in general — it's a specific prerequisite for a feature that lives on an entirely different settings page.