Documentation index

Cookie solution ›

Banner and prior consent – setup and customization


Our banner has the following features:

  • It can be integrated by simply adding a code (to all pages) of your website
  • It shows a banner containing a standard text, it is fully customizable and contains a link to the cookie policy
  • it has a completely responsive design
  • We ensure that the cookie policy can be viewed before the user consent is provided
  • We ensure a proper functioning of the blocking of scripts – see the introductory guide for the blocking of cookies for more information regarding this topic
  • It’s able to register/process consent through the continuation of browsing, for instance, through the scroll action
  • when the consent has been collected, it asynchronously activates (namely without reloading the page) all the scripts that were previously blocked
  • If the consent had already been provided, the banner does not appear and the scripts are automatically executed

1. Installation

Generic installation

In order to enable the iubenda Cookie Solution you just need to copy and paste the following code in all the pages of your website, before the closing of the HEAD Tag

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    cookiePolicyId: XxX,
    siteId: YyY,
    lang: "en"
  };
  (function (w, d) {
    var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
    if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
  })(window, document);
</script>

The above code is an example. In order to generate your own code, just click on the button “Enable/Configure cookie policy” located on the right side of the edit page of each privacy policy of your iubenda account. It is also available as a video tutorial that summarizes the basic steps you need to take in order to configure the iubenda Cookie Solution:

WordPress integration

If you are a WordPress user, you can configure the iubenda Cookie Solution by adding the code within the file header.php of the theme you are using before the closing of the HEAD tag.

Alternatively, we also offer a dedicated plugin. You can find more information about it in the dedicated WordPress guide.

Joomla! integration

In order to configure the iubenda Cookie Solution on a Joomla! website, you can either install a module like the Custom HTML advanced module. Here’s an article that explains how to use this module to integrate the privacy policy generated with iubenda; We remind you that the iubenda Cookie Solution code must be entered before the closing of the HEAD tag.

Alternatively, we’ve also released a dedicated Joomla! plugin. For more information, check the comprehensive guide to the iubenda plugin for Joomla!.

Notice

  • The iubenda Cookie Solution requires a jQuery version 1.4.4 or later ( if your site has an older version, you will need to update it. If jQuery is not present, iubenda will take care of the installation)

2. Configuration

Available parameters _iub.csConfiguration {}:

Required parameters

siteId: – Your site’s ID code (notice: This ID is used to share the preference among multiple cookies policies in different languages that are attributable to the same website/app)

cookiePolicyId: – Your cookie policy’s ID code

lang: – This parameter defines the language in which to display the content of the cookie banner (for example, “it” for the Italian, “en” for English, “es” for Spanish, etc..). All the language localizations available within the generator are also available for the content of the banner.

Optional parameters

cookiePolicyUrl: (string) – This is the cookie policy’s URL linked within the banner. It is available in your privacy policy’s edit page in the “integration” tab. If you don’t define this parameter it will refer to the cookie policy generated by Iubenda and hosted on our servers. You can alternatively choose to host the cookie policy on a page of your website and thus fill this field with the related URL. Remember that if you decide to host the cookie policy on your own page, this page should not use cookies, beyond the technical ones. Note: this parameter will be ineffective if you are using a custom HTML for the banner (see the configuration banner.html below)

cookiePolicyInOtherWindow: (boolean, default false) – If you set this parameter to true the cookie policy will open in another window instead of the iubenda modal window

enableRemoteConsent: (boolean, default false) – You can set this parameter to true to enable a cross-site registration of the consent (it can be useful when the script is implemented in more than one websites of the same network). In particular, if you set this parameter to true, our solution creates a technical cookie on iubenda.com (domain) which is used when the cookie on the local domain is not found.

consentOnScroll: (boolean, default true) – you can set this parameter to false to avoid the registration of the user’s consent when the page is scrolled

reloadOnConsent:(boolean, false by default) – You can set this parameter to true if you want the page to be reloaded after the collection of the consent

localConsentDomain: (string, default null) – the domain on which you want to save the consent collected from the users. If not set, the consent will be saved in a cookie on the domain of the current page (for example, by visiting www.example.com, the consent will be saved in a cookie placed in the domain example.com). If the default behavior is not appropriate, for example, if the website is located on the domain www.paesaggiurbani.italia.it the consent must be provided for paesaggiurbani.italia.it (and not for italia.it), in that case, you are required to set the localConsentDomain to the value ‘paesaggiurbani.italia.it’.

Notice: in a similar scenario, if the parameter is not given, the banner could continue to appear to the same user at each subsequent visit/page view.

localConsentPath: (string, default ‘/’) – The path in which you want to save, in the local domain, the consent provided by the user. By default, the consent given by the user is saved in the local domain in the cookie in the path ‘/’. In this way, the cookie is available regardless of the page of the domain being accessed. If you want, for example, that the preference cookie set for www.example.com/percorso1 will not be available by browsing on www.example.com/percorso2, and vice versa, it will be necessary to provide this parameter the value ‘/percorso1’ in the first case and ‘/ percorso2’ value in the second case.

consentOnScrollDelay: (intero, default 500 millisecondi) – The delay with which the consent via scroll is detected, once the banner has been shown

priorConsent: (boolean, default true) – Enables the blocking of scripts and their reactivation only after having collected the consent. If false, the blocked scripts are always reactivated regardless of whether or not consent has been provided (we strongly advise against setting priorConsent to false if you want to be complying with EU legislation and thus the Italian legislation except if you are using the Light Cookie Solution deliberately, which requires you to set priorConsent on false)

rebuildIframe (boolean, default false) – Once the user’s consent has been recorded, the default behavior of the Cookie Solution is to restore the iframes previously modified in order to make them working again. By setting this parameter to true, the iframes previously blocked are fully regenerated (or reintegrated) after the collection of consent.

preserveOriginalClasses (boolean, default false) – By default, the original classes of the snippets are deleted as a result of their reactivation. By setting this parameter to true, it makes sure that the original classes remain intact even after the activation.

preserveIubClasses (boolean, default false) – By default, the “_iub_cs_activate” class is deleted as a result of the reactivation of the snippet. By setting this parameter on true you allow this class to remain defined after the reactivation. Note: to be effective, this parameter requires also the parameter preseveOriginalClasses to be set to true (see above for further details). Moreover, this parameter has no effect on the snippets tagged with “_iub_activate-inline”

inlineDelay (integer, milliseconds, default 800 (safemode 500)) – The maximum time between the activations of snippets tagged with the class “_iub_cs_activate-inline” (the snippet tagged in this way are activated sequentially). By decreasing this value you will reduce the total time of activation. CAUTION: The default value is set in order for the snippets to work properly; reducing it may prevent the successful activation of some snippet. It is highly recommended to check the activation of the snippet shown on your page if this setting is changed

The following are further optional parameters that require the definition of one or more objects

banner {} (object) – Use this object to customize the look (or appearance) of the banner. The options are listed below and must be contained within the object banner {}.

View a sample configuration →

  • slideDown (boolean, default true) – You can set this parameter to false in order to disable the animation of the banner
  • zIndex (number) – This is the zIndex of the banner’s div. The default value is 99999998
  • content (string) – This is the textual content inside the cookie banner. For example, for the Italian version the default value is:Informativa
    Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalità illustrate nella cookie policy. Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie, consulta la %{cookie_policy_link}.
    Chiudendo questo banner, scorrendo questa pagina, cliccando su un link o proseguendo la navigazione in altra maniera, acconsenti all’uso dei cookie.
    Note: %{cookie_policy_link} is the placeholder where the link of the cookie policy is placed. Remember that by default, the cookie policy linked in the banner is the one hosted on our servers. In order to change the default behavior, you need to modify the cookiePolicyUrl parameter (please refer to the related section of this guide for more information on this parameter). The content of the cookie banner will be localized in all languages available in the generator (the language in which to display the banner content is defined through the parameter “lang”)

    Caution

    In order to make sure that the cookie policy is correctly displayed, it’s necessary that the “iubenda-cs-cookie-policy-lnk” class is not used elsewhere on the same page.

  • cookiePolicyLinkCaption (string) – Anchor text of the link to the cookie policy (the default value is “cookie policy”)
  • backgroundColor (string, default “#000”) – The background color of the banner
  • textColor (string, default “#fff”) – The color of the banner’s text
  • fontSize (string, default null) – The dimension of the banner’s text (including the closing button). If this option is active If this option is enabled the possible values in the options banner.fontSizeCloseButton and banner.fontSizeBody (available in beta only) will not be taken into account.
  • fontSizeCloseButton (string, default “20px”) – The dimension of the banner’s closing button (available only for the beta version).
  • fontSizeBody (string, default “14px”) – The dimension of the banner’s text content (available only for the beta version).
  • innerHtmlCloseBtn (string, default “x”) – The text of the banner’s close button
  • applyStyles (boolean, default true) – By setting this parameter to false, the default style/CSS is not applied to the banner; this parameter can be useful, for example when you want to give the banner a different style than the standard one. The starting point should always be our CSS, that you can find here. It reapplies the same style excluded from this option but has the advantage of being editable once inserted into the pages.Here are some examples:
  • html (string, default null) – It is the default HTML of the banner, through this parameter it can be replaced with a customized one. Note: some elements are in any case necessary for the proper functioning of the banner, in particular:
    • div.iubenda-cs-content (the main container)
    • a.iubenda-cs-cookie-policy-lnk (the href link set to link to the cookie policy, i.e. https://www.iubenda.com/privacy-policy/417383/cookie-policy?an=no&s_ck=false)
    • a.iubenda-cs-close-btn (the banner’s close button)
  • prependOnBody (boolean, default false) – If this parameter is set on true, the HTML code of the banner is injected into the site as the first element of the BODY. By default “prependOnBody” is set to false and the banner is placed as the last element of the BODYYou must set the prependOnBody on true when you want, for example, to place the banner above the header. In this way, the banner will be the first element on the page, and in order to display it on top of the header, simply apply a “padding-top” to the next item:#iubenda-cs-banner + * { padding-top: 180px; }

footer {} (object)

  • message (string) – This is the text message displayed below the window where the extended policy is displayed (cookie policy) when you click the cookie policy link within the banner (for example, in Italian the default value is “Proseguendo la navigazione o chiudendo la finestra presti il tuo consenso all’installazione dei cookie”)
  • btnCaption (string) – This is the text displayed in the button (located at the bottom of the window in which the extended policy is displayed when you click the cookie policy link within the banner) used to confirm your consent to the installation of cookies; for example, in Italian the default value is “Prosegui la navigazione”

View a sample configuration →

callback {} (object) – This is the parameter through which you can define the callback that iubenda Cookie Solution can perform upon the occurrence of an event, namely:

  • onReady (function) – If the consent of the user has not yet been processed (for example, because it’s his first visit) the onReady callback is invoked as soon as the banner cookie is displayed; on the contrary, if the user has already given their consent to the installation of cookies, this callback is invoked as soon as the iubenda Cookie Solution is initialized. The consent given or not is passed as an argument, which can be true or false.
  • onBannerShown (function) – Using this feature you can run a script when the banner is shown
  • onCookiePolicyShown (function) – Called when the cookie policy is shown (either in modal window or on a separate page)
  • onConsentGiven (function) – This callback is invoked if the user has given the consent to the installation of cookies, both when consenting for the first time and in all subsequent visits
  • onConsentFirstGiven (function) – It is invoked only for the first time that the user gives their consent. One of the following strings is passed as an argument: ‘documentScroll’, ‘documentMoved’, ‘bannerXClose’, ‘documentClicked’ or ‘cookiePolicyClosed’
  • onConsentRead (function) – It is invoked the first time the user gives consent and each subsequent loading when the consent is detected. The callback onConsentGiven becomes an alias for onConsentRead and it is not invoked if the latter is defined
  • onStartupFailed (function) – It is invoked in the case where the iubenda Cookie Solution fails the startup phase. An error message is passed as an argument
  • onError (function) -It is invoked in the case where the iubenda Cookie Solution is experiencing an error. An error message is passed as an argument
  • onFatalError (function)
    It is invoked in the case where the iubenda Cookie Solution experiencing an error that does not allow it to continue. An error message is passed as an argument

View a sample configuration →

preferenceCookie {} (object)
This is the parameter through which you can customize the lasting of the preference cookie iubenda installs in the user’s browser in order to record its consent. In particular, the object to be defined is:

  • expireAfter (number, default 365) – It represents the number of days of validity of the consent given by the user on a given web site. Note: This value is updated at each subsequent visit by the user

View a sample configuration →

Further parameters for developers

logLevel: (string) – It defines the verbosity of the logger (available values: ‘debug’, ‘info’, ‘warn’, ‘error’, ‘fatal’; the default value is ‘nolog’))

skipSaveConsent: (boolean, default false) – By setting this parameter to true, the consent is not saved in a preference cookie

logViaAlert: (boolean, default false) – By setting this parameter to true, the logging is shown via alert

consentOnButton: (boolean, default true) – The user’s consent is normally recorded also after a click on a button (button) on the page, as well as on the links. The consentOnButton parameter, set to false, changes the default behavior by ensuring that the consent results as “not given” in these cases

Available classes

  • iubenda-cs-close-btn – By adding this class to any element of the page, the click on the item closes the banner and assumes that the consent is provided (in an equivalent manner to the click on the X button of the banner)
  • iubenda-cs-cookie-policy-lnk – By adding this class to any element of the page, the click on that element allows the displaying of the Cookie Policy (it’s equivalent to the click on the link to the Cookie Policy)

Warning

In order to ensure proper display of the cookie policy, the class “iubenda-cs-cookie-policy-lnk” (assigned to the link to the cookie policy in the banner) must not be used elsewhere on the page.

Examples

Here is an example for the iubenda Cookie Solution configuration with optional parameters:

<script type="text/javascript">
var _iub = _iub || [];
  _iub.csConfiguration = {
    siteId: 234578,
    cookiePolicyId: 340542,
    cookiePolicyUrl: 'http://www.site.com/cookie-policy',
    enableRemoteConsent: false,
    consentOnScroll: false,
    banner: {
        slideDown: false,
      zIndex: 99999998,
      content: "
Informativa
" +
      "
Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalit&agrave; illustrate nella cookie policy. Se vuoi saperne di pi&ugrave; o negare il consenso a tutti o ad alcuni cookie, consulta la %{cookie_policy_link}.
Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie.
",
      cookiePolicyLinkCaption: "cookie policy",
        backgroundColor: "#CCC",
        textColor: "#000",
        fontSize: "12px",
        innerHtmlCloseBtn: "OK"
    },
    footer: {
      message: 'Proseguendo la navigazione o chiudendo la finestra presti il tuo consenso all\'installazione dei cookie.',
      btnCaption: 'Prosegui la navigazione'
    },
    callback: {
      onBannerShown: function(){doSomethingOnBannerShown()},
      onConsentGiven: function(){setCustomCookies()}
    },
    preferenceCookie: {
      expireAfter: 365
    },    
    consentOnButton: true,
  };
  (function (w, d) {
    var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
    if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
    })(window, document);
</script>

Below, there are other examples of possible configurations:

Reading of the preference cookie

The consent provided by the user is saved in some cookies within the host page’s domain. By verifying the presence or the absence of these cookies you can determine whether the user has given their consent or not.

In particular, the consent is considered provided if there is the cookie _iub_cs-s[siteId] or the cookie _iub_cs-[cookiePolicyId], where siteId and cookiePolicyId are the parameters provided in the embedding code (in the case shown above, the two cookies to look for will be _iub_cs-s234578 and _iub_cs-340542). Below is an example of Javascript code for reading out the client-side consent:

function isConsentGiven (siteId,cookiePolicyId){
        var cs = document.cookie.split(';');
  for (var i = 0; i < cs.length; i++) {
    while (cs[i].charAt(0) == ' ') cs[i] = cs[i].substring(1);
    if(cs[i].indexOf('_iub_cs-s'+ siteId) == 0||cs[i].indexOf('_iub_cs-'+ cookiePolicyId) == 0) return true;}
  return false;
}

By placing this code as high as possible within the page you can read the consent given and transmit this information to all other JavaScripts that follow.


Still have questions?

Visit our support forum Email us