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:
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:
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 sample is based off another existing cookie consent library. The widget itself is very simple and consists of 4 files:
- 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
<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=(.*)$-/);
There are quite a few improvement that can be made:
- Move optional settings to widget configuration
- Add additional style options to the widget configuration
- Add rendering locations to the widget configuration
And probably many more!
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!