If you have any questions that are beyond the scope of this help file, please feel free to email us writing to the email address below. Enjoy!
Version: 0.6
Created: June 17th 2015
By: Coding Divas [Federica Sibella & Michela Chiucini]
Email: support@codingdivas.net
Remember to add these files in your <head> section.
<!-- Divas Cookies skin -->
<link rel="stylesheet" type="text/css" media="screen" href="path-to-css/divascookies_style_dark_top.css" />
<!-- your jQuery version -->
<script type="text/javascript" src="path-to-js/jquery-2.1.4.min.js"></script>
<!-- your Divas Cookies version -->
<script type="text/javascript" src="path-to-js/jquery.divascookies-0.6.min.js"></script>
Just call Divas Cookies (after including the mandatory files as explained above).
<script type="text/javascript">
$.DivasCookies();
</script>
Here is a list of CSS classes created by Divas Cookies. You can style them as you wish or just link at one of our Divas Cookies skins, if you prefer.
/*
* Divas Cookies CSS classes
*/
.divascookies {
// main container
}
.divascookies > .divascookies-banner-container {
// banner container
}
.divascookies p.divascookies-banner-text {
// banner text
}
span.divascookies-policy-link a {
// link to the extended policy page
}
.divascookies-banner-container > .divascookies-accept-button-container {
// container of the accept button
}
.divascookies-accept-button-container > .divascookies-accept-button-img {
// container of the accept button img
}
.divascookies-accept-button-container > .divascookies-accept-button-text {
// accept button text
}
Divas Cookies can be configured to fit your needs with many straightforward parameters that you can set when calling the plugin.
It is the text for the Divas Cookies banner.
Default value: "[Divas Cookies Demo] This website uses cookies.". Configuration example:
$.DivasCookies({
bannerText: "This website uses cookies."
});
It is the link to your extended cookie policy.
Default value: "". Configuration example:
$.DivasCookies({
cookiePolicyLink: "yourprivacy.html"
});
It is the text for the link to the extended cookie policy.
Default value: "[Divas Cookies Demo] Read our cookie policy.". Configuration example:
$.DivasCookies({
cookiePolicyLinkText: "More info."
});
To be used with third party privacy policies, now active only for Iubenda policies. If set to "iubenda" tries to use the Iubenda widget.
Default value: "". Configuration example:
$.DivasCookies({
thirdPartyPolicyWidget: "iubenda"
});
It is the text for the acceptance button.
Default value: "[Divas Cookies Demo] Ok". Configuration example:
$.DivasCookies({
acceptButtonText: "Ok, go ahead!"
});
It is the source for the acceptance button image (optional).
Default value: "". Configuration example:
$.DivasCookies({
acceptButtonText: "path-to-images/acceptButton.png"
});
It is the opening effect for Divas Cookies banner.
Default value: "". Accepted values: "fade", "slideUp", "slideDown", "slideLeft", "slideRight". Configuration example:
$.DivasCookies({
openEffect: "fade"
});
It is the duration in msec for the opening effect of Divas Cookies banner.
Default value: 600. Configuration example:
$.DivasCookies({
openEffectDuration: 1000
});
It is the easing function for the opening effect of Divas Cookies banner.
Default value: "swing". Accepted values: "swing", "linear". Configuration example:
$.DivasCookies({
openEffectEasing: "linear"
});
It is the closing effect for Divas Cookies banner.
Default value: "". Accepted values: "fade", "slideUp", "slideDown", "slideLeft", "slideRight". Configuration example:
$.DivasCookies({
closeEffect: "fade"
});
It is the duration in msec for the closing effect of Divas Cookies banner.
Default value: 600. Configuration example:
$.DivasCookies({
closeEffectDuration: 1000
});
It is the easing function for the closing effect of Divas Cookies banner.
Default value: "swing". Accepted values: "swing", "linear". Configuration example:
$.DivasCookies({
closeEffectEasing: "linear"
});
It is the number of days after which the technical cookie set by Divas Cookies to remember the user preferences will expire (if userPreferences is set to true)
Default value: 365. Accepted values: integer numbers. Configuration example:
$.DivasCookies({
cookieDuration: 30 // technical cookie set by Divas Cookies to remember user preferences will expire in 30 days
});
If true, Divas Cookies options are checked and warnings are shown if it is the case (only for debug purposes, do not use in production environment).
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
debugMode: true
});
If true, sets a cookie after the Divas Cookies is closed the first time and never shows it again.
Default value: true. Accepted values: true, false. Configuration example:
$.DivasCookies({
saveUserPreferences: false // keeps showing the banner after the accept button has been clicked
});
Set this to true if you blocked scripts by wrapping them with if($.DivasCookies.optedIn()){**script to be blocked**}
or by adding the class "divascookies-remove" to the <script> tag and changing
its type from "text/javascript" to "text/plain".
Please read carefully the Notes about scripts blocking in the section below before using this option!
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
blockScripts: true
});
If true reloads the actual page after opt-in (useful to show immediately the inline scripts blocked with the wrapping function if($.DivasCookies.optedIn()){**script to be blocked**})
Please read carefully the Notes about scripts blocking in the section below before using this option!
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
pageReload: true
});
If true sets the Divas Cookie technical cookie on page scroll for cookies agreement other than on clicking the accept button on Divas Cookies banner (remember to specify this feature in your banner text!)
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
acceptOnScroll: true
});
If true sets the Divas Cookie technical cookie for cookies agreement by clicking any anchor (<a></a>) in the page (except that on Divas Cookies banner linking to your privacy policy)
other than on clicking the accept button on Divas Cookies banner (remember to specify this feature in your banner text!)
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
acceptOnClick: true
});
If true excludes the policy page specified in cookiePolicyLink parameter is excluded from the acceptOnScroll and acceptOnClick rules
(because the user should read the whole policy without being forced to accept on scroll or clicking any link in that page)
Default value: false. Accepted values: true, false. Configuration example:
$.DivasCookies({
excludePolicyPage: true
});
The execution of any inline script in the page can be blocked by wrapping it in a proper Divas Cookies function. The script execution is blocked until the user has accepted cookies by clicking the accept button on Divas Cookies banner. The wrapping function is:
// begin wrap
if($.DivasCookies.optedIn()) {
// here goes the inline script to be blocked
} // end wrap
Each script that you would like to block has to be wrapped in the function described above individually and manually. Here is an example of script wrapping (this wraps Google's PlusOne widget):
// begin wrap
if($.DivasCookies.optedIn()) {
// begin of Google's PlusOne widget
window.___gcfg = {
lang : 'en'
};
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
//end of Google's PlusOne widget
}// end wrap
The execution of any external script in the page can be blocked by changing its type from "text/javascript" to "text/plain" and adding the class "divascookies-remove" to the <script> tag. The script execution is blocked until the user has accepted cookies by clicking the accept button on Divas Cookies banner. Here is an example of how the script call has to be modified:
// original script
<script type="text/javascript" src="myscript.js"></script>
// blocked script
<script class="divascookies-remove" type="text/plain" src="myscript.js"></script>
The above technique (add class + change type in <script> tag) will work also with inline scripts, but for best performance we suggest to use the wrapping function if($.DivasCookies.optedIn()){**script to be blocked**} with them.
To block any <iframe> or any <img /> or <input /> that contains a src attribute and loads content from an external source that potentially installs cookies (i.e. YouTube videos or Paypal donate buttons) add the class "divascookies-remove" as for scripts (see above) and change "src" to "data-src". Here is an example of how the <iframe> call has to be modified (this modifies the call to a YouTube video):
// original iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mut-YXSExnw" frameborder="0" allowfullscreen></iframe>
// blocked iframe
<iframe width="560" height="315" class="divascookies-remove" data-src="https://www.youtube.com/embed/Mut-YXSExnw" frameborder="0" allowfullscreen></iframe>
Here is an example of how the <img /> and <input /> call has to be modified (this modifies the call to a Paypal donate button):
// original input
<input type="image" src="https://www.paypalobjects.com/it_IT/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
// original img
<img alt="" border="0" src="https://www.paypalobjects.com/it_IT/i/scr/pixel.gif" width="1" height="1">
// blocked input
<input class="divascookies-remove" type="image" data-src="https://www.paypalobjects.com/it_IT/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
// blocked img
<img class="divascookies-remove" alt="" border="0" data-src="https://www.paypalobjects.com/it_IT/i/scr/pixel.gif" width="1" height="1">
For Divas Cookies to block script execution effectively you must instantiate it as early as possible (always before any of the scripts you would like to block) and outside any $(document).ready(function(){}); function like this:
// instantiate Divas Cookies
$.DivasCookies({
bannerText : "This website uses cookies in order to improve your web experience. ", // text for the Divas Cookies banner
cookiePolicyLink : "yourprivacy.html", // link to the extended cookie policy
cookiePolicyLinkText : "More info", // text for the link to the extended cookie policy
thirdPartyPolicyWidget : "", // if set to "iubenda" tries to use the Iubenda widget
acceptButtonText : "OK", // text for the close button
acceptButtonSrc : "", // source for the close button image
openEffect : "slideDown", // opening effect for Divas Cookies banner ["fade", "slideUp", "slideDown", "slideLeft", "slideRight"]
openEffectDuration : 600, // duration of the opening effect (msec)
openEffectEasing : "swing", // easing for the opening effect
closeEffect : "slideUp", // closing effect for Divas Cookies banner ["fade", "slideUp", "slideDown", "slideLeft", "slideRight"]
closeEffectDuration : 600, // duration of the closing effect (msec)
closeEffectEasing : "swing", // easing for the closing effect
debugMode : false, // if true, the options are checked and warnings are shown
saveUserPreferences : true, // if true, sets a cookie after the Divas Cookies is closed the first time and never shows it again
cookieDuration : 30, // number of days after which the Divas Cookie technical cookie will expire (default 365 days)
blockScripts : true, // set this to true if you blocked scripts by wrapping them with if($.DivasCookies.optedIn()){**script to be blocked**} or with the add class + change type in <script> tag (default false)
pageReload : true, // if true reloads the actual page after opt-in to show the previuosly inline blocked scripts (default false)
acceptOnScroll : true, // if true sets the Divas Cookie technical cookie on page scroll for cookies agreement (default false)
acceptOnClick : false, // if true sets the Divas Cookie technical cookie on click on any in the page except that on Divas Cookies banner for cookies agreement (default false)
excludePolicyPage : false // if true excludes the cookie policy page from acceptOnScroll and acceptOnClick (default false)
}); // end of Divas Cookies instantiation
// any other script here
The parameters "saveUserPreferences" and "blockScripts" must be set to true (see options configuration above).
Moreover, if you want the page to be reloaded immediately after the user has accepted the cookies (so that the previously inline blocked scripts are immediately executed),
set also the "pageReload" parameter to true (see options configuration above).
You can try a working demo of the above settings in the yourprivacy.html file included in this .zip.