Goal

The goal of this issue is to offer an easy way to customise the fonts, colors, sizes, of the iframe opt-out feature. This will let Piwik users show the opt-out in a way that integrates well in the design of the website where it is embed.

We'd like to be be able to customise the following styles:

• font color
• font family
• font size
• background color

Notes

• Customising these styles would be done by adding special URL parameters to the URL of the iframe, eg. fontColor, fontFamily, fontSize, backgroundColor.
• We need to validate the values of each parameter and make sure that unexpected text is discarded (for security reasons and prevent injections). For example:
  • colors should only accept official ways to define colors eg. rgb(0, 255, 0) , 00FF00 (possibly could allow color names eg .lime but not needed I think)
  • font family would maybe allow a-Z characters ranges and -
  • font size would only accept valid sizes eg. 10pt or 1.5em
• in the user interface where we show the iframe embed, we would create some short documentation (or a link to the documentation) which lists the various ways the tracking opt-out feature can be tweaked.

Ideas / optional:

• Maybe we could later add a little customise tool which would lists the styles and next to each, we show a text input field and a "Generate opt-out code" button or so.
• Maybe background color could support a value backgroundColor=transparent where the background would be set to the same as the website it is embedded, but likely requires complex code as it's not a browser feature I think?

Context

As part of respecting user privacy we have been offering a global opt-out which lets a Piwik administrator embed an IFRAME in their website. This IFRAME will load our Opt-out feature:

You can see this in action on our privacy policy page (in the section Opting-out of website tracking.