Ninetailed
Search…
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.
1
import React from 'react';
2
import {
3
renderRichText,
4
RenderRichTextData,
5
ContentfulRichTextGatsbyReference,
6
} from 'gatsby-source-contentful/rich-text';
7
import { createRenderNinetailedMergetag } from '@ninetailed/experience-sdk-gatsby-contentful';
8
9
const textOptions = (profile: Profile) => ({
10
renderNode: {
11
// ... your own richtext render options
12
...createRenderNinetailedMergetag(profile),
13
},
14
});
15
16
type HeadlineProps = {
17
text: RenderRichTextData<ContentfulRichTextGatsbyReference>;
18
};
19
20
const Headline: React.FC<HeadlineProps> = ({ text }) => {
21
const [loading, profile, error] = useProfile();
22
23
return <h1>{renderRichText(text, textOptions(profile))}</h1>
24
}
Copied!
Copy link