---
title: Integrate Optimizely Graph with headless Optimizely Forms
slug: cms-12/docs/integrate-optimizely-graph-with-headless-optimizely-forms
docTags: 
createdAt: 2026-08-10T15:56:00.000Z
---

## Set up management site

1. Install` Optimizely.ContentGraph.Cms` and `Optimizely.Cms.Forms.ContentGraph` using the NuGet Package Manager in Visual Studio or with the command line:

```powershell
dotnet add package Optimizely.ContentGraph.Cms
dotnet add package Optimizely.Cms.Forms.ContentGraph
```

2. Add CG key to `appsettings.json` (at the same level as `Episerver`).

```json
"Optimizely": {
    "ContentGraph": {
      "GatewayAddress": "<<Gateway Address>>",
      "AppKey": "<<App Key>>",
      "Secret": "<<Secret>>",
      "SingleKey": "<<Single Key>>",
      "AllowSendingLog": true,
      "ContentVersionSyncMode": "DraftAndPublishedOnly",
      "Include": {
        "ContentIds": [],
        "ContentTypes": []
      },
      "SyncReferencingContents": true
    }
}
```

3. Add settings to `Startup.cs`.

```csharp
//Register ContentGraph for HeadlessForm
services.AddContentDeliveryApi(op => {
  op.DisableScopeValidation = true;
  op.RequiredRole = null;
});
services.ConfigureContentApiOptions(o => {
  o.FlattenPropertyModel = true;
  o.IncludeNumericContentIdentifier = true;
});
services.AddContentGraph();

services.AddOptimizelyFormsContentGraph();
```

## Set up React app

1. Update the .env file on the React app.
2. Add settings for Optimizely Graph.

```typescript
REACT_APP_ENDPOINT_GET_FORM_BY_PAGE_URL=http://localhost:8000/api/React/GetFormInPageByUrl?url=
REACT_APP_HEADLESS_FORM_BASE_URL=http://localhost:8000/
REACT_APP_AUTH_BASEURL=http://localhost:8000/api/episerver/connect/token
REACT_APP_CONTENT_GRAPH_GATEWAY_URL=https://rc-3-5-1.cg.optimizely.com/content/v2?auth=INPUT_SINGLE_KEY_HERE

// add the following line with format
REACT_APP_CONTENT_GRAPH_GATEWAY_URL={GatewayAddress }/content/v2?auth={SingleKey } 
// (GatewayAddress and SingleKey are from Appsettings.json)
```

3. Update `App.tsx` on the React app.

```typescript
<Form
     key={c.reference.key}
     formKey={c.reference.key}
     language={language ?? "en"}
     baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
     identityInfo={identityInfo} 
     history={history}
     currentPageUrl={pageData.pageUrl}
     optiGraphUrl={process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL}
/>
```