Table of Contents
Introduction
Laws about how to conduct business online are always changing. It’s become increasingly difficult for businesses to navigate the landscape of what their websites should adhere to without assistance from third parties; this is where Termageddon comes in.
Modern websites are far from simple though. Many developers are now expanding their offerings to build sites in more advanced frontend technologies such as ReactJS or GatsbyJS. While integrating Termageddon to a normal website is easy enough, what happens when we want to do the same for a WebApp or statically generated website?
In this article, we are going to discuss how to integrate Termageddon on either a ReactJS application or GatsbyJS statically generated website.
GatsbyJS/ReactJS
GatsbyJS and ReactJS are super popular frontend development frameworks that are taking the world by storm. Different from traditional frontend development, these two frameworks focus on Javascript based web applications.
Since its inception, developers have been flocking to React for web application development and rightly so as it is built and maintained by Facebook and a robust community of open-source developers. GatsbyJS is the rising star in the field. They are committed to creating the best Static Site Generator for web developers, and it’s my opinion that they are hitting their mark.
While Gatsby and React are both Javascript libraries, there is a large difference between Gatsby and React with regard to how they do things. React builds what are referred to as Single Page Applications (or SPAs for short.) These are applications that render inside of a single HTML page within a targeted div.
Gatsby on the other hand builds statically generated HTML, CSS, and JS assets to load as standalone pages. The results are blazingly fast javascript based pages that can feel like a webpage, but contain all of the advanced logic and functionality of a full-featured application.
Both are awesome and there are also many other technologies out there that do similar things but this isn’t an opinion piece. Since our goal is to implement Termageddon in a GatsbyJS or ReactJS application, let’s get to it!
For the purposes of this article, we will assume that you have a basic understanding of HTTP requests, Javascript, React Hooks, and already have a React or Gatsby app setup. If you don’t, please review these things first as they will help you understand this implementation guide better.
Breaking Down the Mechanism
When I discovered Termageddon, I noticed that they had a script to include on your website, but no official documentation on how to integrate with a webapp. Being that our company uses GatsbyJS for our website, we had to come up with our own integration (which actually proved to be pretty simple in practice).
At first glance, the Termageddon script is pretty easy to integrate for HTML/PHP pages. Simply copy and paste the embed code directly into the page where you would like to render Termageddon. This embed is comprised of two parts
- First – A div element with the id=”policy”, this assists in targeting, and also a data-policy-key that is tied to your unique policy key.
- Second – A script include (more on this in a minute)
Before we can integrate any of this in our React/Gatsby app, we need to understand how the mechanism works. To that end, the div is pretty self explanatory, what we need to decompose is the script.
In essence, the script stores the reference to the target div, extra options, and policy key in variables for easy access. After this, it performs a GET request to the “https://app.termageddon.com/api/policy/” URL and appends the policy key and the extra options.
A fully formed request url would look something like this:
“https://app.termageddon.com/api/policy/VWtsWWNsUk9jVlp6WlN0RFRtYzlQUT09?no-title=true”
After the request is made, all of the data is appended to the target div by setting it’s innerHTML property.
A Simple Solution
Since we see that Termageddon uses a very simple HTTP request to a specific URL, we can easily bake this functionality into our app. The methodology is similar for both types of applications, React and Gatsby. Our steps will be something like this:
- Set a reference to the target div so that we can programmatically set it’s innerHTML.
- On Component/Page mount, we will perform a fetch to grab all data and then copy that data into the div.
For this example, we will be using a simple react application with one component. We will be placing everything in the App component which will render in the main app div. For the purposes of your own app, you may be better served to create a Terms or a PrivacyPolicy component and render on link click.
Follow along on our CodeSandbox: https://codesandbox.io/s/termageddon-react-n9ybr?file=/src/App.js
React Hooks have made it super easy to get access to component lifecycle methods in a functional component by simply importing a hook from the library and using it. This also limits the amount of bloat our component has when compared to class components.
Our first goal is to import the needed hook in our component. This is accomplished by the following line of code:
| import React,{useEffect,createRef} from “react”; |
The hook we are using is called useEffect. It gives us access to the mount/update of the component lifecycle (for more in depth coverage, read the support article: https://reactjs.org/docs/hooks-effect.html).
Once this is done, somewhere near the top of our component, we want to declare our ref.
| const terms = createRef(); |
In React, a ref gives us access to a node on the virtual DOM. This is what we will use for targeting in place of an ID on our div.
Inside of our component function, we will call a useEffect() and inside of it, we will perform a fetch() to GET the data from Termageddon. Below is our fetch, you will need to substitute the URL for your own.
| fetch(“https://app.termageddon.com/api/policy/VWtsWWNsUk9jVlp6WlN0RFRtYzlQUT09?no-title=true”) .then(res => res.text()) .then(res => terms.current.innerHTML = res); |
If you aren’t familiar with Fetch API it works on promises. The initial fetch() returns a promise, and that later resolves to provide some data. Inside of the initial parenthesis, we pass it the URL for our request as a parameter (must be inside quotation marks.)
The first then() takes effect after the fetch has completed. Inside of the parentheses, we are telling it to get the response and return the text version from it.
The second then() is where the magic happens. In this statement, we take the text response as an input. Then we target the div we created our ref for earlier and set it’s innerHTML equal to the text we received.
For the sake of our example, I kept the return() very simplified. I don’t feel that much is needed here as the heavy lifting is done by Termageddon.
| return( <div ref={terms}></div> ); |
We have a div and we assign our ref as a prop. Inside of the div, we don’t need anything else as the rendering is taken care of when we set the innerHTML in our fetch().
The result for our user is that they will see our document (Privacy Policy, Terms & Conditions, etc.) in our app component.
What about styling?
The documents are excellent from a data perspective, however, many designers are probably clamouring at the idea of very simple styles. The solution of course is to use your preferred method for including styles on your component, and then target the elements on the page as you normally would.
Conclusion
In this article, we explored what it takes to implement Termageddon in a React application or GatsbyJS static website. As you have seen, it’s not terribly complicated but does require a small work around. The results, however, speak for themselves – a self updating set of policies that can be incorporated into modern websites and applications rather effortlessly.
Also, if you need website policies that automatically update as laws change, be sure to check out our Privacy Policy Generator.
