Enable headless multi-channel content in CMS

3 min

A multi-channel Optimizely Content Management System (CMS) separates the back-end content management from the front-end presentation layer. This is also known as a decoupled architecture because the functions are separated.

A traditional coupled architecture binds the back-end CMS and the front-end presentation layer together, and content is managed, stored, and delivered in the same system.

The back-end CMS is where server, application, and database information are managed and rules, integration, and page connections are controlled. The presentation layer is displayed on any device with an internet connection (such as a smartwatch, cell phone, tablet, display screen, and so on).

A headless architecture is a content-only data source without a presentation layer. In practice, headless is another form of decoupled architecture, but instead of the CMS pushing artifacts to the front end, the front end pulls content from the CMS.

Optimizely Content Management System (CMS) offers the following multi-channel content solutions: 

a decoupled architecture that serves only headless content

a hybrid architecture that manages coupled content and headless content

Each solution lets you serve multi-channel content to integrate with digital experiences on web applications and smart devices outside the CMS platform.

Enable headless-only mode

Multi-channel (headless) content is turned off by default.

To enable headless-only mode, set HeadlessModeOptions.HeadlessModeEnabled to true. When enabled, the Multi-Channel Content view displays and hides the Navigation view (Pages, Sites, Tasks, Project Items) and the Assets view (Blocks, Media).

You can configure headless-only mode programmatically or using appSettings.json.

Configure headless-only mode programmatically

public void ConfigureServices(IServiceCollection services) {
  services.Configure<HeadlessModeOptions>(o => o.HeadlessModeEnabled = true);
}

Configure headless-only mode using appSettings.json

{
  "Optimizely" : {
    "CmsUI" : {
      "HeadlessMode" : {
         "HeadlessModeEnabled" : true
      }
    }
  }
}