Cookies banner
Notifies users that the website uses cookies to improve their experience and gives them the option to manage their consent preferences through cookie settings. It typically appears when a user lands on the website for the first time.
- Description: A message informing the user about the website's use of cookies. Template: Cookies on
{website}.gov.my - Accept or Reject cookies button: Button allowing the user to accept all cookies or reject cookies.
- Customize: A button that opens cookie settings, allowing the user to customize their cookies preferences.
- Close Icon: A trailing icon that allows users to manually dismiss the cookie banner.
- Necessary Cookies Checkbox: This checkbox is required for the website to function properly. Cannot uncheck.
- Analytics Cookies Checkbox: This cookies track visitor count, bounce rate and traffic sources.
- Performance Cookies Checkbox: Used to analyze key website metrics, improving the user experience.
- Accept Cookies Button: A button to accept the cookies selected under the "Manage" settings.
- Reject All Cookies Button: A button that rejects all non-essential cookies, used as a secondary option for users who do not want to provide consent for cookies beyond the necessary ones.
State
- Default: The default state when a user first lands on the website. The banner shows the cookies description and the options to either "Accept All", “Reject all” cookies or "Customize" preferences.
- Customize: When the user clicks "Customize", checkboxes for Necessary Cookies, Analytics Cookies, and Performance Cookies appear, allowing the user to select or deselect their preferences. All cookies is checked by default. When user uncheck one of these cookies, changes is save immediately.
Mobile view
- Desktop: Cookies banner has 24px padding by default on bigger screens such as desktop and laptop.
- Mobile: Cookies banner has 18px padding to ensure readability and easy interaction on smaller screens.
Cookie banner location
The Cookie banner appears in the bottom-left corner for desktop and in the bottom-center for mobile devices. It remains visible until the user interacts with it by either accepting all or rejecting cookies, customize their preferences, or closing the cookie banner.
Desktop/Tablet: The Cookie banner is fixed at the bottom left of the screen, with a 24px margin. It has a width of 500px.
Mobile: The Cookie banner is centered at the bottom of the screen, with an 18px margin. It stretches to fit the screen width, with 18px margins on both sides.
Usage example
The cookies banner automatically appears once the page is loaded. Users can then manage their cookie settings by clicking on ‘Customize,’ ‘Accept,’ or ‘Reject.’