@mattab opened this Issue on January 16th 2018 Owner

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:

optout

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 Owner

Fixed in #12472

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