Introduction
Uniqrate is a powerful tool designed for blogs and documentation, allowing readers to engage with your content through voting and comments. The voting widget—referred to as an island—helps you gain insights into what your readers enjoy, while also gathering analytics to enhance your understanding of user preferences.
Hugo, one of the most popular open-source static site generators, is written in Go and optimized for speed, flexibility, and ease of use. In this guide, we’ll walk through how to seamlessly integrate Uniqrate into a Hugo-powered website, giving you a simple way to gather user feedback and improve your content.
In this article, we'll see how you can add Uniqrate to a Hugo powered website.
Getting the Uniqrate script
After signing up for Uniqrate and selecting your plan, navigate to the Settings tab to customize the appearance and text of your voting island. Once you're satisfied with your configuration, go to the Setup drawer to copy the code snippet by clicking on Copy to clipboard.
Awesome! Now, we can move on the next step!
Adding it to Hugo
For my example, I will use the PaperMod template but the logic will be more or less the same of any Hugo templates you use.
If you need help to setup a Hugo website, don't hesitate to check out the documentation.
Override your template's defaults
Your theme will have a folder called layouts/, located in themes/. For example, the PaperMod theme has this structure once added to your website.
To override or extend your theme’s default templates, place your custom content in your own layouts/ folder. Hugo will prioritize these over the theme's default settings when rendering the site.
You have to choose which file you need to override, copy it in your layouts/ folder and add the code you want.
So the plan is:
- Identify the correct file to override.
- Copy it to your layouts/ folder.
- Add the Uniqrate script to the copied file.
- Profit!
Adding our Uniqrate script to Hugo
This is where you'll need to know what files your template is using. Make sure to check the documentation of your template if it exists. In the case of PaperMod, there is a file called extend_head.html, it's located in the layouts/themes/partials/ folder.
The PaperMod developers added in the file a comment to tell us what this file does:
{{- /* Head custom content area start */ -}}
{{- /* Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
{{- /* Can be overwritten by partial with the same name in the global layouts. */ -}}
{{- /* Head custom content area end */ -}}
This is perfect! We want our Uniqrate script to be added to the
section of every page.So, we copy this file and paste it in our layouts/partials/ folder. Notice that we need to keep the subfolders structure, so we need the partials subfolder here.
Finally, in our extend_head.html we just copied, let's add our script:
{{ if eq hugo.Environment "production" }}
<script>(function (r, a, t, e) { r._rmc = r._rmc || {}, r._rmc.settings = { apiKey: "YOUR_API_KEY", apiUrl: "API_URL", loaderVersion: "1", server: t }, r._rmc.queue = r._rmc.queue || [], r.rmc = r.rmc || function () { let args = []; for (e = 0; e < arguments.length; e++)args.push(arguments[e]); r._rmc.queue.push(args) }; var x = a.getElementsByTagName("head")[0], r = a.createElement("script"); r.async = !0, r.src = t + e, x.appendChild(r) })(window, document, "ISLAND_URL", "/widget.js");
</script>
{{ end }}
Obviously, the script you copied from Uniqrate will have your personal values.
The condition {{ if eq hugo.Environment "production" }} ensures that the Uniqrate script is only included when the site is live in a production environment, helping you avoid loading the script during local testing or development. If you want to test the Uniqrate island locally, you can temporarily remove this condition 😉
Congratulations! You’ve successfully integrated Uniqrate into your Hugo-powered website. By adding this user-friendly voting widget, you’re giving your readers an easy way to provide feedback while collecting valuable analytics to enhance your content. Whether you're running a blog or managing documentation, this integration helps you stay connected with your audience.
Have fun ❤️
Top comments (0)