Add Privacy Policy Field/Slice

Developing with Prismic
, ,
1

Hello. I am integrating Prismic into my NextJS project and am trying to make a field or a slice for HTML content that I get from my privacy policy generator.

Basically, I have this HTML code that I can get from my privacy policy generator tool so that I can embed it on my website. I have referenced this post to handle the case:

  1. Created a Page type called "Privacy Policy"

  2. Added a Rich Text field to the Static Zone (screenshot below).

    image
    image955×543 16 KB

  3. I copied the HTML code in the policy_html field.

  4. I can see that the HTML can be retrieved as a string on the NextJS side, but I am not able to render it properly. This is a sample of the HTML code:

<h1 class="privacy-policy-h1">Privacy Policy
<br><span>Last Updated On 26-Dec-2023</span>
<br><span>Effective Date 26-Dec-2023</span>
</h1>

<p class="privacy-policy-p">
...
</p>
...

I cannot use page.data.policy_html as innerHTML for my div element since it is a RichTextField. I gave it a shot and tried the followings and neither worked (since I am getting a string back)

<PrismicRichText field={page.data.policy_html} />

 <PrismicRichText
  field={page.data.policy_html}
  components={{
    preformatted: ({ children }) => <pre>{children}</pre>,
  }}
/>

Any help would be very much appreciated :slight_smile:

2

Hi Akbar,

We don't recommend handling HTML in Prismic. This can introduce usability and stability issues. Nonetheless, I can tell you how to make this work if it is the only option for your use case.

You'll need to use the asText help from @prismicio/client.

import * as prismic from "@prismicio/client"

function MyComponent() {
  return <div dangerouslySetInnerHTML={prismic.asText(page.data.policy_html)} />;
}

asText() will render your rich text field as plain text (HTML code) and dangerouslySetInnerHTML will inject the HTML into your component.

Sam

3

Hi Sam,
Thanks for the response. Your code worked (almost) perfectly. I just needed to modify it a little bit to stop typescript screaming at me:

<div dangerouslySetInnerHTML={{__html: prismic.asText(page.data.policy_html)}} />

On a relevant note, what would be the recommended way (or how would you recommend) to include a Privacy Policy on a website using Prismic since you warned me about using HTML in Prismic?

Thanks again for the help.

4

Hey Akbar,

Normally, we would recommend that a user create a Privacy Policy document using a standard rich text field. Rather than inputting HTML, you could input rich text and template it using <PrismicRichText>. Why are you using HTML in this case?

Sam

5

Hey Sam,
Just because the privacy policy generator tool (termly.io or similar platforms) that I use normally give me the HTML code for it. I thought that is easier to copy and paste into a pre tag, but now that you mentioned using RichText, I suppose that is also possible. I can just copy the formatted text directly from the tool and paste into the Rich Text editor and it preserves the links, tags, etc.

Thanks for the help again :slight_smile:

6

Glad that helped!