Saltar al contenido
Posted 4 años ago by Aure
Piso en juan 23 de valencia 95000€ 70m2 2 habitaciones Comedor cocina Galería Aire acondicionado Puertas lacadas en blanco Parquet
Apartamento / Valencia / 1329 views / Popular Presentado
5/5 (3)
{
0.6);
}
.whatsapp-button svg {
width: 36px;
height: 36px;
}
.whatsapp-button .status-indicator {
position: absolute;
bottom: 4px;
right: 4px;
width: 16px;
height: 16px;
background: #4ade80;
border-radius: var(--radius-full);
border: 2px solid white;
display: none;
}
.whatsapp-button.online .status-indicator {
display: block;
}
/* Panel lateral */
.whatsapp-panel {
position: absolute;
bottom: 90px;
right: 15px;
width: 360px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: translateX(30px) scale(0.95);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 9;
}
.whatsapp-panel.open {
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
}
.panel-header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 1.5rem;
position: relative;
}
.panel-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.2);
border: none;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.panel-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.panel-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.panel-title svg {
width: 28px;
height: 28px;
}
.panel-subtitle {
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.5;
}
.panel-status {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.85rem;
margin-top: 0.5rem;
}
.panel-status.online {
background: rgba(74, 222, 128, 0.3);
}
.panel-body {
padding: 1.5rem;
}
.quick-messages {
margin-bottom: 1.5rem;
}
.quick-messages-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--gray-800);
display: flex;
align-items: center;
gap: 0.5rem;
}
.message-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.message-btn {
background: var(--gray-100);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 1rem;
text-align: left;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
color: var(--gray-800);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.message-btn:hover,
.message-btn.active {
background: rgba(37, 99, 235, 0.08);
border-color: var(--secondary);
transform: translateY(-2px);
}
.message-btn.active {
background: rgba(37, 99, 235, 0.15);
border-width: 3px;
}
.message-title {
font-weight: 600;
font-size: 0.95rem;
}
.message-desc {
font-size: 0.8rem;
color: var(--gray-600);
}
.custom-message {
margin-bottom: 1.5rem;
}
.custom-message textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
font-family: inherit;
font-size: 1rem;
resize: vertical;
min-height: 80px;
transition: var(--transition);
}
.custom-message textarea:focus {
outline: none;
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.panel-footer {
padding: 1.25rem 1.5rem;
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.business-info {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
}
.business-hours {
background: rgba(37, 211, 102, 0.15);
color: var(--accent-dark);
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.85rem;
}
.business-hours.offline {
background: rgba(239, 68, 68, 0.15);
color: #b91c1c;
}
.send-btn {
background: var(--accent);
color: white;
border: none;
padding: 0.85rem 1.75rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}
.send-btn:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.send-btn:disabled {
background: var(--gray-300);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.contact-options {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
justify-content: center;
}
.contact-option {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
transition: var(--transition);
color: var(--gray-700);
}
.contact-option:hover {
background: var(--secondary);
color: white;
transform: translateY(-3px);
}
.contact-option.whatsapp {
background: var(--accent);
color: white;
}
/* Animaciones */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.4s ease forwards;
}
/* Responsive */
@media (max-width: 768px) {
.whatsapp-widget {
bottom: 1.5rem;
right: 1.5rem;
}
.whatsapp-button {
width: 60px;
height: 60px;
}
.whatsapp-panel {
width: 320px;
right: 10px;
}
.message-options {
grid-template-columns: 1fr;
}
.panel-footer {
flex-direction: column;
align-items: stretch;
}
.business-info {
justify-content: center;
}
.demo-container {
padding: 1.5rem;
}
.demo-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.whatsapp-panel {
width: calc(100% - 40px);
right: 20px;
left: 20px;
bottom: 85px;
}
.panel-header {
padding: 1.25rem;
}
.panel-body {
padding: 1.25rem;
}
.message-btn {
padding: 0.85rem;
}
body {
padding: 1rem;
}
.demo-container {
padding: 1.5rem;
}
}
/* Badges de estado */
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
}
.status-online {
background: rgba(74, 222, 128, 0.15);
color: #16a34a;
}
.status-offline {
background: rgba(239, 68, 68, 0.15);
color: #b91c1c;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
}
.status-dot.online {
background: #4ade80;
box-shadow: 0 0 6px #4ade80;
}
.status-dot.offline {
background: #f87171;
}
/* Animación de entrada del widget */
.widget-init {
animation: widgetEntry 0.8s ease-out forwards;
}
@keyframes widgetEntry {
from {
transform: translateX(100px) scale(0.8);
opacity: 0;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
/* Notificación de nuevos mensajes */
.notification-badge {
position: absolute;
top: -6px;
right: -6px;
background: var(--accent);
color: white;
font-size: 0.7rem;
font-weight: bold;
width: 20px;
height: 20px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Toast de confirmación */
.toast {
position: fixed;
bottom: 95px;
right: 20px;
background: white;
color: var(--gray-800);
padding: 1rem 1.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 0.75rem;
transform: translateX(300px);
opacity: 0;
transition: var(--transition);
z-index: 9998;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
.toast.success {
border-left: 4px solid var(--accent);
}
.toast-content {
flex: 1;
}
.toast-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.toast-message {
font-size: 0.9rem;
color: var(--gray-600);
}
.toast-close {
background: none;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: var(--gray-400);
transition: var(--transition);
}
.toast-close:hover {
color: var(--gray-700);
}
/* Estilo para modo offline */
.panel-offline {
text-align: center;
padding: 2rem;
color: var(--gray-600);
}
.panel-offline svg {
width: 64px;
height: 64px;
color: #f87171;
margin-bottom: 1.5rem;
}
.panel-offline h3 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
color: var(--gray-800);
}
.schedule-info {
background: var(--gray-100);
border-radius: var(--radius-lg);
padding: 1.25rem;
margin-top: 1.5rem;
text-align: left;
}
.schedule-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--gray-200);
}
.schedule-item:last-child {
border-bottom: none;
}
.schedule-day {
font-weight: 500;
}
.schedule-hours {
color: var(--secondary);
font-weight: 600;
}
Widget WhatsApp Premium - Aurema Group LLC
Widget flotante profesional con múltiples opciones de mensaje predefinido, horario de atención inteligente y diseño corporativo alineado con la marca Aurema Group.
✨ Características incluidas:
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
Horario inteligente: Widget se oculta automáticamente fuera de horario laboral (9:00 - 18:00 GMT+1)
Mensajes predefinidos: 6 plantillas para diferentes servicios (desarrollo urbanístico, peritaje judicial, estructuración corporativa, etc.)
Personalización total: Editor de mensaje personalizado con placeholder dinámico
Indicador de estado: Muestra si el equipo está disponible en tiempo real
Multiplataforma: Redirección optimizada para móvil y desktop
Diseño premium: Animaciones suaves, efecto pulse en el botón y micro-interacciones
Notificaciones: Toast de confirmación al enviar mensaje
Responsive: Adaptable a móviles, tablets y desktop
Cookie compliance: Sistema de consentimiento integrado
Analytics: Callback para integración con Google Analytics o herramientas de tracking
rel= "stylesheet" href= "https://aurema-group.com/widget-whatsapp.css" /> src= "https://aurema-group.com/widget-whatsapp.js" >
Widget activo en esta página de demostración ↓
¡Mensaje enviado!
Serás redirigido a WhatsApp para continuar la conversación con Aurema Group.
×
Cerrar los ajustes de cookies RGPD
Resumen de privacidad
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
