@ewc-lib/ewc-dialog-feedback

Screenshot

• This component is supposed to be shown after page load within configurable time periods
• The end-user can stop this component from being shown by ticking a checkbox
  • The information if it should be shown or not is stored in a cookie
• Multiple periods can be specified

Note: This component comes with predefined title, text and labels

API

The API of ewc-dialog applies to this component as well, because it derives from ewc-dialog.

However because this is a single purpose specialisation of ewc-dialog, there should be no need to specialise it any further.

That's why some setters of ewc-dialog are disabled.

Note: The dialog shows itself 2 seconds after page load, there is no way to show it manually.

Additionally, there are the following attributes:

• configUrl - URL of a text file containing a JSON string
• configString - config as a JSON string

Notes:

• configString has precedence in case both, url and string are given
• changing them at runtime is supported
• the dialog doesn't open unless one of the above attributes is set

Properties:

• messages - an object, specifying the text messages of the dialog. For details, see Translation.
  • Changing this attribute at runtime is supported

Please see the usage-example/ directory, which contains working examples.

config string example

{
  "cookieName": "eurostat-dashboards-survey",
  "cookiePath": "/eurostat/cache",
  "participationUrl": "https://ec.europa.eu/eusurvey/runner/dashboards_feedback",
  "activationPeriods": [
    {
      "activeFrom": "2024-10-18 10:00",
      "activeUntil": "2024-10-24 14:00",
      "cookieExpiryDate": "2024-10-25"
    },
    {
      "activeFrom": "2024-11-20 10:00",
      "activeUntil": "2024-11-26 14:00",
      "cookieExpiryDate": "2024-11-27"
    },
    {
      "activeFrom": "2024-12-18 10:00",
      "activeUntil": "2024-12-24 14:00",
      "cookieExpiryDate": "2024-12-25"
    }
  ]
}

Note: the user has to make sure the cookie expiry date of one period lies before the start of the next period

Translation

The following object is defined internally to specify the default texts.

{
  title: "Your feedback wanted",
  messageHTML: `<p>Have you looked at any of our dashboards? 
    We'd like to hear from you and get your feedback about them.</p>
    <p>Please fill out our short, anonymous survey and participate.</p>`,
  checkboxLabel: "Don't show this message again",
  noLabel: "No thanks",
  yesLabel: "Go to survey"
}

The texts can be changed by supplying an object w/ the properties shown above to the messages setter.

Note that it is not mandatory to set all properties in the given object - supplying an object w/ only some of the properties results in setting only the given texts.

The examples in the usage-example/ directory also contain this use case.