1
0
mirror of synced 2025-12-23 21:03:15 -05:00

Update embedded docs (#65566)

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alexandre Girard
2025-08-26 20:33:30 -04:00
committed by GitHub
parent 8eaf93a338
commit fee1e7a48d
3 changed files with 41 additions and 34 deletions

View File

@@ -23,4 +23,4 @@ For each user who wants to connect their data:
This approach separates one-time organizational setup from per-user operations, making your integration more scalable.
The complete API reference can be found at https://api.airbyte.ai/api/v1/redoc
The complete API reference can be found at api.airbyte.ai/api/v1/docs.

View File

@@ -2,49 +2,56 @@
products: embedded
---
# Get Started with Widget
# 2-Minute Quickstart
## Airbyte Credentials
To use Airbyte Embedded, you must have an active Airbyte Cloud with Embedded enabled. (Please [connect with us](https://calendly.com/teo-airbyte/15min-docs) if you would like to sign up for a trial of Airbyte Embedded). Once you have your Airbyte instance enabled, log onto cloud.airbyte.com/embedded, and complete the onboarding flow, including your destination configuration. Then navigate to **Settings > Embedded** and note down the following values.
- `Organization Id`: Unique identifier to your Airbyte instance.
- `Client Id`: Unique app id. Required for API access.
- `Client Secret`: Secret key used to obtain a refresh token for API access.
If the client Id and Client Secret are blank, you will need to create a new Application via **Settings > Applications.**
In addition to the Embedded keys above, you will require an external user id. This is a unique identifier you create and assign when initiating the Embedded Widget. You must create one unique identifier for each of your users using a UUID generator or internal customer identifier. The sample onboarding app uses the email provided for the external user id. In production, you may need to change this to use a common UUID library such as [this](https://www.npmjs.com/package/uuid).
## Configure .env
Clone the [sample app via Github](https://github.com/airbytehq/embedded-sampleweb-reactjs), and navigate to embedded-sampleweb-reactjs/server.
## Setup (all apps)
### Clone and install dependencies for all apps
```bash
git clone <repository-url>
cd embedded-sampleweb-reactjs/server
git clone https://github.com/airbytehq/embedded-demoapp.git
cd embedded-demoapp
npm install
```
Then, copy the .env.local.example to .env:
```bash
cp .env.example .env
cd apps/server
cp .env.example .env
# Edit .env with your credentials
```
### Run all apps
```bash
# From root directory - starts all apps simultaneously
npm run dev
→ Server & Vanilla JS: http://localhost:3000
→ Next.js: http://localhost:3001
→ React: http://localhost:3002
```
Set the `SONAR_ALLOWED_ORIGIN` to be the url where your onboarding app will be deployed. Or use http://localhost:5173 for the default React host/port when running locally
### Run individual apps
```bash
# Airbyte Embedded Configuration
## For security reasons, we require that the widget can only we attached to a specific origin.
## If you're developing locally, it will look like: http://localhost:5173
## Once you're in production, it will look like: https://app.abc.com
SONAR_ALLOWED_ORIGIN=your_deployed_webapp_url
# Run only the server
npm run dev --filter=@airbyte-demoapp/server
# Run only React app
npm run dev --filter=@airbyte-demoapp/reactjs
# Run only Next.js app
npm run dev --filter=@airbyte-demoapp/nextjs
```
Paste in your the Organization Id, Client Id, Client Secret to the following keys:
### Get your credentials
Contact Airbyte: Reach out to michel@airbyte.io or teo@airbyte.io for Embedded access.
Get your keys: You'll receive your organization ID, client ID, and client secret.
Update config: Add these to your `.env` file:
```bash
## These 3 pieces of information are available in your initial workspace: Settings > Embedded
# server/.env
SONAR_AIRBYTE_WEBAPP_PASSWORD=your_demo_password
SONAR_AIRBYTE_ALLOWED_ORIGIN=http://localhost:3000
SONAR_AIRBYTE_ORGANIZATION_ID=your_organization_id
SONAR_AIRBYTE_CLIENT_ID=your_client_id
SONAR_AIRBYTE_CLIENT_SECRET=your_client_secret