SaaS CMS and Visual Builder - Opticon 2024 Workshop Experience

Optimizely is getting SaaSy with us….

This year Optimizely’s conference Opticon 2024 took place in San Antonio, Texas. There were a lot of great features and updates announced. They also conducted few technical workshops. One of the workshop sessions that I was excited about is “SaaS CMS and Visual Builder” conducted by David Knipe, Remko Janzen, and Eric Markson.

This post explains overview of Optimizely SaaS and Visual Builder, and deep-dive experience of technical workshop.

What is Optimizely SaaS?

Optimizely Content Management System (SaaS) is a versatile headless content management system (CMS) that lets you manage and distribute content across multiple platforms. By separating content management from the presentation layer, you can deliver rich digital experiences on any device or platform.

SaaS CMS platforms offer a modern, flexible, and cost-effective way for businesses to manage their digital content without the hassle of infrastructure or maintenance. By leveraging the cloud, businesses can ensure that their websites and digital experiences are up to date, secure, and optimized for performance. Whether you're running a small website or a large-scale enterprise, a SaaS CMS can provide the tools needed to efficiently create, manage, and optimize content, while allowing for seamless collaboration and scalability.

CMS (SaaS) has a user-friendly interface that allows you to create content and see a live preview using Optimizely's Visual Builder. It also provides a REST API to set up your instances and Optimizely Graph for easy content retrieval. This makes it easier to manage content and focus on delivering great user experiences.

Key tools:

• Visual Builder: A simple, drag-and-drop tool to create and organize content, with live previews.
• REST API: Allows developers to set up CMS instances, content types, and manage other resources programmatically.
• Optimizely Graph: Helps you easily retrieve content across different platforms for a consistent digital experience.

What is Visual Builder?

The Visual Builder in a SaaS CMS is a simple, drag-and-drop tool that allows users to create and organize content without needing coding skills. It provides an easy-to-use interface where you can add, arrange, and customize content elements, such as text, images, and videos, all while seeing a live preview of the changes as you make them. This helps ensure that the final product looks just as expected before it’s published. It’s ideal for users who want to quickly build and update websites or applications with minimal technical effort.

In the context of Optimizely's Visual Builder (SaaS), fundamental concepts like Experience, Outline, Section, Blueprint, and Style play key roles in how content is structured, managed, and displayed.

Here it shows how these concepts work together:

• Experience: The entire user interface that combines content, design, and functionality.
• Outline: A map or blueprint of the page’s content structure, showing how sections and elements are arranged.
• Section: Logical blocks within the page, grouping related content together (e.g., Header, Footer, Hero Section).
• Elements: The individual pieces of content (e.g., text, images, buttons) that fill out each section.
• Blueprint: A reusable template that defines the page structure and layout, providing a starting point for content creation.
• Style: The visual design rules that define how sections, elements, and the overall experience look.

Workshop

The technical workshop was started with an introduction of SaaS CMS and Visual Builder by David. He presented how Optimizely has reimagined the potential of content management systems with its SaaS based headless CMS. He also explained about Visual Builder, one of the most noteworthy features, which delivers an intuitive drag-and-drop interface coupled with real-time previews.

Remko walked us through on how to get started with Optimizely SaaS using Next.js starter app and deploy it to Vercel. He provided us Optimizely CMS SaaS Core instance along with Optimizely Starter Kit sample code. Then we created an accounts on Vercel and GitHub. We all were setting up our local environment to make sure it matches with latest LTS version of Node.js and stable version of yarn.

First, we logged in to CMS SaaS instance, navigated to Settings, and then imported the sample data. Once the content was uploaded, we created a new API Client and generated the Graph Token from Settings -> API Clients page. We configured Next.js App locally with Optimizely SaaS using Visual Studio Code. We updated .env file with the following environment variables to SaaS instances config values.

• OPTIMIZELY_CMS_URL : The URL where the Optimizely CMS can be reached by the build process;
• OPTIMIZELY_GRAPH_SECRET : The Content Graph Secret can be made visible on the CMS Dashboard, within the “Render Content” section.
• OPTIMIZELY_GRAPH_APP_KEY : The Content Graph App key, which is shown on the CMS Dashboard, within the “Render Content” section.
• OPTIMIZELY_GRAPH_SINGLE_KEY : The Content Graph Single key, which is shown on the CMS Dashboard, within the “Render Content” section.
• OPTIMIZELY_CMS_CLIENT_ID : API Client ID configured in the CMS.
• OPTIMIZELY_CMS_CLIENT_SECRET : API Client Secret configured in the CMS.

We started the development server using yarn command and launched the app in our browser at “https://localhost:3000”

We logged in to our GitHub account. Created Git Repository and configured the environment variables with addition to Vercel app Url. Final step on GitHub account was to deploy the site to Vercel account. Our sample website was up & running, and was rendering data from Optimizaly SaaS.

The next step was to do the initial configuration of the channel in CMS. We created a new channel definition, selected the start page from the included content pack, added host details (Vercel URL as hostname), and configured the languages. We wanted to make sure that uploaded content and configured changes are reflecting in Optimizely Graph. So, we executed a scheduled job titled “Optimizely Graph Content Synchronization Job”. Then, we verified that the visual editor is running & content were reflected correctly by Optimizely Graph. This ensures that content updates made in the SaaS instances are immediately reflected in our local development environment, facilitating a seamless and efficient development process.

With this solid foundation in place, we were fully equipped to harness Optimizely’s powerful features to elevate the functionality and user experience of our application. We realized how Optimizely’s SaaS CMS and Visual Builder could significantly enhance marketing strategies, streamline workflows, and drive engagement to new heights.

Conclusion

We were successfully able to set up an Optimizely SaaS environment, imported sample data, and deployed a Next.js starter app to Vercel.

The Visual Editing feature represents a significant leap forward in content management efficiency, making it an essential tool for SaaS businesses seeking to improve agility in content updates. This innovative workflow enables content creators to interact directly with content blocks, significantly reducing the time required for updates. It offers a clear, intuitive view of how content is used across various digital experiences, enhancing both consistency and accuracy. Ultimately, it transforms the editing process, making it as seamless and enjoyable as the content itself.