🎨 Ejemplos de Personalización Avanzada del Widget

StickyWork.init({ businessId: 1, apiUrl: 'http://localhost:3000', mode: 'modal', trigger: '#dark-theme-btn', // Colores - Tema Oscuro primaryColor: '#a78bfa', secondaryColor: '#8b5cf6', backgroundColor: '#1e293b', textColor: '#f1f5f9', textSecondaryColor: '#cbd5e1', // Tipografía fontFamily: 'Inter, system-ui, sans-serif', borderRadius: '12px', borderRadiusInput: '10px', // Inputs con fondo oscuro inputBackgroundColor: '#0f172a', inputTextColor: '#f1f5f9', inputBorderColor: '#334155', // Botones buttonBackgroundColor: 'linear-gradient(135deg, #a78bfa, #8b5cf6)', boxShadow: '0 20px 50px rgba(0,0,0,0.5)' });

StickyWork.init({ businessId: 1, apiUrl: 'http://localhost:3000', mode: 'modal', trigger: '#minimal-theme-btn', // Colores - Minimalista primaryColor: '#000000', secondaryColor: '#666666', backgroundColor: '#ffffff', textColor: '#000000', textSecondaryColor: '#666666', // Tipografía elegante fontFamily: 'Helvetica Neue, Arial, sans-serif', fontSize: '0.95rem', fontWeight: '300', fontWeightBold: '500', // Bordes finos borderRadius: '4px', borderRadiusInput: '2px', borderRadiusButton: '0px', borderWidth: '1px', borderColor: '#e0e0e0', // Espaciado generoso padding: '3rem', spacing: '2rem', // Sin sombras boxShadow: 'none', boxShadowButton: 'none', // Efecto hover sutil buttonHoverTransform: 'none' });

StickyWork.init({ businessId: 1, apiUrl: 'http://localhost:3000', mode: 'modal', trigger: '#colorful-theme-btn', // Colores - Vibrantes primaryColor: '#f472b6', secondaryColor: '#facc15', backgroundColor: '#fef3c7', textColor: '#92400e', textSecondaryColor: '#b45309', successColor: '#34d399', // Tipografía juguetona fontFamily: 'Comic Sans MS, Quicksand, sans-serif', fontSizeTitle: '2.2rem', // Bordes redondeados borderRadius: '25px', borderRadiusInput: '15px', borderRadiusButton: '20px', borderWidth: '3px', borderColor: '#fbbf24', // Inputs coloridos inputBackgroundColor: '#fffbeb', inputBorderColor: '#fbbf24', // Botones con gradiente buttonBackgroundColor: 'linear-gradient(135deg, #f472b6, #fb923c, #facc15)', // Sombras coloridas boxShadow: '0 15px 40px rgba(244, 114, 182, 0.3)', boxShadowButton: '0 10px 30px rgba(244, 114, 182, 0.4)', // Animación divertida buttonHoverTransform: 'translateY(-5px) scale(1.02)' });

StickyWork.init({ businessId: 1, apiUrl: 'http://localhost:3000', mode: 'modal', trigger: '#elegant-theme-btn', // Colores - Premium primaryColor: '#d97706', secondaryColor: '#92400e', backgroundColor: '#fffbeb', textColor: '#78350f', textSecondaryColor: '#92400e', // Tipografía elegante fontFamily: 'Georgia, Garamond, serif', fontSize: '1.05rem', fontSizeTitle: '2rem', fontWeight: '400', fontWeightBold: '700', // Formas sofisticadas borderRadius: '8px', borderRadiusInput: '6px', borderWidth: '2px', borderColor: '#fbbf24', borderColorFocus: '#d97706', // Inputs premium inputBackgroundColor: '#ffffff', inputBorderColor: '#fbbf24', // Botón con gradiente dorado buttonBackgroundColor: 'linear-gradient(135deg, #d97706, #f59e0b)', buttonTextColor: '#ffffff', // Sombras elegantes boxShadow: '0 25px 60px rgba(217, 119, 6, 0.15)', boxShadowButton: '0 15px 35px rgba(217, 119, 6, 0.25)', boxShadowInput: '0 2px 8px rgba(251, 191, 36, 0.1)', // Transiciones suaves transitionSpeed: '0.4s', animationDuration: '0.5s', buttonHoverTransform: 'translateY(-3px)' });

StickyWork.init({ businessId: 1, apiUrl: 'http://localhost:3000', mode: 'modal', trigger: '#material-theme-btn', // Colores - Material primaryColor: '#1976d2', secondaryColor: '#388e3c', backgroundColor: '#fafafa', textColor: '#212121', textSecondaryColor: '#757575', // Tipografía Roboto fontFamily: 'Roboto, -apple-system, sans-serif', fontSize: '1rem', fontSizeLabel: '0.875rem', // Formas Material borderRadius: '4px', borderRadiusInput: '4px', borderRadiusButton: '4px', borderWidth: '1px', borderColor: '#e0e0e0', // Inputs estilo Material inputBackgroundColor: '#ffffff', paddingInput: '1rem 0.75rem', // Botón Material buttonBackgroundColor: '#1976d2', paddingButton: '0.875rem 1.5rem', // Elevación Material boxShadow: '0 2px 4px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24)', boxShadowButton: '0 4px 8px rgba(0,0,0,0.24)', boxShadowModal: '0 24px 38px rgba(0,0,0,0.14)', // Transiciones Material transitionSpeed: '0.2s', buttonHoverTransform: 'translateY(-2px)' });

StickyWork.init({ // === CONFIGURACIÓN BÁSICA === businessId: 1, apiUrl: 'http://localhost:3000', language: 'es', mode: 'modal', trigger: '#custom-theme-btn', // === COLORES === primaryColor: '#your-primary-color', secondaryColor: '#your-secondary-color', backgroundColor: '#ffffff', textColor: '#1f2937', textSecondaryColor: '#6b7280', errorColor: '#ef4444', successColor: '#10b981', // === TIPOGRAFÍA === fontFamily: 'Your Font, sans-serif', fontSize: '1rem', fontSizeTitle: '1.8rem', fontSizeLabel: '1rem', fontWeight: '400', fontWeightBold: '600', // === BORDES Y FORMA === borderRadius: '15px', borderRadiusInput: '8px', borderRadiusButton: '8px', borderWidth: '2px', borderColor: '#e5e7eb', borderColorFocus: null, // null = usa primaryColor // === ESPACIADOS === padding: '2rem', paddingInput: '0.75rem', paddingButton: '1rem', spacing: '1.5rem', // === SOMBRAS === boxShadow: '0 10px 30px rgba(0,0,0,0.1)', boxShadowModal: '0 20px 60px rgba(0,0,0,0.5)', boxShadowInput: 'none', boxShadowButton: '0 10px 25px rgba(0,0,0,0.15)', // === INPUTS === inputBackgroundColor: null, // null = usa backgroundColor inputTextColor: null, // null = usa textColor inputBorderColor: null, // null = usa borderColor inputPlaceholderColor: '#9ca3af', // === BOTONES === buttonBackgroundColor: null, // null = usa primaryColor buttonTextColor: '#ffffff', buttonHoverTransform: 'translateY(-2px)', buttonDisabledColor: '#9ca3af', // === EFECTOS Y ANIMACIONES === transitionSpeed: '0.3s', animationDuration: '0.3s', // === MODAL ESPECÍFICO === modalOverlayColor: 'rgba(0, 0, 0, 0.7)', modalMaxWidth: '650px', modalMaxHeight: '90vh', modalCloseButtonColor: null, // null = usa secondaryColor modalCloseButtonHoverColor: '#ef4444' });