Earlier this week I had a conversation with one of our customers that wanted to add a cookie consent message to their community site.
After researching this further I decided to put together a simple Telligent Community 9.0 widget that shows how to do this. The code is on GitHub and still requires some more improvements, but it does work:
Get the EU Cookie Consent Widget on Telligent's GitHub
What is EU Cookie Consent and why do I need it?
There are many other resources that do a great job explaining this. If you need more information here are two that I referenced when researching EU's Cookie Consent law:
The short answer is: this is an European Union (EU) Directive that was adopted by all EU countries in May 2011. The Directive gave individuals rights to refuse the use of cookies that reduce their online privacy. Websites that make use of cookies need to communicate both their user of cookies and policies.
This is where the EU Cookie Consent banner comes in. You've probably seen them on lots of sites. For example:
The EU Cookie Consent Widget
The EU Cookie Consent widget sample is based off another existing cookie consent library. The widget itself is very simple and consists of 4 files:
- cookie-policy-consent.js - the main JavaScript library that handles the rendering logic
- cookie-policy-consent.css - the main CSS file that styles the rendered UX
- cookie-policy-consent-locales.js - stores localized version of the text rendered in the consent
- cookie-policy-consent-bubble.css - an alternative UI that does a bubble pop-up to render the consent message
To invoke the widget we render out the CSS and JavaScript and pass in the language of the accessing user:
<link rel="stylesheet" href="$core_v2_widget.GetFileUrl('cookie-policy-consent.css')" type="text/css" media="screen" />
<script src="$core_v2_widget.GetFileUrl('cookie-policy-consent.js')?auto_init=1&lang=$core_v2_user.Accessing.Language"></script>
This widget can then be added to the footer of your Telligent Community site and renders as shown below in the footer of the site.
I made a few changes to the original code. A lot of style updates, but also had to change some of the logic for handling how Telligent passes in the language value:
The original code looked for a language to be passed in simply as 'EN' for english and it would then load the appropriate language from the cookie-policy-consent-locales.js file. I made a slight change to accommodate passing in the fully qualified language string format, e.g. en-US to strip out the -US:
var L = p.match(/lang=(.*)$-/);
Future improvement to this widget
There are quite a few improvement that can be made:
- Move optional settings to widget configuration
- Change how localization is handled to use localized strings in the widget vs. JavaScript
- Add additional style options to the widget configuration
- Add rendering locations to the widget configuration
And probably many more!
Summary
This is by no means a great example of how to write a widget for Telligent Community, but was meant to quickly show how you could easily add this type of functionality to your Telligent Community site. However, it does demonstrate the flexibility of Telligent's platform to easily accommodate new functionality through the widget framework.
Any contributions in the form of pull requests to this GitHub project will be gladly accepted!
