Integrate Optimizely Graph with headless Optimizely Forms

4 min

Set up management site

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

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

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

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

Add settings to Startup.cs.

//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

Update the .env file on the React app.

Add settings for Optimizely Graph.

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)

Update App.tsx on the React app.

<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}
/>