Laravel 13 - How To Integrate GDPR Cookie Consent.
Laravel 13 - How To Integrate GDPR Cookie Consent.
In this tutorial, we will learn how to add a GDPR-friendly cookie consent banner in Laravel 13 using the DevRabiul package, including setup, master layout, home page, and full customization of themes, buttons, privacy links, and cookie categories.
Quick Overview
This guide walks you through adding a GDPR-friendly cookie consent banner to a Laravel 13 application using the DevRabiul Laravel Cookie Consent package. You’ll start by creating a fresh Laravel 13 application, installing the package, and publishing its configuration file for customization. Next, you’ll create a reusable master layout with Tailwind CSS, including the navbar, footer, and cookie consent styles and scripts, followed by a home page that extends the layout and a route that loads it at the root URL (`/`). After starting the Laravel development server, you can verify the cookie consent banner on the home page and customize its theme, cookie title and description, buttons, policy links, and cookie categories through the package configuration, with the changes automatically reflected across pages using the master layout.
Step # 1 : Set Up a Fresh Laravel 13 Application.
Let’s start by creating a clean Laravel 13 application named consent. Before you begin, make sure Composer is installed and available on your system, since Laravel relies on it to handle PHP dependencies. For this setup, we’ll use the Laravel Installer. If you haven’t installed it globally yet, run
composer global require laravel/installer
After the Installer has been added, create the new Laravel application with.
laravel new consent
Laravel will ask you a few questions during the installation process. For this project, select the following options.
- Starter Kit: Choose No. We won’t be using a starter kit or any pre-configured authentication scaffolding.
- Frontend Stack: Select Blade. This keeps the frontend lightweight and lets us build the interface using Laravel’s native Blade templating system.
- Boost Features: Leave the default selection and press Enter. No additional Boost features are required for this project.
- Boost Integrations: Press Enter again to continue without enabling any Boost integrations.
- AI Agents: When prompted for an AI agent, select Amp. This will add the Amp configuration while the application is being created.
After the installation is complete, Laravel will create the new consent application with all the required files, dependencies, and default project structure in place.
Step # 2: Move Into the Consent Project.
Once the Laravel application has been created, switch your terminal to the newly generated project directory. You can use PowerShell, Command Prompt, Git Bash, or VS Code’s integrated terminal for this. Run the following command.
cd consent
This places you inside the Laravel application directory, where you can access the project files and execute Laravel Artisan commands.
Step # 3 : Add the Laravel Cookie Consent Package.
With the project directory ready, install the cookie consent package through Composer. Make sure you’re running the command from inside the consent project.
composer require devrabiul/laravel-cookie-consent
Composer will fetch the package along with its required dependencies and add it to the application. It provides the functionality needed to show a cookie consent banner on the website, making it easier to inform visitors about cookie usage and manage their cookie preferences. After installation, the consent banner can be configured to match the application's content, including its text, action buttons, and relevant privacy links.
Step # 4 : Publish the Package Configuration.
Now that the package is installed, publish its configuration so you can adjust its available settings within the Laravel application. Run the following command from your project directory.
php artisan vendor:publish --provider="Devrabiul\CookieConsent\CookieConsentServiceProvider"
After the command completes, Laravel will add the package configuration file here: config/laravel-cookie-consent.php. This file gives you control over various cookie consent options, including the banner content, appearance, layout, and cookie-related settings. The package's required CSS and JavaScript assets are handled automatically, so there is no need to publish them separately.
Step # 5 : Build the Master Layout.
Let’s create a reusable Blade layout that will act as the common structure for the application. Instead of repeating the same navigation, footer, assets, and cookie consent code across individual pages, we’ll keep these shared elements in one master template. Create the following file: resources/views/layouts/master.blade.php. Then add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shotcut - Laravel 13 Cookie Consent</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Vite Assets -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Cookie Consent Styles -->
{!! CookieConsent::styles() !!}
</head>
<body class="bg-slate-950 text-slate-200 min-h-screen flex flex-col">
<!-- Navbar -->
<header class="border-b border-slate-800 bg-slate-950/95">
<nav class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<a href="{{ url('/') }}"
class="text-xl font-bold tracking-tight text-white">
Code Shotcut
</a>
<div class="hidden md:flex items-center gap-8 text-sm">
<a href="{{ url('/') }}"
class="text-slate-300 hover:text-white transition">
Home
</a>
<a href="#about"
class="text-slate-300 hover:text-white transition">
About
</a>
<a href="#contact"
class="text-slate-300 hover:text-white transition">
Contact
</a>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="flex-1">
@yield('content')
</main>
<!-- Footer -->
<footer id="contact" class="border-t border-slate-800 bg-slate-950">
<div class="max-w-7xl mx-auto px-6 py-10 text-center">
<p class="text-sm text-slate-500 mb-4">
© {{ date('Y') }} Code Shotcut. All rights reserved.
</p>
<div class="flex justify-center gap-6 text-sm">
<a href="https://codeshotcut.com"
target="_blank"
rel="noopener noreferrer"
class="text-slate-400 hover:text-blue-500 transition">
Website
</a>
<a href="https://www.youtube.com/@Codeshotcut"
target="_blank"
rel="noopener noreferrer"
class="text-slate-400 hover:text-red-500 transition">
YouTube
</a>
</div>
</div>
</footer>
<!-- Cookie Consent Scripts -->
{!! CookieConsent::scripts() !!}
</body>
</html>
This layout gives the application a consistent structure while keeping shared elements in a single place. Any Blade view that extends this template will automatically inherit the navigation, footer, Vite assets, and Laravel Cookie Consent styles and scripts.
Step # 6 : Create the Home Page.
With the master layout in place, let’s create the application's main home page. This view will extend the layout we just created and provide the page-specific content inside the @section('content') section. Create the following file: resources/views/home.blade.php. Then add the following code.
@extends('layouts.master')
@section('content')
<!-- Hero Section -->
<section class="relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 py-24 lg:py-32">
<div class="max-w-3xl mx-auto text-center">
<span class="inline-flex items-center rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-2 text-sm text-blue-400 mb-6">
Laravel 13 Tutorial
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-white">
Welcome to
<span class="text-blue-500">Code Shotcut</span>
</h1>
<p class="mt-6 text-lg leading-8 text-slate-400">
Learn practical Laravel tutorials with clear,
step-by-step examples and real-world development tips.
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<!-- Website Button -->
<a href="https://codeshotcut.com"
target="_blank"
rel="noopener noreferrer"
class="rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white hover:bg-blue-500 transition">
Visit Code Shotcut
</a>
<!-- YouTube Button -->
<a href="https://www.youtube.com/@Codeshotcut"
target="_blank"
rel="noopener noreferrer"
class="rounded-lg border border-slate-700 px-6 py-3 text-sm font-semibold text-slate-300 hover:bg-slate-900 hover:text-white transition">
Visit YouTube Channel
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="border-t border-slate-800 bg-slate-900/40">
<div class="max-w-4xl mx-auto px-6 py-20">
<div class="text-center mb-10">
<span class="text-sm font-semibold uppercase tracking-wider text-blue-500">
About Code Shotcut
</span>
<h2 class="mt-3 text-3xl font-bold text-white">
Practical Laravel Learning
</h2>
</div>
<div class="space-y-5 text-center text-slate-400 leading-7">
<p>
Code Shotcut is a YouTube channel and website focused on
practical Laravel tutorials, coding guides, and real-world
development techniques.
</p>
<p>
Visit our
<a href="https://codeshotcut.com"
target="_blank"
rel="noopener noreferrer"
class="text-blue-500 hover:text-blue-400 transition">
website
</a>
or subscribe to the
<a href="https://www.youtube.com/@Codeshotcut"
target="_blank"
rel="noopener noreferrer"
class="text-blue-500 hover:text-blue-400 transition">
Code Shotcut YouTube channel
</a>
for step-by-step tutorials, useful tips, and hands-on
Laravel implementations.
</p>
</div>
</div>
</section>
@endsection
The home view now uses the shared master layout while keeping its own hero and About sections separate. This keeps the Blade templates organized and allows the common site elements to remain managed from a single layout file.
Step # 7 : Update the Route.
Now that the home page is ready, we need to connect it with Laravel's root URL. This way, whenever someone visits / in the browser, Laravel will load the home view we created earlier. Open the following file: routes/web.php and update the route.
Route::get('/', function () {
return view('home');
});
This route tells Laravel to return the home Blade view whenever the root URL (/) is accessed. Since the home view extends the master layout, the page will also include the shared navigation, footer, and cookie consent functionality.
Step # 8 : Test the DevRabiul Cookie Consent Package.
Everything is now connected, so it’s time to check whether the cookie consent banner is working correctly. Start the Laravel development server from your project directory.
php artisan serve
Now open http://127.0.0.1:8000 in your browser. You should see the home page with the cookie consent banner. If the banner appears correctly, it confirms that the DevRabiul Laravel Cookie Consent package is working as expected and is being loaded properly through the master layout.
Step # 9 : Configure and Personalize the Cookie Consent Banner.
To customize the cookie consent banner's text, colors, or theme, open the configuration file: config/laravel-cookie-consent.php. You can set the banner theme using the theme_preset option.
'theme_preset' => env('COOKIE_CONSENT_THEME_PRESET', 'modern-blue'),
This will display the banner using the modern-blue theme. You can also configure cookie categories and control whether they are locked or optional.
'cookie_categories' => [
'necessary' => [
'enabled' => true,
'locked' => false, // Locked by default; set it to false to allow customization
'title' => 'Essential Cookies',
'description' => 'These cookies are essential for the website to function properly.',
],
// Analytics, marketing, and preferences categories are configured below.
],
The configuration also includes analytics, marketing, and preferences cookie categories. Each category can be enabled or disabled, customized with its own title and description, and configured with a JavaScript action when required.
Other options you can configure include:
'cookie_title' => 'Cookie Disclaimer',
'cookie_description' => 'This website uses cookies to enhance your browsing experience, analyze site traffic, and personalize content.',
'cookie_accept_btn_text' => 'Accept all',
'cookie_reject_btn_text' => 'Reject all',
'cookie_preferences_btn_text' => 'Manage preferences',
'cookie_preferences_save_text' => 'Save preferences',
'cookie_modal_title' => 'Cookie Preferences',
'cookie_modal_intro' => 'You can customize your cookie preferences below.',
Any changes made to these settings will automatically be reflected on all pages using the master layout.
Conclusion
By following this guide, you’ve successfully added a GDPR-friendly cookie consent banner to your Laravel 13 application using the DevRabiul Laravel Cookie Consent package. This setup provides an easy way to display a customizable consent banner, manage different cookie categories, and control cookie preferences across your application through the master layout. You can further adjust the theme, cookie title and description, buttons, policy links, and cookie category settings to match your application's requirements.
For more details, check out the official DevRabiul Laravel Cookie Consent documentation: https://github.com/devrabiul/laravel-cookie-consent.
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