Personalizing Components

This guide describes the steps you need to follow to personalize components in React.

Personalize Component

To make personalizing your components as seamless as possible Ninetailed provides a <Personalize /> component that wraps the component you'd like to personalize. It automatically detects the properties needed from the wrapped component and also applies a variants property.
import React from 'react';
import { Personalize } from '@ninetailed/experience.js-react';
type HeadlineProps = {
text: string;
const Headline: React.FC<HeadlineProps> = ({ text }) => {
return <h1>{text}</h1>
export const Page = () => {
// These variants normally come from your CMS
// You can use our CMS integrations for this
const variants = [
id: "variant-id"
text: "We build super nice websites for enterprise companies!",
audience: {
id: "enterprise-audience-id" // variants have a audience id
return (<Personalize
text="We build websites for everbody" // this is the baseline for user which are not in a audience.

Inline Personalization

Using the <MergeTag /> makes it very easy to use inline personalization.
import React, { useState, useEffect } from 'react';
import { MergeTag } from '@ninetailed/experience.js-react';
const Greeting = () => {
return <h2>Hey <MergeTag id="traits_firstname" />👋, how is your day?</h2>