@mattab opened this Issue on January 16th 2018 Member


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


  • 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?


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.

@fdellwing commented on January 16th 2018 Contributor

font size would only accept valid sizes eg. 10pt or 1.5em

Valid font sizes are 10pt, 1em, 10px, 100% and words like small or large.

Maybe add on "auto styling" for Bootstrap modal? As I think it is quite often used in such way.

@matomoto commented on January 17th 2018

check this first: https://github.com/Zeichen32/PiwikCustomOptOut/
and than check this (more independently): https://www.penultima.de/opt/matomo.php

@mattab commented on January 22nd 2018 Member

Fixed in #12472

This Issue was closed on January 22nd 2018
Powered by GitHub Issue Mirror