Integrate Optimizely Graph with headless Optimizely Forms

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.

   C#

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