Chat en nuevo tab

1// AsisteClick.com. 2// Este script en javascript vainilla muestra un botón de chat flotante 3// y abre el chat web en un nuevo tab. 4 5// Parámetros 6var chatbot_url = "https://app.asisteclick.com/v3/request.php?id=6851208-4237" 7var settings = window.asisteclickSettings || {}; 8var text = settings.text || 'Estamos en línea! '; 9var textSize = settings.textSize || '24px'; 10var textColor = settings.textColor || '#ffffff'; 11var backgroundColor = settings.backgroundColor || '#008CBA'; 12var borderRadius = settings.borderRadius || '50px'; // Aumento del radio de borde para un diseño más redondo 13var width = settings.width || '300px'; 14var height = settings.height || '60px'; 15chatbot_url = settings.chatbot_url || chatbot_url; 16 17// Construct the CSS string using the settings 18var css = '#asisteclick-button { position: fixed; bottom: 20px; right: 20px; background-color: ' + backgroundColor + '; border: none; color: ' + textColor + '; width: ' + width + '; height: ' + height + '; text-align: center; line-height: ' + height + '; font-size: ' + textSize + '; cursor: pointer; border-radius: ' + borderRadius + '; display: flex; justify-content: center; align-items: center; padding: 10px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }' + 19 '#asisteclick-button:hover { background-color: ' + shadeColor(backgroundColor, -20) + '; transform: translateY(-5px); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); }'; // Añadido estilo para hover 20 21// Add the CSS to the page 22var head = document.head || document.getElementsByTagName('head')[0]; 23var style = document.createElement('style'); 24head.appendChild(style); 25style.type = 'text/css'; 26if (style.styleSheet) { 27 style.styleSheet.cssText = css; 28} else { 29 style.appendChild(document.createTextNode(css)); 30} 31 32// Create the button and set its properties 33var button = document.createElement('button'); 34button.id = 'asisteclick-button'; 35button.innerHTML = text; 36button.onclick = function() { 37 window.open(chatbot_url, '_blank'); 38}; 39document.body.appendChild(button); 40 41// Función para oscurecer el color en hover 42function shadeColor(color, percent) { 43 var R = parseInt(color.substring(1,3),16); 44 var G = parseInt(color.substring(3,5),16); 45 var B = parseInt(color.substring(5,7),16); 46 R = parseInt(R * (100 + percent) / 100); 47 G = parseInt(G * (100 + percent) / 100); 48 B = parseInt(B * (100 + percent) / 100); 49 R = (R<255)?R:255; 50 G = (G<255)?G:255; 51 B = (B<255)?B:255; 52 var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16)); 53 var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16)); 54 var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16)); 55 return "#"+RR+GG+BB; 56}