In the spring of 2023, the extension of the Covid project determined that to combat the challenge of digital inclusion and to provide a more citizen-centric approach to the development of digital services, 14 directives was issued. One of these directives was data-driven development. Since resources like time and funding is limited the perspective of measure first, then improve was adopted. Providing a tool for this, a feedback system see also UserFeedbackAPI was introduced to collect anonymous rating data from users of digital services.
To support a model where a drop-in library (e.g. this library) is a driver for tools ~ applications, we chose a plugin-based architecture. Each plugin or application uses the same communication interface, postMessage, and is loaded in an iFrame. This architecture coupled with the fact that each component and subcomponents are configuration driven (no config, no display) supports a model where future changes can be fetched and configured on demand.
Currently the following plugins are available:
Please review the achitecture diagram for an overview of how the different parts are intended to work together.
Note: The support modal is not mainly intended to be used as a tool for collecting feedback, but rather as a tool for collecting information and functionality usually spread out over a number of different pages in services. The support modal as a concept is in its early stages.
Steps to install
1. git clone git@github.com:diggsweden/InclusionToolbox.git
2. cd InclusionToolbox
3. npm install
4. npm run build
5. Copy built JS file, InclusionToolbox.js, from the ./dist folder and include the library in your project.
- See the sample use userFeedback for an example of how the library is imported and the userFeedback module is invoked.
- See the sample use supportModal for an example of how the library is invoked and the support modal is invoked.
Requirements
The InclusionToolbox.js in itself is not intended to serve the userFeedback or supportModal applications.
It is
intended for the developer to configure the .env file properties:
- FEEDBACK_IFRAME_SRC
- SUPPORT_IFRAME_SRC
(with URLs to the respective application's hosting).
The applications are available in the following repositories:
The library can, when hosting is solved, be released as a NPM package.
Node 18 or above is required to build the library.
This library can be used within any service that is JavaScript compatible.
It can be used in its most simplistic form as follows (e.g. UserFeedback):
import { UserFeedback } from 'path/to/library';
const config = {
apiKey: "",
};
const Feedback = new UserFeedback(config);
// Embed the UserRating widget into the target element
Feedback.load(
"ExampleFeedback", // Name of the feedback collection
"#feedback", // Target element, HTMLElement|String
);- Currently there is no support for native mobile applications for iOS/Android.
If you have questions, concerns, bug reports, etc, please file an issue in this repository's Issue Tracker.
General instructions on how to contribute.
git clone git@github.com:diggsweden/InclusionToolbox.gitcd InclusionToolboxnpm installnpm run build
The JS file can be found in ./dist/InclusionToolbox.js
This project is licensed under the MIT License - see the LICENSE file for details.
Copyright © 2021-2023, Myndigheten för digital förvaltning - Swedish Agency for Digital Government (DIGG). Licensed under the MIT license.