Update embedded docs (#65566)
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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.
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user