Cookie Bar widget
Mendix widget that will display customizable cookie consent banner in your mendix application.
Description
Settings of this widget will allow you to show/hide accept and decline button and redirect to specified location containing your Cookie Policy. You can use this widget for you hybrid or web applictaion. This is a pluggeable widget based on NPM module (https://www.npmjs.com/package/react-cookie-consent).
Usage
To use this widget simply place it on your layout and configure it correctly.
The configuration is divided into 4 sections: General Buttons Advanced Styling Advanced Settings
The general section has the most important settings including banner content. Buttons section allows to manage content of "Accept" and "Decline" buttons. Advanced styling section allows to disable default styling and/or apply your own classes to contents of the bar. Advanced settings contain number of useful customization options.
Properties
| Prop | Type | Default value | Description |
|---|---|---|---|
| Message expression | expression | Required. Message you want to appear on cookie consent request. This message can be in HTML format or as a plain text. | |
| Location | enumeration, "top", "bottom" or "none" | "bottom" | Required. Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. |
| Overlay | boolean | false | Required. Whether to show a page obscuring overlay or not. |
| Use cookies policy page | boolean | false | Required. Select if you want to add link to your policy page. |
| Policy button action | action | Do nothing | Action that redirects to cookies policy. |
| Policy button text | string | See more | Text to appear on a policy redirection button. |
| Accept button text | string | Accept | Text to appear on the accept button. |
| Accept button Id | string | Id to apply to the accept button. | |
| On Accept | action | Additional action to be triggered on accept button click. | |
| Enable decline button | boolean | false | If enabled the decline button will be rendered. |
| Decline button text | string | Decline | Text to appear on the decline button. |
| Decline button Id | string | Id to apply to the decline button. | |
| On Decline | action | Additional action to be triggered on decline button click. | |
| Flip buttons | boolean | false | Required. If enabled the accept and decline buttons will be flipped. |
| Hide on accept | boolean | true | Required. If disabled the component will not hide it self after the accept button has been clicked. You will need to hide it yourself. |
| Accept on scroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see Accept on scroll percentage). |
| Accept on scroll percentage | decimal | 25 | Required. Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled. |
| Cookie name | string | Name of the cookie used to track whether the user has agreed. | |
| Cookie value | string | Value to be saved under the cookieName. | |
| Decline cookie value | string | Value to be saved under the cookieName when declined. | |
| Set decline cookie | boolean | true | Required. Whether to set a cookie when the user clicks "decline". |
| Debug mode | boolean | false | Required. Bar will be drawn regardless of cookie for debugging purposes. |
| Expires | integer | 365 | Required. Number of days before the cookie expires. |
| Same site | enumeration, "strict", "lax" or "none" | "lax" | Cookies sameSite attribute value. Use "none" only with Cookie security set to true. |
| Cookie security | boolean | true | Cookie security attribute. Use true only when running on https. |
Known issues
The cookie consent will not be stored in hybrid mobile applications. This feature is considered as a future improvement.
Planned improvements
- [Hybrid mobile] Adding a possibility to select local storage as a directory to store the cookie. (Consent cannot be stored in a cookie when using hybrid mobile build. Although cookies consent is not necessary in most cases in mobile applications, it would be good to have a possibility to store it anyway.)