Contentful Richtext

This guide describes how to use Ninetailed with Contentful Richtext with Gatsby JS.

The Ninetailed Contentful App gives your content creators the option to use inline personalization in richtext fields. This is done by adding embeded entries into the text. To make the personalization working on the developer end the @ninetailed/experience-sdk-gatsby-contentful SDK provides functions which render the personalized entry. 
import React from 'react';
import {
  renderRichText,
  RenderRichTextData,
  ContentfulRichTextGatsbyReference,
} from 'gatsby-source-contentful/rich-text';
import { createRenderNinetailedMergetag } from '@ninetailed/experience-sdk-gatsby-contentful';
​
const textOptions = (profile: Profile) => ({
  renderNode: {
    // ... your own richtext render options
    ...createRenderNinetailedMergetag(profile),
  },
});
​
type HeadlineProps = {
  text: RenderRichTextData<ContentfulRichTextGatsbyReference>;
};
​
const Headline: React.FC<HeadlineProps> = ({ text }) => {
  const [loading, profile, error] = useProfile();
​
  return <h1>{renderRichText(text, textOptions(profile))}</h1>
}

Personalizing Components

Next - Delivery and SDKs

Last modified 1yr ago