Laravel 10 - Cookie Consent Modal for EU
Laravel 10 - Cookie Consent Modal for EU
In this tutorial, we will discuss implementing Cookie Consent for the EU in Laravel 10, ensuring compliance with GDPR regulations, protecting user privacy, and avoiding legal issues
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk you through the process of adding a GDPR-compliant cookie consent banner to your Laravel application using the StatikBe Cookie Consent package. You'll begin by setting up a Laravel project, installing the package, and publishing its frontend assets. Once the assets are in place, you will create a simple Blade view to test the banner, configure a route to display it, and launch your local development server. You'll then customize the banner text by publishing and editing the language files, making the consent message fit your brand's tone. By the end, you’ll have a fully functional, customizable cookie consent banner integrated seamlessly into your Laravel app, ensuring a user-friendly and legally compliant experience.
Step # 1 : Create or Use an Existing Laravel Project.
You can either start fresh or work within an existing Laravel project. To create a new project using the Laravel installer.
laravel new cookie
Alternatively, if you prefer using Composer, run.
composer create-project laravel/laravel --prefer-dist cookie
These commands will generate a fully functional Laravel setup with the standard structure and files needed for development. Once your project is set up, you’re ready to move on to installing the required packages and configuring the necessary components for your application.
Step # 2 : Open and Set Up the Project.
Navigate to your project’s root directory via terminal.
cd c:xampp/htdocs/cookie
Then install frontend dependencies and launch the Vite development server.
npm install && npm run dev
Keep this terminal running for asset compilation. Open another terminal window to continue working with Laravel commands.
Step # 3 : Install the Cookie Consent Package.
To add cookie consent functionality to your Laravel app, install the official package via Composer.
composer require statikbe/laravel-cookie-consent
This package provides a simple, GDPR-compliant cookie consent banner that informs users about cookie usage and asks for their permission. It includes built-in styling, JavaScript for interactions, and localization support. The best part? It auto-registers, no need to manually update your config/app.php.
Step # 4 : Publish JavaScript and CSS Assets.
Once the package is installed, publish its frontend assets so the banner can be rendered correctly on your site.
php artisan vendor:publish --provider="Statikbe\CookieConsent\CookieConsentServiceProvider" --tag="cookie-public"
This command will place the necessary JavaScript and CSS files into your public folder, so your website can load and display the cookie banner properly. Once the assets are published, the banner will be ready to appear on your site, and you can customize its look and behavior as needed.
Step # 5 : Create a Simple View to Test the Cookie Banner.
Now that everything’s set up, let’s create a basic page to test the cookie consent banner. We'll use a plain HTML layout with Bootstrap styling and include the cookie consent component. Inside your Laravel project, create a new Blade file called master.blade.php in the resources/views folder (resources/views/master.blade.php). Add the following code to that file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Cookie Consent Example - Code Shortcut</title>
<!-- Bootstrap 4 CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Cookie Consent CSS -->
<link rel="stylesheet" href="{{ asset('vendor/cookie-consent/css/cookie-consent.css') }}">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Welcome to My Website</h1>
<p class="text-center">
This is an example of how to integrate a cookie consent banner in Laravel.
</p>
<p class="text-center">
By continuing to browse, you agree to the use of cookies.
</p>
</div>
<!-- Cookie Consent Banner -->
@include('cookie-consent::index')
<!-- Bootstrap 4 JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In this step, we're setting up a simple demo page to see the cookie consent banner in action. We've used Bootstrap just for some basic styling, but you're free to skip it or use your own styles instead. The key part is the @include('cookie-consent::index') line, which adds the cookie banner to the page. The banner's CSS is pulled from the assets we published earlier, and at the bottom, we’ve included Bootstrap’s JavaScript files to ensure everything functions and looks as expected.
Step # 6 : Set Up a Route for Your Test Page.
Now let’s tell Laravel how to serve the view we just created. Open your routes/web.php file and add the following route.
Route::get('/', function(){
return view('master');
});
This simply maps the homepage (/) to our master.blade.php view so we can see it in the browser.
Step # 7 : Fire It Up and Test.
With everything in place, it’s time to see the cookie banner in action. Start the Laravel development server by running.
php artisan serve
Once the server is running, open your browser and go to: http://127.0.0.1:8000. You should now see your sample page along with the cookie consent banner, rendered via the StatikBe package. The banner’s appearance and position can be customized later based on your design preferences.
Step # 8 : Customize the Banner Text.
To personalize the cookie consent banner messages, you need to publish the language files first. Run the following command.
php artisan vendor:publish --provider="Statikbe\CookieConsent\CookieConsentServiceProvider" --tag="cookie-lang"
This command will copy the default language files to resources/lang/vendor/cookie-consent/. Once published, you can open the English file at: resources/lang/vendor/cookie-consent/en/texts.php. Inside that file, you can customize any message. For example, to change the label on the Accept all cookies button, find this line.
'alert_accept' => 'Accept all cookies',
And update it to something like.
'alert_accept' => 'Custom - Accept all cookies',
Now, if you refresh your site, you should see your updated message appear on the banner.
Feel free to tailor the text to better match your brand voice or site tone. Every piece of text shown in the banner can be adjusted here. You can also experiment with different wording or even add additional messages to enhance the user experience.
Conclusion
By following this guide, you’ve successfully integrated a customizable, GDPR-compliant cookie consent banner into your Laravel application using the StatikBe package. You now have a working setup that informs users about cookie usage while giving you the flexibility to personalize the appearance and language to match your brand. This implementation not only improves transparency but also helps meet legal compliance standards, making your site more trustworthy to users. With the ability to further customize and expand the functionality, this solution can evolve with your site's needs.
For advanced customization and features, be sure to explore the official StatikBe Cookie Consent documentation and unlock the full potential of the package.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments