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 which 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-sdk-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 Contentful App for this
15
const variants = [
16
{
17
text: "We build super nice websites for enterprise companies!",
18
audience: "enterprise-audience-id" // variants have a audience id
19
}
20
]
21
22
return (<Personalize
23
component={Headline}
24
variants={variants}
25
text="We build websites for everbody" // this is the baseline for user which are not in a audience.
26
/>);
27
};
28
Copied!

Inline Personalization

Using the visitor's and the useProfile hook makes it very easy to use inline personalization. For advanced cases like contentful Richtext we also provide a SDK - simply have a look at the gatsby section.
1
import React, { useState, useEffect } from 'react';
2
import { useProfile } from '@ninetailed/experience-sdk-react';
3
4
const Greeting = () => {
5
const [loading, profile, error] = useProfile();
6
7
if (loading) {
8
return <h2>Hey 👋, how is your day?</h2>
9
}
10
11
return <h2>Hey {profile.traits.firstname}👋, how is your day?</h2>
12
};
13
Copied!
Last modified 2mo ago