Skip to main content

Free Standalone Cookie Manager Implementation

  • Standalone Integration (Beta)
    • Currently available for users with an account.
    • Ideal for custom setups and webapps like Laravel, Shopify, Wix, or any other custom website or webapp framework that supports JavaScript and custom code.
    • Sign up for a free account to get started.

Standalone Integration​

Create a free account on Coding-Freaks.com to access the Standalone Cookie Manager in the Admin-Panel. This integration is designed for custom setups and web applications, allowing you to manage cookies and third-party services without relying on a specific CMS.

Embed the following code snippet into your websites Footer or Head to integrate the Standalone Cookie Manager:

<script defer="defer" src="https://coding-freaks.com/cdn/consent/cf-cookie-<your-project-id>.js"></script>

Replace <your-project-id> with your actual project ID from the Coding-Freaks admin panel.

Configuration Options​

Add your Tracking-Scripts, Cookies, and Third-Party Services in the Coding-Freaks Admin Panel to Programmatically manage them on your website. The Standalone Cookie Manager supports various configurations and iFrame Blocking.

Example iFrame Blocking:

Instead of directly embedding YouTube videos, use the following code to ensure they are only loaded after user consent:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" data-cf-blocked="true"></iframe>

This will prevent the iFrame from loading until the user has given consent for YouTube services.

  <div data-service="youtube" data-id="https://www.youtube.com/embed/z-jsd9w4Dmg?si=cOm4_RhlNVPjyLup" data-autoscale="" style="height:515px; width:760px; "></div>

An automatic iFrame blocking is currently not available, in Future-Updates it will automatically block all iFrames from loading until the user has given consent for the respective service automatically.

Custom Javascript Maps​

You can also use custom JavaScript with the data-service attribute to manage Thirdparty services. For example, you can create a map that defines how Services should be handled based on user consent:

<div
         data-service="leaflet"
         id="makemerandom"
         data-autoscale>
 </div>

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
 <script type="text/plain"  data-service="leaflet" src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>


 <script type="text/plain" data-service="leaflet">

     const map = L.map('makemerandom').setView([51.505, -0.09], 13);
        console.log("RUNmap");
     const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);

     const marker = L.marker([51.5, -0.09]).addTo(map)
         .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();

     const circle = L.circle([51.508, -0.11], {
         color: 'red',
         fillColor: '#f03',
         fillOpacity: 0.5,
         radius: 500
     }).addTo(map).bindPopup('I am a circle.');

     const polygon = L.polygon([
         [51.509, -0.08],
         [51.503, -0.06],
         [51.51, -0.047]
     ]).addTo(map).bindPopup('I am a polygon.');


     const popup = L.popup()
         .setLatLng([51.513, -0.09])
         .setContent('I am a standalone popup.')
         .openOn(map);

     function onMapClick(e) {
         popup
             .setLatLng(e.latlng)
             .setContent(`You clicked the map at ${e.latlng.toString()}`)
             .openOn(map);
     }

     map.on('click', onMapClick);

 </script>