{"id":2755,"date":"2023-12-12T11:06:22","date_gmt":"2023-12-12T10:06:22","guid":{"rendered":"https:\/\/miramiweb.com\/elementorprobarato\/?p=2755"},"modified":"2023-12-12T19:51:05","modified_gmt":"2023-12-12T18:51:05","slug":"boton-de-whatsapp-sin-plugins","status":"publish","type":"post","link":"https:\/\/miramiweb.com\/elementorprobarato\/en\/boton-de-whatsapp-sin-plugins\/","title":{"rendered":"Whatsapp button without plugins"},"content":{"rendered":"
Hay Plugins como el famoso Joinchat<\/a> que nos a\u00f1ade el t\u00edpico bot\u00f3n de contacto a trav\u00e9s de Whatsapp, pero no es necesario<\/b> instalar un plugin para algo tan simple, especialmente si usamos Elementor Pro.<\/p> Con una simple plantilla conseguimos exactamente lo mismo que con un plugin y as\u00ed nos lo ahorramos.<\/p> En esta Web puedes ver como lo tengo hecho yo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ya que va a ser un elemento est\u00e1tico que tiene que estar por encima de todos los otros elementos, usaremos una plantilla de ventana emergente (o Pop up)<\/b>.<\/p> Para crearla te vas al Backoffice y en Plantillas (debajo de Elementor) seleccionas \u00abMensajes emergentes\u00bb y haces clic en el bot\u00f3n \u00abA\u00f1adir nueva plantilla\u00bb que hay en la parte superior de la p\u00e1gina.<\/p> Te deber\u00eda salir esto:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ponle un nombre como \u00abBot\u00f3n de Whatsapp\u00bb y crea la plantilla.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Si no te quieres complicar la vida, puedes descargar la plantilla del que yo tengo en mi web haciendo clic aqu\u00ed.<\/a><\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Elementor te va a proponer distintos ejemplos de Plantillas para ventanas emergentes, pero no vamos a usar ninguna<\/b>, simplemente cierra esa ventana porque lo vamos a dise\u00f1ar manualmente.<\/p> \u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Vamos a a\u00f1adir un contenedor de dos columnas, dependiendo de que tengas activado el Flexbox o no, te aparecer\u00e1 una caja similar a esta:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t \u00bfPorqu\u00e9 dos columnas? te habr\u00e1s fijado que en mi bot\u00f3n aparece a los pocos segundos un puntito rojo que incita a los usuarios a hacer clic, el icono va en una columna y el puntito rojo en la otra.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ahora tienes que arrastrar un icono de WhatsApp en la columna izquierda y un icono \u00abcircle\u00bb en la derecha, y darles el tama\u00f1o y color que quieras.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t El resultado ser\u00eda algo as\u00ed:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t En los ajustes de la ventana emergente que encontrar\u00e1s en la parte inferior izquierda de la pantalla, debes indicar el tama\u00f1o de la misma, yo he puesto un tama\u00f1o de 100 pixeles para todo el conjunto.<\/p> La posici\u00f3n que he escogido es inferior derecha, y tambi\u00e9n he anulado la superposici\u00f3n y el bot\u00f3n de cerrar, y para que llame un poco la atenci\u00f3n le he puesto una animaci\u00f3n de entrada \u00abFade In Up<\/b>\u00ab, mas tarde veremos como dar un peque\u00f1o retraso a la animaci\u00f3n.<\/p> En el estilo he indicado que el fondo ha de ser transparente y en avanzado he indicado un peque\u00f1o margen inferior para que no tape el bot\u00f3n de volver al inicio.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t Y muy importante, para que la ventana no se cierre cuando se hace clic sobre una parte de la p\u00e1gina o desde la tecla ESC, tenemos que indicar que no queremos que eso suceda.<\/p> As\u00ed que desde los ajustes de la ventana emergente, en la pesta\u00f1a avanzado, tenemos que dejar marcado:\u00a0Evitar el cierre al superponerse<\/strong>, y\u00a0<\/span>Evitar el cierre con la tecla ESC.<\/span><\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Y para que te quede perfecto, selecciona el icono \u00abcircle<\/b>\u00bb y desde la pesta\u00f1a Avanzado le das un margen de unos 20px por la izquierda.<\/p> Si quieres que el puntito rojo aparezca un poco despu\u00e9s de que aparezca el icono de Whatsapp, debes ir a Avanzado \/ efectos de movimiento (escoge el que quieras), y darle una animaci\u00f3n de entrada con un retraso de 2000 ms.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ya tenemos en nuestra p\u00e1gina el icono con el tama\u00f1o y color que queremos, ahora nos falta enlazar el icono de Whatsapp para que abra la api de Whatsapp.<\/p>\n https:\/\/api.whatsapp.com\/sendphone=+34000000000&text=<\/a>Te%20escribo%20desde%20indicaelnombredetuweb%20%C2%BF\u00bfhablamos? <\/a><\/p>\n Ahora debes introducir tu tel\u00e9fono de contacto y si lo deseas, un texto por defecto.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t C\u00f3mo es l\u00f3gico, esta ventana emergente se tiene que mostrar en toda la web, por lo tanto tenemos que indicar esa condici\u00f3n.<\/p> Para ello, al lado del bot\u00f3n de guardar \/ actualizar<\/b>, clicaremos la flecha para que nos aparezca la opci\u00f3n de los ajustes de publicaci\u00f3n.<\/p> En la primera pesta\u00f1a, indicaremos que la plantilla se debe visualizar en todo el sitio<\/b>, y en la segunda pesta\u00f1a indicaremos que se tiene que disparar al cargar la p\u00e1gina<\/b> y con un retardo de un segundo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\u00bfQu\u00e9 tipo de plantilla hay que crear?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
El dise\u00f1o de la plantilla<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
Dar color y tama\u00f1o al icono de Whatsapp<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
Ajustes de la ventana emergente<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
Otros ajustes<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
Las condiciones de la ventana emergente<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t