HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

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 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.

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.

Architecture Diagram showing major components.

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 a page with the user interface

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 with the API

You can also create a page using the API. The following code creates an example page with the same values created through the UI above and publishes 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 menu to retrieve your page using a GraphQL query.

Add the following query in the GraphiQL interface:

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

The result is similar to the one below, which displays 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.