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.

import React from 'react';
import { Personalize } from '@ninetailed/client-sdk-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 Contentful App for this
const variants = [
text: "We build super nice websites for enterprise companies!",
audience: "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 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.

import React, { useState, useEffect } from 'react';
import { useProfile } from '@ninetailed/client-sdk-react';
const Greeting = () => {
const [loading, profile, error] = useProfile();
if (loading) {
return <h2>Hey 👋, how is your day?</h2>
return <h2>Hey {profile.traits.firstname}👋, how is your day?</h2>