# Embed on your site
You can embed a FlowGenie form inside your own application and handle the UI yourself. The steps are straightforward:
1. **Build the form** using the visual form builder inside FlowGenie.
2. **Fetch the configuration** with a GET request to `https://app.flowgenie.pro/api/headless/forms/{slug}`
3. **Render the form** in your app by looping through this configuration. Use the `type` of each question to decide which input to render. Use the question `key` as the field name when collecting values.
4. **Submit responses** back to `https://app.flowgenie.pro/api/headless/forms/{slug}/submit` with a POST request.
The response contains a JSON object similar to the structure used in the form builder. It has an array of `pages` (for now only one page), each containing `sections`, which in turn contain an array of rows of `questions`.
## API Endpoints
- **GET** `https://app.flowgenie.pro/api/headless/forms/{slug}` - Fetch form configuration
- **POST** `https://app.flowgenie.pro/api/headless/forms/{slug}/submit` - Submit form data
Both endpoints require an `Authorization: Bearer YOUR_API_KEY` header if the form is not public.
## Example
### SDK
If you want to avoid wiring up raw fetch calls, you can use the FlowGenie SDK to `fetchForm` and `submitForm` directly.
```
import { createClient } from '@flowgenie/sdk'
const client = createClient({
apiKey: process.env.FLOWGENIE_API_KEY,
baseUrl: 'https://app.flowgenie.pro'
})
const form = await client.fetchForm({ id: 'form-id' })
await client.submitForm({
id: 'form-id',
data: {
name: 'Ada Lovelace',
email: 'ada@example.com'
}
})
```
Public forms can be fetched and submitted with a `slug` instead of an `id`.
### JavaScript
```
FlowGenie Form
```