Published:

Updated:

Using Termageddon with React and Next.js

How To's

Termageddon policies are most commonly used with content management systems and no-code page builders like Wordpress, Squarespace, and Wix. But did you know that you can use Termageddon with statically generated websites built on React? This is made possible by leveraging the straightforward API that Termageddon provides along with React hooks and XML Http Request (XHR) objects to retrieve the policy.

This post will walk you through how to add a Termageddon policy to a Next.js website using Typescript in just two steps. To complete this tutorial, you’ll need to have your Termageddon policy key handy. If you are not sure where to find this, you can locate it by viewing the embed code of your policy through the Termageddon dashboard. The policy key is the string of letters and numbers after the “data-policy-key” attribute, as shown below:

This tutorial assumes you have a working knowledge of React and how to create a Next.js website using Typescript. Let’s dive in!

Learning Moment: Why can’t I use Termageddon’s embed code?
Termageddon’s default embed code uses Javascript’s Window.load() event to fire off the API call that loads your policy. In the case of React websites, this only happens the first time someone visits your site. Unless they go directly to your policy page the first time they visit, the Window.load() event will not fire and the policy will not be loaded (it will require a refresh to load). This is because React only updates the individual components of a page that change instead of doing a full reload.

Step 1 – Create a Policy Component

The first step is to create a React component that will connect to Termageddon’s API and pull down the policy content for a given policy key. Create a new file called policy.tsx in the “components” folder of your Next.js project and add the following code to it:

import React, { useEffect } from 'react';

type Props = {
  policyKey?: string;
};

const termageddonAPIPath = 'https://app.termageddon.com/api/policy/';

const Policy = ({ policyKey }: Props) => {
  useEffect(() => {
    const policy = document.getElementById('policy');
    if (policy === null || policyKey === undefined) {
      console.log('Error! Could not find policy element or policy key.');
    } else {
      const pol_key = policyKey;
      const pol_extra = policy.dataset.extra ? '?' + policy.dataset.extra : '';
      const xhr = new XMLHttpRequest();
      xhr.onload = () => {
        console.log('Policy loaded!');
        policy.innerHTML = xhr.responseText;
      };

      xhr.onerror = function () {
        console.log('Error! Could not load policy.');
        policy.innerHTML = 'There has been an error loading this policy!';
      };

      xhr.open('GET', termageddonAPIPath + pol_key + pol_extra);
      xhr.send();
    }
  });

  return (
    <div
      id='policy'
      data-extra='h-align=left&h-depth=3&table-style=accordion'
    />
  );
};

export default Policy;

This code creates a component that takes a policy key as an input (or “props” in React terms). It then sends an HTTP request to the Termageddon API using that policy key and returns the response, which should be the actual content of the policy. The policy content then gets inserted within the component’s div tag which is how it gets rendered on the page.

The special ingredient in this code snippet is the useEffect() hook that React provides. It allows you to perform side effects in function components. By using this hook, you tell React that your component needs to do something after it renders. This essentially replaces the Window.load() functionality in Termaggedon’s original API call.

Now we need to create a page to utilize this component. We will do this in Step 2.

Learning Moment: Why create a policy component?
This will come into play when you have multiple policies. Storing the API code in a component makes it reusable so you aren’t duplicating code across your project. The policy component can be used for any Termageddon policy on your site. You simply give it the corresponding policy key and it will return that policy’s content. This is the beauty of React and reusable components!

Step 2 – Create a Policy Page

Once you have the policy component created, it is time to create a page that will render the policy content and pass in the policy key via React props. Create a new file called policy.tsx in the “pages” folder of your Next.js project and add the following code to it (inserting your specific policy key where noted):

import Policy from '../components/policy';

export default function PolicyPage() {
  return <Policy policyKey='insert your policy key here' />;
}

In a nutshell, this code imports the policy component you created in Step 1 and passes in the policy key via props. The policy component then knows what to do based on the code you wrote in Step 1. It spits out the policy content and displays it on the screen!

For any additional policies on your site, just create another page like in Step 2 and give it a different policy key. At Webjeb Studios, we have three policies: a Privacy Policy, Terms and Conditions, and a Disclaimer. Each one is its own page with its own policy key, but they all use the same policy component. This way, if we ever need to make changes to the API call or handling functions, we only need to do it in one place. Easy peasy!

Extra Credit

The steps above are all you need to get up and running with Termageddon on Next.js. But if you’re looking to go the extra mile, this section is for you. Having to create individual pages for each policy is a little bit repetitive. The code is identical except for the policy key. You could take advantage of dynamic routes in Next.js to create a single template page that would generate multiple policy pages on the fly. This is beyond the scope of this tutorial, but if you’re feeling adventurous, go ahead and give it a whirl!

Photo of author
About the Author
James Bryan

Founder of Webjeb Studios. We’re a full service web design and development agency based in Edmond, Oklahoma. We specialize in fast, performant websites using modern web tools. Visit us at webjebstudios.com to learn more.

Search the Site
Popular Articles
Browse by Category

Comparing Policy Generators

Cookie Consent Banner

Cookie Policy

Culture

Disclaimer

EULA

How To's

Privacy Policy

Terms of Service

Subscribe for Updates
  • This field is for validation purposes and should be left unchanged.