Headless mode: enable multi-channel content in CMS

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 is managed, and where rules, integration and page connections are controlled. The presentation layer is displayed on any device with an internet connection (such as a smart watch, 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 of the CMS platform itself.

For more information , see Headless CMS in the Optimization glossary.

Enable headless-only mode

Multi-channel (headless) content is disabled (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

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