Translations & Localization
Translations & Localization
CookieDialog supports full text customization and multi-language setups through the texts
configuration option.
Default Text Labels
These are the default English labels used by CookieDialog:
{ title: 'Cookie Preferences', description: 'We use cookies to improve your experience on our website.', acceptAll: 'Accept All', rejectAll: 'Reject All', manageSettings: 'Manage Settings', save: 'Save Preferences', close: 'Close', necessary: 'Necessary', analytics: 'Analytics', marketing: 'Marketing', privacyPolicy: 'Privacy Policy'}
Basic Text Customization
Override any text by providing a texts
object:
CookieDialog.init({ texts: { title: 'Cookie Settings', description: 'This website uses cookies to enhance your browsing experience.', acceptAll: 'Accept All Cookies', rejectAll: 'Only Essential' }});
Multi-Language Support
Method 1: Dynamic Language Detection
// Detect user's languageconst userLang = navigator.language.substring(0, 2);
const translations = { en: { title: 'Cookie Preferences', description: 'We use cookies to improve your experience.', acceptAll: 'Accept All', rejectAll: 'Reject All' }, es: { title: 'Preferencias de Cookies', description: 'Utilizamos cookies para mejorar su experiencia.', acceptAll: 'Aceptar Todas', rejectAll: 'Rechazar Todas' }, fr: { title: 'Préférences des Cookies', description: 'Nous utilisons des cookies pour améliorer votre expérience.', acceptAll: 'Tout Accepter', rejectAll: 'Tout Rejeter' }};
CookieDialog.init({ texts: translations[userLang] || translations.en});
Method 2: Server-Side Language
// Assuming you have a server-side language variableconst serverLang = '{{ user_language }}'; // PHP, JSP, etc.
const getTexts = (lang) => { switch(lang) { case 'de': return { title: 'Cookie-Einstellungen', description: 'Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.', acceptAll: 'Alle Akzeptieren', rejectAll: 'Alle Ablehnen' }; case 'it': return { title: 'Impostazioni Cookie', description: 'Utilizziamo i cookie per migliorare la tua esperienza.', acceptAll: 'Accetta Tutti', rejectAll: 'Rifiuta Tutti' }; default: return {}; // Use defaults }};
CookieDialog.init({ texts: getTexts(serverLang)});
Complete Translation Examples
Spanish
CookieDialog.init({ texts: { title: 'Configuración de Cookies', description: 'Utilizamos cookies para mejorar su experiencia en nuestro sitio web.', acceptAll: 'Aceptar Todas', rejectAll: 'Rechazar Opcionales', manageSettings: 'Gestionar Configuración', save: 'Guardar Preferencias', close: 'Cerrar', necessary: 'Necesarias', analytics: 'Analíticas', marketing: 'Marketing', privacyPolicy: 'Política de Privacidad' }});
German
CookieDialog.init({ texts: { title: 'Cookie-Einstellungen', description: 'Wir verwenden Cookies, um Ihre Erfahrung auf unserer Website zu verbessern.', acceptAll: 'Alle Akzeptieren', rejectAll: 'Optionale Ablehnen', manageSettings: 'Einstellungen Verwalten', save: 'Einstellungen Speichern', close: 'Schließen', necessary: 'Notwendig', analytics: 'Analytisch', marketing: 'Marketing', privacyPolicy: 'Datenschutzrichtlinie' }});
French
CookieDialog.init({ texts: { title: 'Paramètres des Cookies', description: 'Nous utilisons des cookies pour améliorer votre expérience sur notre site.', acceptAll: 'Tout Accepter', rejectAll: 'Rejeter les Optionnels', manageSettings: 'Gérer les Paramètres', save: 'Sauvegarder les Préférences', close: 'Fermer', necessary: 'Nécessaires', analytics: 'Analytiques', marketing: 'Marketing', privacyPolicy: 'Politique de Confidentialité' }});
Category Descriptions
You can also translate category descriptions:
CookieDialog.init({ categories: [ { id: 'necessary', name: 'Esenciales', required: true, description: 'Necesarias para el funcionamiento básico del sitio web' }, { id: 'analytics', name: 'Analíticas', required: false, description: 'Nos ayudan a entender cómo los visitantes usan nuestro sitio' } ]});
Advanced Multi-Language Setup
For complex multi-language sites, create a translation helper:
class CookieDialogTranslations { constructor() { this.translations = { en: { texts: { title: 'Cookie Preferences', description: 'We use cookies to improve your experience.', acceptAll: 'Accept All', rejectAll: 'Reject All' }, categories: [ { id: 'necessary', name: 'Necessary', required: true }, { id: 'analytics', name: 'Analytics', required: false } ] }, es: { texts: { title: 'Preferencias de Cookies', description: 'Utilizamos cookies para mejorar su experiencia.', acceptAll: 'Aceptar Todas', rejectAll: 'Rechazar Todas' }, categories: [ { id: 'necessary', name: 'Necesarias', required: true }, { id: 'analytics', name: 'Analíticas', required: false } ] } }; }
init(language = 'en') { const config = this.translations[language] || this.translations.en;
CookieDialog.init({ texts: config.texts, categories: config.categories }); }}
// Usageconst translator = new CookieDialogTranslations();translator.init(navigator.language.substring(0, 2));
RTL Language Support
For right-to-left languages like Arabic or Hebrew, you may need custom CSS:
.cookiedialog[dir="rtl"] { text-align: right; direction: rtl;}
.cookiedialog[dir="rtl"] .cookiedialog-buttons { flex-direction: row-reverse;}
Then apply the direction:
CookieDialog.init({ texts: { title: 'تفضيلات ملفات تعريف الارتباط', description: 'نستخدم ملفات تعريف الارتباط لتحسين تجربتك.', acceptAll: 'قبول الكل', rejectAll: 'رفض الاختيارية' }});
// Set direction on dialog elementdocument.addEventListener('DOMContentLoaded', () => { const dialog = document.querySelector('.cookiedialog'); if (dialog) dialog.setAttribute('dir', 'rtl');});