Documentation index

Integration & embedding options ›

Adding iubenda to your site (standard embedding option)


The standard and our simplest integration method is the one where you include the iubenda button/link on your site. This will open the privacy policy in a modal window on your site when the link is clicked. If you are developing for mobile apps, you’ll want to take a look at either the direct link or direct text embedding option.

To add the iubenda button to your site, simply copy the iubenda generated code provided to you. You can find and change the integration options at any time by going into the “Integration” tab within your privacy policy.

iubenda_integration

After choosing the button color (and paid “no-style” & “no-branding”) you can copy the relevant code from the generator.

iubenda_button

The code looks like this:

iubenda_embedding_code

Where and how do I put the iubenda embedding code on my site?

That really depends on

  • where you want your button to be seen;
  • and what system you use.

Where to place the iubenda button: the best idea is to add the button to your site’s footer. In this manner, it will be seen from every page which is an important way to make sure you’re compliant with privacy requirements.

Where to place the iubenda code in html: your footer is found towards the end of your html document. The footer is easy to find and appears in an html element like the following:

 

<footer>{YOUR IUBENDA CODE}</footer>

 

OR perhaps something similar to this

 

<div id="footer">{YOUR IUBENDA CODE}</div>

 

The system you’re using may sometimes complicate the reachability of your footer but in most cases this minor difficulty is avoided. In WordPress for example, you will find a detailed guide for the inclusion of the iubenda policy in WordPress.

What does this look like?

Here you go:

Privacy Policy

More configurations

data-iub-z-index: – by adding this HTML attribute to the a tag within the embedding code (example: data-iub-z-index="10002") it is possible to configure the z-index of the modal window in which the Privacy Policy appears. The default value is 10000.

data-iub-overflow: – In order to avoid the scroll of the page when the policy is shown, in particular conditions the overflow property on the html element of the host page may be modified (the original values are restored at the closing of the policy). In some implementation and in certain browsers this change could lead to the blocking of the scrolling within the host page. By adding this HTML attribute to the a tag within the embedding code with value false (namely:data-iub-overflow="false") you can avoid that the overflow property be modified.

Other integration options

iubenda’s privacy policy offers two other integration options:

If you would like to have additional questions answered regarding the embedding of your privacy policy in this way, please don’t hesitate to post it to our Uservoice help forum.

Watch the video on the integration options instead


Still have questions?

Visit our support forum Email us