Sitecore Personalize: Exploring the ‘on-site-WYSIWYG’ Idea & Its Potential

Sitecore Personalize isn't just a tool, it's your creative partner in crafting personalized web experiences. With its intuitive WYSIWYG interface, the power of experimentation is literally at your fingertips, but why stop there? Picture a world where the WYSIWYG isn't confined to the Sitecore Personalize admin interface but becomes a seamless part of your website. This on-site-WYSIWYG revolutionizes how you create and interact with personalization directly on your site. In this article, we dive into this concept, unlocking its possibilities and navigating its challenges.

Introduction

The goal of the ‘on-site-WYSIWYG’ is to make creating and managing web experiences with Sitecore Personalize even easier. Why delve into the complexities of the Sitecore Personalize admin interface and grapple with its learning curve, when you can simply head to your website and intuitively click your way to creating new personalization? First, let’s explore what is provided out of the box. Then, we'll explore how an on-site-WYSIWYG can provide additional benefits and any challenges that may arise.

Out-of-the-box WYSIWYG

Sitecore Personalize offers an impressive WYSIWYG tool for web personalization, enabling you to see and modify web experiences or experiments as they would appear live on your site. While the current WYSIWYG is nearly perfect, there's always room for innovation. Two key areas stand out for potential enhancements. The first is to improve visibility, helping users easily identify which experiences and experiments are relevant to a page. The second focuses on streamlining the process, allowing for the rapid creation of new personalization.

Improve Visibility

Currently, this is how Sitecore Personalize displays web experience and experiments:

custom

This view can be powerful on its own, and you can leverage a naming convention or tags to help identify where each experience is used. Unfortunately, this just adds another step for authors before they can begin personalizing. Nonetheless, wouldn’t it be great if you could just go to your site and see each experience or experiment being used? We’ll explore that later in this article.

Streamline Creating New Personalization

Crafting a new experience or experiment using a pre-existing web template is remarkably straightforward! However, the process gets a bit more intricate when you need to employ an existing component on your website as the foundation for your personalized experience or experiment. In this scenario, it's probable that a developer will be needed to extract the markup, CSS, and necessary JavaScript to add a new component to the page or to replace an existing one. Although this process isn't overly complex, imagine if we could accomplish all of this simply by clicking an element on your current site. Let's explore this concept and discover its potential.

On-Site-WYSIWYG

What does an on-site-WYSIWYG even mean? In this case, it means being able to view or edit web experiences and experiments without ever leaving your website. Let's explore how an on-site-WYSIWYG editor may look like leveraging Sitecore Personalize as the backend.

Note: Keep in mind that everything you see from this point is purely a thought experiment with some light proof-of-concept demos sprinkled throughout.

Integrating with Sitecore Personalize

While we want to bring a WYSIWYG directly onto our site, we still need to be able to relay any changes to Sitecore Personalize. We’ll be doing this with their REST APIs. If you would like to learn more about the APIs provided by Sitecore Personalize, check out their documentation.

Now that we’re integrated with Sitecore Personalize as our backend platform, let's see how the web marketer's experience changes.

Creating New Personalization

Rather than accessing the Sitecore Personalize admin interface, the on-site WYSIWYG feature would enable us to directly launch the site and begin crafting personalization. Web marketers can simply click on the element they wish to personalize and instantly receive prompts to create variants for that specific element. Additionally, we have the option to utilize AI to further enhance our personalization efforts! Let's look at some examples of how this may look:

custom

Observe how we can easily click on an element, navigate up the node tree, and simply select “Make Experiment” to start personalizing a component.

If we already have established personas, we can use AI to tailor the content specifically for us. Let's experiment with auto-personalizing this component for a discount-focused persona.

custom

We can even add additional context – perhaps we want the personalization in Spanish?

custom

Finally, on submission, we would automatically create the personalization within Sitecore Personalize.

Existing Personalization

I envision transforming an out-of-context list into a dynamic, visual, and interactive display. Imagine loading a web page and instantly spotting which elements have personalization applied to them, possibly indicated by an icon or a call-to-action. Then, when a web marketer engages with that element, all the details of the personalization will seamlessly become visible.

custom

Here we can see a demo page with an icon that is dynamically added to show the web marketer that this component has some personalization applied.

Conclusion

In conclusion, the ‘on-site-WYSIWYG’ concept for Sitecore Personalize represents a significant leap forward in the realm of web personalization and user experience. By integrating WYSIWYG capabilities directly into the website interface, we streamline the process of creating and managing personalized web experiences. The potential of this approach is vast, from improving efficiency to offering more intuitive and interactive ways to craft personalized content. While still a concept paired with some proof-of-concept demonstrations, the on-site-WYSIWYG idea demonstrates a promising future for Sitecore Personalize, where ease of use and powerful functionality converge to redefine the standards of web personalization.