Get started with CMS (SaaS)

👍

Beta

Optimizely CMS (SaaS) is in beta. Apply on Join the waitlist for CMS (SaaS) or contact your Customer Success Manager.

What is CMS (SaaS)

Optimizely CMS (SaaS) is the fully managed flavor of the Optimizely Content Management System (CMS) that is up to date, with first-class technology-agnostics APIs providing unbounded digital creativity and unencumbered processes for customers aiming to build headless solutions. If you need the ability to extend or customize the CMS itself or if you prefer rendering content using ASP.NET MVC, CMS (PaaS) might be a better choice see Optimizely Content Management System (CMS) developer guide.

Architecture

The CMS (SaaS) architecture consists of five major components.

• CMS Platform – Drives the solution at its base. This is the same popular platform that drives CMS (PaaS). See Optimizely Content Management System (CMS) developer guide.
• CMS UI – Provides the user experience for Content Editors and Administrators; it is the same interface used by thousands of editors today. See Optimizely Content Management System (CMS) user guide.
• Optimizely Identity – Handles authentication and user management for the UI. See Opti ID user guide.
• Optimizely Graph – Delivers content to any frontend with high performance and precision using the GraphQL standard. See Optimizely Graph developer guide.
• REST API – Manages resources in the CMS programmatically. See Introduction to the CMS REST API.

These components run on the same Optimizely Digital Experience Platform (DXP) that is used and trusted by thousands of Optimizely customers.

As a customer, you can run and host your front end on any platform, using any technology you are comfortable with.

Create an instance

The rest of this topic describes creating an Optimizely CMS (SaaS) instance and accessing content externally.

Define content

1. Before creating your first content item, go to Settings > Content Types to define the content schema.
2. Select Create New > Page Type.
   
3. In the Create New Page view, add examplePage to the Name field, Example page to the Display Name field, and click Create.
   
4. Configure a property on your content type by adding a text property called Heading. The heading will have Text Type String (\<= 255) and be placed under the Content property group.
   

See content types.

Define content using the API

You can also create the same content type programmatically using the API.

POST https://example.com/_cms/v1/contenttypes
Content-Type: application/json

{
    "key": "examplePage",
    "baseType": "page",
    "displayName": "Example page",
    "properties": {
        "heading": {
            "type": "string",
            "displayName": "Heading",
            "group": "information"
        }        
    }
}

Create and publish a content item

To create a content instance of the page type that you just created:

1. Open the Edit tab.
2. Open the content tree in the Navigation panel. Use the pin icon to keep it open.
3. On the Root node, select More > New Page.
   
4. Enter the name of your page.
   
5. Open the All Properties view and edit the Heading property. (You can click the pin icon to keep it open.)
   
6. Select Publish? > Publish Changes.
   

Create a page using the API

You can also create a page using the API. The following will create an example page with the same values created through the UI above and publish it immediately.

POST https://example.com/_cms/v1/content
Content-Type: application/json

{
    "key": "1466b673c02d432ea5d23b62f56afb55",
    "contentType": "examplePage",
    "locale": "en",
    "container": "3fa7d9e7877b11d3827c00a024cacfcb",
    "status": "published",
    "displayName": "Hello world!",
    "property": {
        "heading": "Hello, everyone!"
    }
}

Define a website and host

This section describes how to define a website.

🚧

Beta

This step is currently required to ensure that indexing works. But this requirement is expected to be removed during the Beta phase.

1. Go to Settings > Manage Websites.
2. Click Create Website and add a name and the URL that you will use for your front end. Select the page you just created as your start page.
   
3. Click Add Host and copy the hostname of your instance into the Host Name field. The value should not include the scheme ('https://') or the path. Set Type to Edit and Scheme to HTTPS.
   
4. Click Create Website to save.

Run the Optimizely Graph synchronization job

🚧

Beta

This step is currently required to ensure that indexing works. But this requirement is expected to be removed during the Beta phase.

Before you can access the content externally, sync the content needs to Optimizely Graph.

Go to Settings > Scheduled Jobs and start the Optimizely Graph content synchronization job.

Retrieve content using Optimizely Graph

Go to Optimizely Graph in the top navigation to retrieve your page using a GraphQL query.

Add the following query in the GraphiQL interface:

{
  examplePage
	{
    items
    {
      Name,
      Status,
      Heading
    }
  }
}

This displays a result similar to the one below on the right-hand side:

{
  "data": {
    "examplePage": {
      "items": [
        {
          "Name": "Hello World!",
          "Status": "Published",
          "Heading": "Hello, everyone!"
        }
      ]
    }
  },
  "extensions": {
    "correlationId": "814a782fbff65d32",
    "cost": 23,
    "costSummary": [
      "examplePage(23) = limit(20) + fields(3)"
    ]
  }
}

See Get started with Optimizely Graph.

Create a complete site

After you see the basic components in play, you can build your front end based on Optimizely CMS.

For a demonstration that uses Vercel to host the website, go to Github episerver/cms-saas-vercel-demo and follow the instructions there.