Build personalized websites and apps with Uniform visual workspace and Twilio Segment

On this page

High-speed personalization is crucial to attract and retain customers in the highly competitive e-commerce and marketing landscape. However, achieving this requires a deep understanding of each customer's preferences and identity. Unfortunately, many brands lack the necessary tools to capture this critical information and put it into action.

Fortunately, by utilizing Segment's CDP in combination with any CMS or Commerce platform and Uniform's visual workspace, you can deliver outstanding customer experiences across your website and other channels.

Uniform acts as a visual workspace, combining various capabilities, including generative AI, A/B testing, personalization, design systems, content management, commerce, and search in a visual interface that empowers marketers to take action.

This guide will show you how to use these tools in conjunction with each other, so you can say goodbye to one-size-fits-all content and welcome in a new strategy of custom-fit content for each visitor. You and your customers will undoubtedly love the outcome.

Step 1: Build audiences in Segment

Enable JavaScript source: First, set up the JavaScript Source in Segment to ensure web traffic can be ingested from Uniform into Segment. (This data will help us apply personalization to website or app visitors.)

Set up customer profiles in Segment: You can configure customer profiles based on the identifiers you choose (e.g., user ID, email, device ID, etc.). Segment will gather this data across various sources like your website, email, cloud apps, and more to create a 360-degree customer profile. (Here’s step-by-step instructions about how to set up a customer profile.)

Build audiences in Segment: You can use identifiers, customer traits, specific events, or advanced AI computations (e.g., predictions) to create highly specific audiences in Segment. For example, you can create an audience for “Big Spenders,” which would be calculated based on the sum of users’ purchases.

 We’ll be using these audiences inside the Uniform visual workspace.

Step 2: Connect audiences in Uniform

To access Uniform, please log in. You can sign up today if you do not have an account yet.

To use the Uniform personalization engine, you must provide signals and intents. Signals can be any criteria, such as cookies, query strings, or geolocation data. You can also use data from the visitor profiles or audiences we set up in Segment, in Step 1. 

To define visitor profile data in Uniform, you need to create quirks, which represent the traits of your customers. For this recipe, we want the quirk and its public ID to match the audiences or customer profiles created in Segment. This way, Uniform can reference how we’re defining our target audience, and under what circumstances custom content should be activated. 

Let’s keep with the example of “Big Spenders.” Since we’ve already created this audience in Segment, in Uniform we can set a check for true for a current visitor.

If an end-user qualifies as a Big Spender, based on the identifiers we selected in Segment, they’ll be shown the appropriate personalized content, which we will create and apply in Step 3.

Step 3: Visually create personalized experiences with content from any CMS, Commerce, Search, or DAM System.

After the required configuration for personalization (i.e. signals) is in place, you can activate personalization on any component in Uniform via our visual interface.  To do this: 

1. Click “Personalize This” on any component.

2. Specify the personalization criteria (the “Big Spender” signal in our case)

3. Create targeted content that would appeal to the "Big Spender" audience.

This personalized  content can be sourced from any CMS, Commerce, or DAM, such as:

CMS

• Sitecore

• Contentful

• Contentstack

• Adobe Experience Manager

• Agility CMS

• Kontent.ai

• Hygraph

• Strapi

• Sanity

Commerce

• commercetools

• Commerce Layer

• Shopify

• Akeneo

• Big Commerce

• Elastic Path

• SAP Commerce Cloud

• Salesforce Commerce Cloud

• Sitecore Order Cloud

Digital Asset Management

• Cloudinary

• Scaleflex

• Bynder

• Adobe DAM

• Aprimo

Step 4: Connect your modern front-end application to Uniform and Segment

In this step, your front-end website or application will be able to communicate with Twilio Segment and Uniform to send data to Twilio Segment and apply personalization accordingly.

If you need help with the coding, you can find documented code samples in a Github open-source project. You can check out the dedicated section for those using Nextjs Segment Starter with App Router. For users of any other front-end application, please refer to the Getting Started section.

• Nextjs Segment Starter with App Router

• Any other front-end application: Getting Started section.

Step 5: See high-speed personalization in action

Learn how to run edge personalization with Uniform Context and Twilio Segment’s Profile API. This will work on any CDN with a JavaScript runtime, integrated into modern React or Vue.js-based front-end frameworks. 

In this video guide, we use Next.js and Vercel Edge Middleware to personalize static sites on the CDN level, with Uniform Canvas for page composition, and content from any modern headless CMS.

Wrapping up

Uniform is designed to facilitate integration with many services and tools. This makes it easy for your organization to integrate them seamlessly while folding into your existing workflow and activating your valuable customer data.

As we showed in this recipe, this will allow marketers, product teams, and more to use your business’s real-time data to personalize customer experiences, from targeted offers to 1:1 messaging.

Here's a quick summary:

• Build quirks and signals in Uniform

• Visually build personalized experiences with any CMS, Commerce, DAM, or Search system

• Connect Uniform and Twilio Segment

• Deploy high-speed personalization

In addition to sending Segment Profile data into Uniform, you can send Uniform data into Segment, to see what content users are consuming in real-time. Reach out to us to learn more!

Resources

• Docs: Twilio Segment | Uniform platform docs

• Article: Edge personalization with Segment, Next.js and Vercel (uniform.dev)