Ninetailed
Search…
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.
1
import React from 'react';
2
import { Personalize } from '@ninetailed/experience.js-react';
3
4
type HeadlineProps = {
5
text: string;
6
}
7
8
const Headline: React.FC<HeadlineProps> = ({ text }) => {
9
return <h1>{text}</h1>
10
};
11
12
export const Page = () => {
13
// These variants normally come from your CMS
14
// You can use our CMS integrations for this
15
const variants = [
16
{
17
id: "variant-id"
18
text: "We build super nice websites for enterprise companies!",
19
audience: {
20
id: "enterprise-audience-id" // variants have a audience id
21
}
22
}
23
]
24
25
return (<Personalize
26
component={Headline}
27
variants={variants}
28
text="We build websites for everbody" // this is the baseline for user which are not in a audience.
29
/>);
30
};
31
Copied!

Inline Personalization

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