Widget Generator

<!-- Universal Clarity Consent Widget -->
<script>
  window.klaroConfig = {
    version: 1,
    elementID: 'klaro',
    storageMethod: 'cookie',
    cookieName: 'universal-clarity-consent',
    cookieExpiresAfterDays: 365,
    default: false,
    mustConsent: false,
    acceptAll: true,
    hideDeclineAll: false,
    hideLearnMore: false,
    noticeAsModal: false,
    
    translations: {
      en: {
        consentModal: {
          title: 'We value your privacy',
          description: 'We use cookies to enhance your browsing experience and analyze our traffic.',
        },
        consentNotice: {
          changeDescription: 'There were changes since your last visit, please renew your consent.',
          description: 'We use cookies to enhance your browsing experience and analyze our traffic.',
          learnMore: 'Customize',
        },
        purposes: {
          analytics: 'Analytics',
          marketing: 'Marketing',
          functional: 'Functional',
        },
        ok: 'Accept All',
        decline: 'Deny',
        save: 'Save',
        poweredBy: 'Powered by Universal Clarity',
      },
    },
    
    services: [
      {
        name: 'analytics',
        title: 'Analytics Cookies',
        purposes: ['analytics'],
        required: false,
      },
      {
        name: 'marketing',
        title: 'Marketing Cookies',
        purposes: ['marketing'],
        required: false,
      },
      {
        name: 'functional',
        title: 'Functional Cookies',
        purposes: ['functional'],
        required: true,
      },
    ],
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/klaro.js"></script>
<style>
  /* Universal Clarity Custom Styling */
  .klaro .cookie-notice {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    padding: 24px !important;
    max-width: 600px !important;
    
    
    left: 50% !important; transform: translateX(-50%) !important;
    bottom: 20px !important;
  }
  
  .klaro .cn-ok {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
  }
  
  .klaro .cn-ok:hover {
    opacity: 0.9 !important;
  }
  
  .klaro .cn-decline {
    background: #6b7280 !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
  }
  
  .klaro .cn-learn-more {
    color: #2563eb !important;
    text-decoration: none !important;
    font-weight: 500 !important;
  }
  
  .klaro .cookie-notice .cn-body {
    margin-bottom: 16px !important;
  }
  
  .klaro .powered-by {
    text-align: center !important;
    margin-top: 16px !important;
    font-size: 12px !important;
    color: #9ca3af !important;
  }
  
  .klaro .powered-by a {
    color: #2563eb !important;
    text-decoration: none !important;
  }
  
  @media (max-width: 768px) {
    .klaro .cookie-notice {
      left: 10px !important;
      right: 10px !important;
      bottom: 100px !important;
      max-width: calc(100% - 20px) !important;
      transform: none !important;
    }
  }
</style>
<!-- End Universal Clarity Widget -->