Using Termageddon with React and Next.js

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!

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.

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!