Cookie Consent

Introduction

Cookie Consent is a Joomla module that provides a customizable cookie consent popup to inform users about the use of cookies on your website. This documentation covers the installation, configuration, and usage of the Cookie Consent module.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: CookieConsent_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the CookieConsent_UNZIP.zip package. After unzipping, you will find the following contents:

• mod_cookieconsent_X.x.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

General Settings

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Content > Site Modules, and find Cookie Consent in the list.

General Settings

• Consent Type: Choose how users interact with the cookie consent banner.
  • Just tell users that we use cookies: Informational only, users can dismiss
  • Let users opt out of cookies: Users can decline cookies
  • Ask users to opt into cookies: Users must explicitly accept cookies
• Banner Position: Select where the cookie consent banner should appear.
  • Banner Bottom: Full-width banner at bottom of page
  • Banner Top: Full-width banner at top of page
  • Bottom Floating Left/Right: Floating box in bottom corners
  • Top Floating Left/Right: Floating box in top corners
  • Banner Top Push Down: Banner at top that pushes content down
• Banner Theme: Choose a visual style for the banner.
  • Block: Solid block design with borders
  • Classic: Traditional rounded design
  • Edgeless: Clean design without borders
  • Wire: Outlined design with transparent background

Content & Text

Content & Text Settings

• Cookie Message: Enter the main message displayed to users explaining cookie usage.
  • Default: This website uses cookies to ensure you get the best experience on our website.
  • You can use HTML in this field
• Dismiss Button Text: Text for the dismiss/close button.
  • Default: Got it
  • Appears when consent type is "Just tell"
• Accept Button Text: Text for the accept/allow button.
  • Default: Allow Cookies
  • Only shown when consent type is "Opt-in"
• Decline Button Text: Text for the decline button.
  • Default: Decline
  • Only shown when consent type is "Opt-out"
• Show Policy Link: Enable or disable the policy/privacy link.
  • Toggle: Yes or No
• Policy Link Text: Text displayed for the policy link.
  • Default: Learn More
  • Only shown when "Show Policy Link" is enabled
• Policy Link URL: Full URL to your privacy or cookie policy page.
  • Default: https://cookiesandyou.com/
  • Only shown when "Show Policy Link" is enabled
  • Must be a valid URL

Colors & Styling

Colors & Styling Settings

• Banner Background Color: Select the background color of the cookie consent banner.
  • Default: #333333 (Dark gray)
  • Choose a color that contrasts well with banner text
• Banner Text Color: Select the color for the main message text.
  • Default: #FFFFFF (White)
  • Ensure good contrast with banner background
• Button Background Color: Select the background color for action buttons.
  • Default: #F1D600 (Yellow)
  • Choose a color that stands out and matches your brand
• Button Text Color: Select the text color for action buttons.
  • Default: #FFFFFF (White)
  • Ensure good readability against button background

Note: The Wire theme uses transparent button background with a border instead of a solid background color.

Typography Settings

Typography Settings

• Font Family: Enter the font family for the cookie message.
  • System fonts: Arial, 'Times New Roman', Tahoma, etc.
  • Google Fonts: Roboto, Open Sans, Lato, etc. (automatically loaded)
  • Leave empty to use template default font
• Font Size: Set the font size for the cookie message.
  • Default: 16px
  • Examples: 14px, 18px, 1rem, 1.2em
• Font Weight: Select the font weight/thickness.
  • Options: Normal, Bold, Bolder, Lighter, or numeric values (100-900)
  • Default: Normal
• Text Transform: Choose how text case is displayed.
  • Options: None, Uppercase, Lowercase, Capitalize
  • Default: None
• Line Height: Set spacing between lines.
  • Examples: 1.5 (unitless), 24px
  • Leave empty for default spacing
• Letter Spacing: Adjust spacing between letters.
  • Enter value in pixels (e.g., 1, 2, -1)
  • Positive values increase spacing, negative values decrease it
  • Leave empty for default

Advanced Settings

Advanced Settings

• Additional CSS: Add custom CSS for further styling.
  • Use CSS selectors like .cc-message, .cc-btn, .cc-window
  • This CSS will be added inline to the page
  • Useful for advanced customization and integration with your site's design

Example CSS:

.cc-message {
    font-style: italic;
}
.cc-btn {
    border-radius: 10px;
}

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Cookie Consent banner will display based on your settings, informing users about the use of cookies.

Features

• Compliance Options: Choose from different compliance types (Just tell, Opt-out, Opt-in) to meet GDPR, CCPA, and other legal requirements.
• Flexible Positioning: Place the cookie consent banner in 7 different positions (top, bottom, floating corners, push-down).
• Theme Selection: Select from 4 beautiful themes (Block, Classic, Edgeless, Wire) to match your website design.
• Color Customization: Customize banner, text, and button colors to maintain brand consistency.
• Typography Controls: Full control over font family, size, weight, text transform, line height, and letter spacing.
• Policy Link: Optionally display a link to your cookie policy with customizable text and URL.
• Local Assets: All CSS and JavaScript files are hosted locally for better performance and privacy.
• Responsive Design: Fully responsive and optimized for all devices and screen sizes.
• Joomla 4, 5 & 6 Compatible: Fully compatible with the latest Joomla versions.
• Easy Configuration: Organized tabs with user-friendly interface for easy setup.

FAQ

• How do I change the compliance type?

  • Adjust the Consent Type setting under General Settings tab.

• Can I change the position of the cookie consent banner?

  • Yes, set the Banner Position option under General Settings tab. You can choose from 7 different positions.

• How do I customize the banner and button colors?

  • Configure the Banner Background Color, Banner Text Color, Button Background Color, and Button Text Color under Colors & Styling tab.

• How do I add a policy link?

  • Enable the Show Policy Link toggle under Content & Text tab, then enter the Policy Link Text and Policy Link URL.

• Can I use Google Fonts for the cookie message?

  • Yes, simply enter the Google Font name (e.g., Roboto, Open Sans) in the Font Family field under Typography Settings. The font will be automatically loaded.

• Can I add custom CSS to the module?

  • Yes, add your custom CSS in the Additional CSS field under Advanced Settings tab.

• Why don't I see the Accept or Decline buttons?

  • The Accept button only appears when Consent Type is set to "Opt-in". The Decline button only appears when Consent Type is set to "Opt-out".

Troubleshooting

• Banner Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the module is enabled and assigned to the correct menu items. Check browser console for JavaScript errors.
• Colors Not Applying: Check the color settings under Colors & Styling tab and ensure they are correctly specified in hex format (e.g., #333333). Clear browser cache and Joomla cache after making changes.
• Typography Not Working: Verify font family name is correct. For Google Fonts, use the exact font name (e.g., "Roboto" not "roboto"). Check that font size and other typography values are properly formatted.
• Buttons Showing Underlines: This issue has been fixed in version 1.6. Make sure you are using the latest version. If issue persists, clear browser cache.
• Policy Link Not Appearing: Ensure "Show Policy Link" is set to "Yes" under Content & Text tab. Verify that both Policy Link Text and Policy Link URL are filled in.
• Module Not Visible: Check that the module is published and assigned to the correct template position. Verify menu item assignments if using menu-specific display.
• Assets Not Loading: Ensure the assets folder exists in the module directory. Check file permissions. Verify WebAssetManager is working correctly.
• Google Fonts Not Loading: Check that the font name is spelled correctly. Ensure your site has internet access to load Google Fonts. Verify browser console for any loading errors.