Skip to main content

Connectors

A connector links a service you already use, like Stripe, Supabase or GitHub, to WebTwizz. You connect an account once and it's saved to your connectors. From then on, any of your projects can use it, and a project only gets the connectors you pick for it.

When a project uses a connector, three things happen:

  • The service's keys go into the project's environment variables, so your site's code can use them.
  • The builder shows the service's own data for that project: revenue, errors, visitors, commits.
  • The AI can read the service while it works, and set it up for you.

Where connectors live​

Your connectors, in the dashboard​

Click Connectors in the dashboard sidebar, under Library. This page holds every account you've connected, across all your projects.

The Connectors page banner: Connect once. Use it in every project.
  • Connected lists the services you have an account for and the projects using each one. Manage opens the connector's page.
  • Add a connector lists everything else, each with Connect.
  • Search, or narrow the list with Connected, All or a category on the left.
  • Need a service that isn't here? Click Request a connector.
Connected accounts with the projects using them, and the connectors not added yet

You can also find a connector by name from Search (⌘K / Ctrl+K) in the dashboard.

A connector's page lists your Accounts for it and the Projects using each one, with that project's settings in place. Open jumps into the project, and Remove takes the connector out of that project.

The GitHub connector page with one account and the two projects using it

What a project uses, in Settings​

In the builder, open Settings and choose Connectors.

  • In this project lists what the project uses. Click one to open it.
  • Add to this project lists everything else. A service you already connected for another project shows Saved: and the account, and its button reads Use saved account (or Use saved key), so adding it takes one click.
  • All your connectors opens the dashboard page.
Settings, Connectors in a project: five connectors in this project and seven more to add

Connect a service​

Some services connect by signing in. Others take a key you paste.

HowConnectors
Sign inStripe, GitHub, Sentry, PostHog, Google Analytics, Google Sheets, Supabase, Resend
Paste a keyOpenAI, Anthropic, Loops, Intercom (an App ID)

Resend and Google Analytics offer both: Paste an API key for Resend, Paste a measurement ID for Google Analytics.

From a project:

  1. Open Settings > Connectors and click the service.
  2. Click Connect.
    • Sign-in services open the service in a new window. Approve access there and you come back to the connector.
    • Key services turn the Connect row into a form: where to find the key, a field for it, and Connect. Where the service allows it, WebTwizz checks the key first and shows Invalid API key if it's rejected.
  3. If there's something to pick, like a GitHub repository or a Sentry project, the connector opens on Finish connecting with the picker. Pick one and you're done.
OpenAI in a project, not connected yet, with This project only and Connect

From the dashboard, click Connect on a service, or open its page and click Connect. The account is saved without being added to any project. Add it to a project later from that project's Settings > Connectors.

The OpenAI connector page with its API key form open

Supabase and Google Sheets are data sources, so their Connect opens the Data panel. A project has one data source at a time. See Data & CMS.

Keep an account to one project​

This project only connects an account that only this project can use. Your other projects won't offer it. It's marked This project only in the project and One project only on the dashboard. Handy for a client's Stripe account or a key you don't want reused.

Inside a connector​

Click a connector under In this project. From top to bottom:

  • Overview: the service's data for this project, like revenue for Stripe, errors for Sentry or the latest commits for GitHub. Everything listed opens on the service, and tables and tabs open in the Data panel.
  • Account: the account this project uses, when it was connected, and Also used in with your other projects that use it. Manage opens the account in your dashboard connectors. Key-based accounts also have Replace key.
  • Settings: what this project picks, like the repository, the Sentry project or the AI model. Changes save as you make them. The On row (for example On Stripe) opens what this project uses on the service.
  • Remove from this project: click Remove, then Remove from project? to confirm. Its keys come out of this project. Your other projects keep the account.

Each connector's page in these docs shows its overview and settings.

Switch or remove an account​

  • Switch accounts in a project: when you have more than one account for a service, the Account row has a button with the other account's name, like Use Morgan Studio. Its menu lists your other accounts and Connect another account. The project switches over and its keys are replaced.
  • Rename an account: on the dashboard connector page, click the account's name, type, and press Enter.
  • Replace a key: click Replace key on the account and paste the new one. Every project using that key switches to it.
  • Remove an account everywhere: on the dashboard connector page, click Remove on the account, then Remove plus its name. It's disconnected from every project using it, and anything those sites do with it stops until you connect an account again.

Removing never deletes anything on the service. Your Stripe customers, GitHub repository and Sentry events stay where they are.

If a service stops accepting the saved sign-in, the account shows Needs reconnecting with a Reconnect button. If it needs a permission the account didn't give, the overview says the service needs one more permission, with Connect again.

Where the keys go​

Every connector except GitHub adds its keys to Settings > Environment Variables, under From connected services. The service keeps them up to date, so they stay out of the editor. Your preview uses them right away. Publish again so your live site gets them too. See Environment variables.

Each connector's page lists the variables it adds.

Connectors in the chat​

The AI knows which connectors the project uses and works with them for you.

Connect cards​

When you ask for something that needs a service, like a contact form that emails you, the AI adds a connect card for it, like Connect Resend. Click it to connect without leaving the chat. If you already have an account for that service, the card offers it by name, plus Connect another Resend account.

A Resend connect card offering a saved account and Connect another Resend account

For a service that isn't a connector, the AI adds the keys it needs to Environment Variables without values, so you can paste them in under Needs a value.

Live cards​

Ask how something is doing and the AI can answer with a service's live card: one row per service with the main number, Settings and Open, and details that expand. The numbers come straight from the service, so the AI never retypes or guesses them.

Live Stripe and Google Analytics cards in the chat

The AI reading a service​

The AI reads your connected services when it helps: the errors in Sentry before it fixes one, last month's visitors from Google Analytics, whether your Resend domain is verified. Each read shows as a row in the chat. While it works, the service's logo pulses.

A Google Analytics row reading visitors, still working

When it's done, the row says what it found. Click it to see the details.

It asks before changing things​

Reads happen on their own. A change to your account on the service asks first, with Accept and Reject: marking a Sentry error resolved, or changing Supabase sign-in settings. Test emails from Resend and Loops only go to your own inbox, so they don't ask.

The AI reads three Sentry errors, fixes the top one, then asks before marking it resolved

In Chat mode the AI can read connectors but can't change anything.

GitHub and Stripe have tools of their own: the AI works with your repository through git, and with your Stripe account through its Stripe tool. Your site's data goes through the Data panel's tools. Each connector page says what the AI can do with it.

All connectors​

ConnectorWhat it's forHow you connect
SupabaseDatabase, auth and storageSign in, from the Data panel
Google SheetsA spreadsheet as your site's dataSign in with Google, from the Data panel
StripePayments and subscriptionsSign in
Google AnalyticsTraffic for your published sitesSign in with Google, or paste a measurement ID
PostHogProduct analytics and replaysSign in
SentryError monitoringSign in
ResendTransactional emailSign in, or paste an API key
LoopsMarketing and lifecycle emailPaste an API key
IntercomLive chat and help deskPaste an App ID
OpenAIGPT modelsPaste an API key
AnthropicClaude modelsPaste an API key
GitHubYour code in your own repositorySign in