Cookie consent widget

The GDPR only mentions cookies once;

Natural persons may be associated with online identifiers […] such as internet protocol addresses, cookie identifiers or other identifiers […]. This may leave traces which, in particular when combined with unique identifiers and other information received by the servers, may be used to create profiles of the natural persons and identify them.

but the implications of this part of the regulations are significant.

Where cookies can identify an individual via their device, their placement and use constitutes the processing of personal data and therefore care must be taken with their use.

Our platform uses a number of cookies in order to provide the website to users. But these cookies do not identify individuals in a way that constitutes the processing of personal data and consent is therefore not required for their use. You should however cover the topic of these 'platform cookies' in your website's privacy policy. You can read more about platform cookies here.

You may be using third-party services on your website which place cookies on your website visitors' computers where such cookies do identify users in such a way as to require consent before they are placed.

Implied or passive consent is not sufficient - consent must be given through a clear and affirmative action.

Please Note!

We cannot assist you in finding out whether or not third-party services you use (such as visitor tracking, remarketing code or live chat services) use cookies that require prior consent by the user. For this you must contact the third-party service provider.


The cookie consent widget

The consent widget provided within your account is GDPR compliant.

By activating it, third-party Javascript (which sets cookies) will not be activated on a user's computer unless they actively click to accept cookies.

Activating the widget will display a cookie consent tool in the bottom right hand corner of the visitor's browser as shown in the example screenshot below.

On clicking the 'I accept' button, the page will be reloaded and Javascript allowed to run.


Configuring the widget

Select 'your account' from the left menu and then 'GDPR'.

Locate the GDPR Cookie Consent App section, shown on the screenshot below.

By default the cookie widget is not activated on your site so you'll need to configure it by following the instructions below.

We've identified the areas of your account where you can enter Javascript which may set cookies on a visitors computer.

The visitor tracking field described here.
The conversion code field described here.
The live chat field described here.
The Google Analytics ID field described here (this activates Ecommerce Tracking for Google Analytics).
The Facebook Tracking Pixel field described here.
The Disqus commenting feature available for blogs described here.

You'll need to tick the boxes for the fields where you want to obtain consent before the Javascript is run (i.e. the cookies are set).

You can also include a link to your privacy policy within the cookie consent widget, by entering the 'path' for the privacy policy. The path is the last bit of the URL which identifies the actual page that your privacy policy is on, for example most privacy policies (unless you've altered the path yourself) are located at /privacy-policy so you should enter that.

Once you've configured your settings, you might end up with something like the below.

You should then click to save your changes. This will then activate the cookie consent widget on your website.


Other cookies

Other cookies may be being set on a visitor's computer if you have entered Javascript directly onto your website's theme files (instead of using the boxes provided).

In these cases, the cookie consent widget will not cover these cookies without further customisation.

A Twig variable is available to use in these instances, global.cookie_consent.

Clicking the " I accept" button on the widget will set the value of global.cookie_consent to true. Not clicking "I accept" will keep the value as false, which is also the default value for the variable.


Display customisation

The default design of the cookie widget is shown in the screenshot below.

The display is completely customisable however through the use of code placed within your theme files. Guidance on how to customise the display is shown below.

To customise the display of this widget you'll first need to decide what you want to customise.

1. A simple customisation involves changing it's position (either left or right) the text colour, the button colours and text, and the text it contains.
2. An advanced customisation involves changing the layout and design and setting it to appear in other positions (e.g. across the top of the visitor's browser).


Simple customisation

You'll need to edit your website's theme files using the page editor. You'll need to edit files using the advanced mode (so you can create a new theme file).

Locate the views/partials folder and click to create a new file. Name the file cookie_consent_widget.twig, as shown in the example below.

Next, copy the code shown below to the editor.

{% extends 'shopwired/cookie_consent_widget.twig' %}
{% set position = 'right' %}
{% set text_color = 'white' %}
{% set button_text_color = 'black' %}
{% set button_background_color = '#eed547' %}
{% set button_text = 'I accept' %}
{% block text %}
    This website uses cookies to ensure you get the best experience on our website.<br>
    Read our <a href="{{ privacy_policy_link|default('/privacy-policy') }}" style="color: inherit; text-decoration: underline;">Privacy Policy</a>
{% endblock %}

The position value should be set to either left or right

The text_color value sets the colour of the text that displays and can contain a word such as black or white or a hexadecimal colour reference such as #ff0000 (for red). You can look up available hexadecimal colour values here. You'll need to be careful not to choose a colour that makes the text difficult to read against the black background of the widget.

The button_text_color and button_background_color values work in the same way as the text_color value, these set the colour of the "I accept" button.

The button_text value sets the text within the button.

Please ensure that you retain the ' mark either side of the value you are setting.

Finally the text contained within the {% block text %}...{% endblock %} code sets the text that appears within the widget.


Advanced customisation

Using this method you can change the appearance of the cookie widget to however you'd like it to look.

You'll need to edit your website's theme files using the page editor. You'll need to edit files using the advanced mode (so you can create a new theme file).

Locate the views/partials folder and click to create a new file. Name the file cookie_consent_widget.twig, as shown in the example below.

Example code (which generates the normal cookie consent widget described above) is shown below. This can be fully customised for your needs.

{% block html %}
    <div id="__shopwired_consent_cookie_container" style="{{ position == 'left' ? 'left' : 'right' }}: 20px; bottom: 20px; position: fixed; background-color: rgba(0, 0, 0, 0.8); padding: 15px 20px 20px; width: 320px; z-index: 9999; box-sizing: border-box; -webkit-backface-visibility: hidden; display: none;">
        <div id="__shopwired_consent_cookie_close" style="position: absolute; right: 6px; top: 4px; font-family: Arial, sans-serif; font-size: 17px; font-weight: normal; font-style: normal; line-height: 1; color: #fff; cursor: pointer;">X</div>
        <div style="color: {{ text_color|default('#fff') }}; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font-style: normal; line-height: 1.35; margin-bottom: 15px;">
            {% block text %}
                This website uses cookies to ensure that you get the best experience on our website. Read our
                <a href="{{ privacy_policy_link|default('/privacy-policy') }}" style="color: inherit; text-decoration: underline;">privacy policy</a>.
            {% endblock %}
        </div>
        <div id="__shopwired_consent_cookie_accept" style="background: {{ button_background_color|default('#eed547') }}; color: {{ button_text_color|default('#000') }}; width: 190px; height: 36px; line-height: 36px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; font-style: normal; text-align: center; cursor: pointer;">
            {{ button_text|default('I accept') }}
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        (function(document, location) {
            var declineCookieName = '{{ cookie_name }}_declined',
                container = document.getElementById('__shopwired_consent_cookie_container');
            if(!container) {
                return;
            }
            if(!decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(declineCookieName).replace(/[\-\.\+\*]/g, "\\{replace64}amp;") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1"))) {
                container.style.display = 'block';
            }
            var acceptButton = document.getElementById('__shopwired_consent_cookie_accept');
            if(acceptButton) {
                acceptButton.addEventListener('click', function() {
                    var date = new Date();
                    date.setTime(date.getTime() + (30 * 24 * 3600 * 1000));
                    document.cookie = '{{ cookie_name }}=1; expires=' + date.toUTCString() + '; path=/';
                    container.remove();
                    location.reload();
                });
            }
            var closeButton = document.getElementById('__shopwired_consent_cookie_close');
            if(closeButton) {
                closeButton.addEventListener('click', function() {
                    document.cookie = declineCookieName + '=1; path=/';
                    container.remove();
                });
            }
        })(document, location);
    </script>
{% endblock %}

Things you can customise include;

• The appearance and text in the widget
• How often the cookie widget appears (i.e. the expiration time of the cookie set by the cookie widget, which it uses to know when to appear)
• Whether or not you require consent before cookies are set


We can help

We can help you adjust the appearance of the cookie widget with either a simple or advanced customisation, please contact us for assistance. A charge will apply if you'd like us to do the work for you.

Simple customisation, depending on your requirements, will cost from £35 - £55 + VAT.

Advanced customisation, depending on your requirements, will cost upwards of £65 + VAT.