HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Get started

How to create Optimizely Content Management System (CMS) (SaaS) content and access your content externally.

Your CMS (SaaS) instances start empty, letting you build your content architecture and presentation layer from the beginning. You can control configuring and customizing content types, properties, and your website structure.

📘

Note

You can also get started quickly with a demo or sample site. See Complete sample site or Step-by-step guides.

Login

To log in to CMS (SaaS), go to Optimizely's login page, enter your email address and password, and select your CMS SaaS instance from your Home dashboard.

📘

Note

See the Log in section in the Get started with Opti ID documentation for more information.

Plan

Before you create content, administrators need to decide how they plan to use CMS (SaaS).

  1. Create a CMS (SaaS) architecture design – Plan the configuration of your CMS (SaaS) instance to meet your organization's content management needs. Determine the following:
    1. the types of content you manage, such as articles, blog posts, products, and so on
    2. your target audiences
    3. your delivery platforms
    4. how your architecture scales and plan for data security measurements
  2. Review your instances – Decide how to divide up your production and non-production environments. CMS (SaaS) includes three instances out of the box. Use these instances to separate your production and non-production data. You can choose how to use your instances. See Configure environments.
  3. Content model – Consider how you want to construct your content in CMS (SaaS). Because content can be used with any front end, it is important to architect your content in a platform-agnostic way. Identify the content types needed, including their fields and properties. The content type is the foundation for creating one or many experiences, pages, or block instances. The content type and properties must be mapped to the corresponding rendering to display content to visitors.
  4. Select a front-end stack – Choose the technologies and tools for the user interface and client-side functionality. Optimizely has partnered with Vercel and Netlify, which offer services for hosting the front end of your application.
  5. Configure a repository – Select a version control system to track changes to your code.

Build

To create applications, developers and content managers define and create content.

  1. Define content – Developers define the structure of the content based on the content model created during the Plan stage using Content types. For each content type, specify the fields or attributes. Then, define properties for each field and establish relationships between different content types.
  2. Create content – Content managers use the defined content types to create and manage content. They can add content through the Visual Builder or API calls.
    1. (Optional) Import data from CMS – If you have an existing CMS instance, you can easily import your data. See Export and import data.
  3. Configure styles – Design the visual aspects of your experiences. Ensure that you present your content consistently and elegantly across various platforms. Developers can define the styles, and then users can select them. See Display templates (style) and Select styles.
  4. Configure languages – CMS (SaaS) can deliver content in multiple languages, so you must configure the language options and localization settings for your CMS (SaaS) instance. See Languages.

Render

After you create content, you can use Optimizely Graph to render it to your website, application, or another channel. Optimizely Graph uses GraphQL to provide powerful search and filtering capabilities.

  1. Develop front-end components – Create the user interface elements and interactive features for the content's presentation. Determine the components needed for your application, such as navigation bars, buttons, forms, modals, and so on.
  2. Enable full preview – Let Visual Builder automatically update so you can see changes to your app in real-time before they are published. See Enable live preview.
  3. Configure host names – Host names are part of the application configuration. They ensure that the preview of your apps works correctly and that your links resolve accurately in Optimizely Graph. See Configure an application section of the Applications documentation.
  4. Deploy your application.

Integrate (Optional)

Integrate with Optimizely Data Platform and Optimizely Web Experimentation – Connect your CMS (SaaS) front-end application with Optimizely's tools for data analytics and A/B testing. See the Next.JS Optimizely One toolkit GitHub repository for react components (both client and server) to integrate Optimizely Web Experimentation and Optimizely Data Platform.