Growth is driven through constant experimentation and iteration. Marketers need to be able to quickly create and launch pages, but these experiences can’t be “one size fits all”. Large-scale digital businesses often cater to multiple audiences and segments so, to be effective, these experiences need to be tailored accordingly to capture intent.
Personalization is the solution, but it often requires extensive data that may reside in different, siloed systems. Fortunately, Conscia exists to access and streamline such data, and provides a single API to power personalized content. Together, Conscia and Builder.io give marketing teams control over the visual presentation layer, while enabling them to create personalized experiences based on data, such as real-time intent and interaction history, regardless of where that data resides.
Personalization meets drag-and-drop editing
Conscia offers an API-first personalization engine that empowers marketers with an intuitive interface to control who sees what, when, and where on every channel. The personalization engine acts as the central brain for the overall composable DX stack by intelligently orchestrating experiences from various headless CMSs and commerce backends, without having to lift and shift content from its source.
In a typical headless architecture, the personalization logic is usually hardcoded in the front-end code, which makes it impossible for business users to control or share across various touchpoints. Conscia’s DX Engine decouples the business logic from the front-end rendering code, and puts this logic in the hands of the marketing team where it belongs.
Marketers get full access to the personalized content through Builder’s drag-and-drop visual editor and, since Builder can connect to any API-first backend, the integration with Conscia’s DX Engine is easy.
Building a Personalized Experience with Builder and Conscia
In this walkthrough, we’ll use the example of a landing page that contains multiple content zones, including a hero banner, blog articles, and featured products.
Builder connects to Conscia’s DX Engine in order to dynamically generate a page that responds with a different experience based on the context passed to it. For simplicity, we’ll focus on which blog articles Builder will render on our example landing page to personalize it for our audience.
Integration
The DX Engine offers a business-user interface, known as the ‘Experience Studio’, to manage and control who sees what content, when, and where. The front-end applications, in this case Builder, can simply call the Experience API to retrieve the instructions in the form of a JSON payload on what to display to the customer.
Each page within Builder is mapped to a template in Conscia’s Experience Studio. Each template contains a series of components, with each component mapped to a different content/data source such as CMS, CDP, database or commerce platform.
When Builder makes a call to Conscia’s DX engine, it simply needs to pass (1) the template code and (2) real-time context of the user. Conscia, in response, will return a unified payload containing the content orchestrated from the various sources connected to the components requested.
Component-Level Personalization
Conscia breaks down the experience into components that can be individually personalized or contextualized based on the customer's real-time context. Instead of having to create a variant for each page for every combination of contexts, you can define logic at the component level, which will significantly reduce the duplication of effort performed by the marketing team.
Experience Rules
To deliver the personalized experience for the blog articles on our landing page, we’ve set up a series of Experience Rules in Conscia’s Experience Studio.
Each rule has a trigger condition and a target experience. In this case, the trigger condition is the ‘audience segment’ context of the customer and the target experience is a blog ‘tag’. When the trigger condition is met, Conscia’s DX Engine will connect with the content source and fetch the appropriate content using the blog tag.
For this blog article component, the source of the content is coming from Contentful, specifically a content type called “Articles” within our “Articles (Blog, Support)” Contentful space. Note that each component within the Conscia Experience Studio can be associated to a different content space / content type within Contentful providing you the freedom to access a myriad of content.
In the case of the blog articles, all content records in Contentful that have a tag matching the one defined in the rule will be returned as part of the content payload to Builder.
Binding to the Experience Payload
When Builder connects with Conscia’s DX Engine, the contents of the page is returned to Builder in the form of a JSON payload.
This payload is broken down into components with one component for each of the different page content rail elements. Builder will bind to these components in order to source the content and render it to the front-end.
In order to make use of the content coming from the DX Engine, we’ll set up a box block for the product that contains an image and title underneath.
- Drag a Box block onto the +Add Block section.
- Drag an Image block into the box
- Drag a Text block just below the image
Conscia’s DX Engine will be returning multiple articles that match the tag defined in the Experience Rule. To render these articles, we’ll instruct the product box to repeat for each article.
- In the Data tab, navigate to the ‘Element data binding’ section
- In the “repeat for each” field, use the dropdown to select the blog articles Component from the list of binded elements.
Now that the product box will repeat for each article in the experience payload, we can bind the image and article title field as well.
- In the Layers tab, select the Image widget
- In the Data tab, navigate to the ‘Element data binding’ section and select “image” from the “Get” dropdown
- For the “from” field, select the field that contains the URL to the image
- Repeat the same process for the article title
When you click away, you'll see that the blog article image and title now populates in the main canvas for each of the articles in the experience payload. From here, you can publish the page and preview the experience using different context that matches the rules in the Conscia Experience Studio.
Intelligent Recommendations
The Customer interacts with your brand through your website, a mobile app, emails, social media and perhaps even the metaverse in the near future. Conscia captures the signals and activity on every touchpoint where the DX Engine is operating and also provides a Track API for other channels where personalization has not yet been implemented.
Conscia allows Marketers to suggest content based on machine learning models as well as advanced analytics to generate personalized content recommendations.
Recommendations may include:
- Personalized Navigation/Search Results based on your real-time intent or context
- Personalized Navigation options based on your browsing history
- Recommendations based on your browsing/order history
- Search results relevance based on browsing/order history
- Similar/Alternative products/content to what you're currently viewing
- Customers who viewed/liked this product also viewed/liked
- Featured/Trending Products/Content of the day/week/month
- Top/Trending Categories/Brands/Products/Offers by customer segment, Geography, Market etc
Next Steps
This article provided a walkthrough of how to leverage Builder’s Visual Development Platform in conjunction with Conscia’s DX Engine to deliver a personalized experience that Marketers have full control over. Check out the Builder + Conscia demo video for a more in-depth walkthrough of the end-to-end integration.
Sana Remekie is the CEO and co-founder of Conscia, a Digital Experience Graph that orchestrates and personalizes content from both legacy and modern sources in a truly headless fashion. She has spent most of her career architecting, developing and selling digital solutions to large enterprise clients with a deep focus on data-driven experiences.
