@ewc-lib/ewc-dialog-feedback

Screenshot

• This component is shown after page load during 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
  • e.g. from 1st June 2025 to June 7th
• This component comes with predefined title, text and labels - all of which are configurable

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
• this component is buildless and can be used with bundlers, as well as in a vanillaJS context

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.

Usage

Installation

npm install @ewc-lib/ewc-dialog-feedback

Import the component in your application:

// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css"
import "@ewc-lib/ewc-dialog-feedback"

Note about ewc-css-common

• "ewc-css-common/custom-props.css" is necessary and downloaded along with ewc-dialog.
• It needs to be imported by the host project because it's imported neither by ewc-dialog nor ewc-dialog-feedback.

Changelog

• 4.1.3-beta

  • improve integration support

• 4.1.2-beta

  • isolate class hierarchy to support different ewc-dialog version in host project
  • fix version info mistake

• 4.1.1-beta

  • fix: avoid double customElements.define() invocation when deriving classes

• 4.1.0-beta

  • use peerDependencies, update dependency of ewc-dialog, remove console output

• 4.0.3-beta

  • change to beta, update dependency of ewc-dialog

• 4.0.2-alpha

  • correction buttons, tab focus order, improve narrow width and zoom

• 4.0.0-alpha

  • adapt to new standards (look and feel)

• 3.0.1-alpha

  • guard custom element registering

• 3.0.0-alpha

  • inline SVG (EWC-86), config (EWC-81)

• 2.0.1-alpha

  • introduce focus trap