Ask your agent to integrate React/Vite

Integrate Mayicookies into this vite website. First inspect the framework, root document, and all analytics/marketing loaders. Use @supaapps/mayicookies or the official hosted loader, not a homemade banner.

Public site key: REPLACE_WITH_YOUR_PUBLIC_SITE_KEY
API URL: https://api.mayicookies.com/api
Runtime: npm; Google integration: gtm

Use the matching guide at https://mayicookies.com/en/tutorials/agent-react/ and the framework installation guide. Put denied consent defaults before GTM/gtag.js, never only in useEffect. Do not use the direct Google bridge with the GTM template. Block optional non-GTM scripts with type="text/plain" and data-mayicookies-category. Add a persistent Cookie settings button. Do not assume autoBlock intercepts arbitrary scripts.

Never ask for passwords, access tokens, or private API credentials. Do not modify billing, accounts, or GTM permissions. Report GTM account steps separately from code changes. For Basic Consent Mode, block Google tags until consent; denied defaults alone can still allow cookieless pings.

Show the changed files and prove in a fresh browser: no optional cookies before consent; reject/analytics-only/accept update correctly; withdrawal works; a saved consent appears in Mayicookies; defaults remain denied with slow loading. Do not claim legal compliance or certification.

npm install @supaapps/mayicookies

<script>
window.dataLayer = window.dataLayer || [];
window.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();
window.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {
  window.__mayicookiesConsentModeListeners.add(listener);
  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };
};
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',
  analytics_storage: 'denied', functionality_storage: 'denied',
  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500
});
</script>

'use client';
import { useEffect } from 'react';
import { Mayicookies } from '@supaapps/mayicookies';

export function MayicookiesProvider() {
  useEffect(() => {
    void Mayicookies.init({
      siteKey: "REPLACE_WITH_YOUR_PUBLIC_SITE_KEY",
      apiUrl: "https://api.mayicookies.com/api",
      mode: 'auto',
      locale: 'auto',
      autoBlock: true,
      googleConsentMode: { waitForUpdate: 500 },
    });
  }, []);
  return null;
}

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
window.dataLayer = window.dataLayer || [];
window.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();
window.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {
  window.__mayicookiesConsentModeListeners.add(listener);
  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };
};
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',
  analytics_storage: 'denied', functionality_storage: 'denied',
  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500
});
</script>
    
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

// src/main.tsx
import { createRoot } from 'react-dom/client';
import App from './App';
import { MayicookiesProvider } from './MayicookiesProvider';

createRoot(document.getElementById('root')!).render(
  <><MayicookiesProvider /><App /></>,
);

<script type="text/plain" data-mayicookies-category="analytics" src="https://YOUR_ANALYTICS_HOST/script.js"></script>

'use client';
import { Mayicookies } from '@supaapps/mayicookies';

export function CookieSettings() {
  return <button type="button" onClick={() => Mayicookies.openPreferences()}>Cookie settings</button>;
}