{"id":2755,"date":"2023-12-12T11:06:22","date_gmt":"2023-12-12T10:06:22","guid":{"rendered":"https:\/\/elementorprobarato.com\/?p=2755"},"modified":"2024-11-07T17:16:02","modified_gmt":"2024-11-07T16:16:02","slug":"boton-de-whatsapp-sin-plugins","status":"publish","type":"post","link":"https:\/\/elementorprobarato.com\/en\/boton-de-whatsapp-sin-plugins\/","title":{"rendered":"Whatsapp button without plugins"},"content":{"rendered":"
<\/a>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, pero si no quieres hacerlo, te dejo el archivo .json para que lo descargues, y as\u00ed te ahorras el trabajo<\/b>.<\/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 Si has seguido los pasos correctamente, tendr\u00e1s tu bot\u00f3n de WhatsApp sin plugins, y dise\u00f1ado \u00edntegramente a tu gusto.<\/p> \u00bfPrefieres usar el que he hecho yo? para ello deber\u00e1s descargarlo e importarlo en tu web.<\/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 Haz Clic en este enlace<\/strong><\/a> y descarga desde Drive el archivo .json que contiene el bot\u00f3n de Whatsapp flotante (con o sin el puntito rojo, el que mas te guste).<\/p>\n A continuaci\u00f3n, entra en Plantillas \/ Mensajes emergentes<\/b> y en la parte superior de la pantalla, haz clic en el bot\u00f3n \u00abIMPORTAR PLANTILLAS<\/b>\u00ab<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Lo mas probable es que te salga un aviso inform\u00e1ndote de que los archivos .json pueden ser inseguros, clica en Seguir para poder continuar.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ahora que ya tienes tu plantilla subida, la podr\u00e1s ver en la lista de Plantillas \/ Ventanas emergentes<\/strong>.<\/span><\/p> Tienes que hacer clic en Editar con elementor<\/strong>.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Una vez dentro del editor de elementor, en el enlace que hay en el icono de Whatsapp, tienes que poner tu n\u00famero de tel\u00e9fono y el mensaje personalizado que desees.<\/span><\/p> El que vas a encontrar es:<\/span><\/p> https:\/\/api.whatsapp.com\/send phone=+34000000000&text=Te%20escribo%20desde….<\/p> Pero tu puedes poner el mensaje que quieras, o simplemente no poner ninguno.<\/p> Recuerda que entre cada palabra, para que se muestre un espacio debes escribir el comando %20<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ahora guarda tu ventana emergente.<\/p> La primera vez que guardes te va a pedir las condiciones de visualizaci\u00f3n, f\u00edjate en las im\u00e1genes que te muestro a continuaci\u00f3n y configura las condiciones.<\/p> Como es l\u00f3gico, selecciona que se muestre en Todo el sitio<\/strong>, y ahora clica en Next<\/b> para indicar en los disparadores\u00a0cuando queremos que aparezca<\/b>, yo he puesto que se muestre al cabo de un segundo, pero tambi\u00e9n puedes escoger que aparezca al hacer scroll u otra de las opciones.<\/p> Y si quieres, tambien puedes indicar en Reglas avanzadas<\/strong>, que se muestre tras visitar la p\u00e1gina en cierto numero de ocasiones u otras reglas, pero yo eso no lo voy a tocar, asi que clicas en Guardar y cerrar<\/b>.<\/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\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
Como descargar e importar la plantilla que yo he hecho<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t