This repository contains content and frontend that form the Optimizely SaaS CMS Demo Site.
If you're looking to build a new site from scratch, please use the Create Next App Template to create an empty frontend using the same structure and tooling as this demo site.
Make sure you're good to go, by:
- Requesting an Optimizely CMS instance using Sign-up for the program
- Ensure you have a GitHub account
- Ensuring you have (at least) a hobby plan account at Vercel, or are comfortable creating one
After signing up for the beta instance and provisioning of the instance, you'll get an e-mail with the keys and instructions to activate your account.
Follow these instructions to configure the CMS
After you've completed the CMS configuration instructions and collected the needed information, click the "Deploy to vercel" button below, to deploy this site to your Vercel Account
| Environment variable | Instruction |
|---|---|
| OPTIMIZELY_CMS_URL | The URL where the Optimizely CMS can be reached by the build process; for example: https://example.cms.optimizely.com/ |
| OPTIMIZELY_GRAPH_SECRET | The Content Graph Secret can be made visible on the CMS Dashboard, within the "Render Content" section. |
| OPTIMIZELY_GRAPH_APP_KEY | The Content Graph App key, which is shown on the CMS Dashboard, within the "Render Content" section. |
| OPTIMIZELY_GRAPH_SINGLE_KEY | The Content Graph Single key , which is shown on the CMS Dashboard, within the "Render Content" section. |
When the deployment has succeeded, the following steps are needed to enable "On Page Editing" or "In Context Editing".
Enable on-page / in context editing
Please refer to the Supported environment variables document for all supported configuration options for the frontend. The steps above only outine the mimimum required configuration to obtain a working demo site. Many of the included features require additional configuration to be enabled.
Please note: every configuration change to the environment variables requires a new deployment to become active.
For Content Recommendations to work, the following steps are needed:
- Configure Content Recommendations using the environment variables of the
Next.JS Optimizely One package - Add the Content Recommendations widget using either the block (Page) or element (Experience), you will need to configure:
- The API Key of the delivery, which is shown as value of 'data-api-key=' in the example code within Content Recommendations
- The number of recommendations to show