{"id":12747,"date":"2021-12-04T12:46:54","date_gmt":"2021-12-04T10:46:54","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=12747"},"modified":"2021-12-04T14:20:49","modified_gmt":"2021-12-04T12:20:49","slug":"como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/","title":{"rendered":"C\u00f3mo agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website con HTML y CSS"},"content":{"rendered":"

En otro articulo hemos visto como crear botones de compartir en redes sociales con HTML<\/a>,\u00a0 y en este vamos a ver como agregar un bot\u00f3n Whatsapp<\/strong> para llamadas o chat a tu website.<\/p>\n

Hay una soluci\u00f3n muy f\u00e1cil que nos permite integrar un enlace de clic-para-chatear<\/strong> en cualquier parte de nuestro sitio web y la vamos a ver paso a paso.<\/p>\n

 <\/p>\n

\n

Tabla de Contenidos<\/strong><\/h3>\n
    \n
  1. Utilidad de agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website <\/a><\/li>\n
  2. Generar el c\u00f3digo HTML del bot\u00f3n<\/a><\/li>\n
  3. Generar el c\u00f3digo CSS del bot\u00f3n<\/a><\/li>\n
  4. Agregar un v\u00ednculo personalizado de Whatsapp<\/a><\/li>\n<\/ol>\n<\/article>\n

     <\/p>\n

    \u00bfPorque es \u00fatil agregar un bot\u00f3n de Whatsapp a tu website?<\/h2>\n

    Si encontramos tantos website con este enlace de clic-para-chatear es porque a\u00f1adir un bot\u00f3n Whatsapp a tu website, permitir\u00e1 a tus usuarios y\/o clientes entrar r\u00e1pidamente en contacto contigo.
    \nAdem\u00e1s Espa\u00f1a es uno de los pa\u00edses donde se utiliza m\u00e1s esta aplicaci\u00f3n. Seg\u00fan datos de eMarketer, Whatsapp cuenta con mas de 32 millones de usuarios en el pa\u00eds en 2021.<\/p>\n

    \"\"<\/a><\/p>\n

     <\/p>\n

    Generar el c\u00f3digo HTML del bot\u00f3n<\/h2>\n

    1-Elegir un icono Whatsapp como imagen<\/h3>\n

    Como os dec\u00eda, hay una soluci\u00f3n muy f\u00e1cil para integrar este enlace clic-para-chatear, y para poder empezar vamos a necesitar un icono de Whatsapp. Pod\u00e9is encontrar muy f\u00e1cilmente en internet todo tipo de iconos:<\/p>\n

    – En el repositorio de <\/strong>Fontawesome:<\/strong><\/a>\u00a0descargando una versi\u00f3n SVG del icono o copiando el c\u00f3digo HTML. Ese ultimo requiere de instalar los archivos del repositorio en su proyecto o de poner un script con un kit creado dentro de un perfil en Fontawesome en el <head> de nuestro documento html.<\/p>\n

    <script src=\"https:\/\/kit.fontawesome.com\/808781cc1c.js\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<\/pre>\n
    Si descargamos, la versi\u00f3n SVG, tendremos el c\u00f3digo siguiente:<\/p>\n
    <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fab\" data-icon=\"whatsapp\" class=\"svg-inline--fa fa-whatsapp fa-w-14\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\"><\/path><\/svg>\r\n<\/pre>\n
     <\/p>\n
    – En el repositorio de iconos de una plataforma como Flaticon:\u00a0<\/strong> en este caso podr\u00e9is descargar una versi\u00f3n png o svg del icono.<\/p>\n
    \"icono-whatsapp-flaticon\"<\/a><\/p>\n
    Para este tutorial, utilizare la versi\u00f3n SVG de fontawesome para poder con CSS ponerle el estilo que quiero.<\/p>\n
     <\/p>\n
    2-Crear los elementos HTML<\/h3>\n
    Creamos un div con un enlace al cual del momento no pondremos valor a su atributo href, que englobara la imagen del icono de whatsapp.<\/p>\n
    <div id=\"whatsapp\">\r\n   <a href=\"#\" target=\"_blank\">\r\n     <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fab\" data-icon=\"whatsapp\" class=\"svg-inline--fa fa-whatsapp fa-w-14\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z\"><\/path><\/svg>\r\n   <\/a>\r\n<\/div>\r\n<\/pre>\n
    En el flujo del c\u00f3digo HTML, lo podemos donde queramos. Yo en este caso, lo pondr\u00e9 antes del footer.<\/p>\n
     <\/p>\n
    Generar el c\u00f3digo CSS del bot\u00f3n de Whatsapp<\/h2>\n
    El c\u00f3digo CSS, va a depender de como queremos integrar el bot\u00f3n dentro de nuestro dise\u00f1o. Yo lo voy a poner como un bot\u00f3n flotante (siempre visible) abajo a la derecha de mi p\u00e1gina.<\/p>\n
    Para eso, voy a poner mi elemento con id \u00abWhatsapp\u00bb en position fixed con coordenadas de bottom y right:<\/p>\n
    #whatsapp {\r\n   position: fixed;\r\n   bottom: 20px;\r\n   right:20px;\r\n}\r\n<\/pre>\n
    Una vez, eso hecho, podemos poner estilo a nuestro icono. Primero le dar\u00e9 el tama\u00f1o que me interesa al SVG y le pondr\u00e9 una sombra para hacerlo resaltar de las otros elementos:<\/p>\n
    svg {\r\n   width: 80px;\r\n   filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));\r\n}\r\n<\/pre>\n
    Modifiqu\u00e9 el SVG base de Fontawesome para poder tener un icono redondo, os dejo el c\u00f3digo aqu\u00ed:<\/p>\n
    <svg width=\"80\" height=\"80\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<!-- Created with SVG-edit - https:\/\/github.com\/SVG-Edit\/svgedit-->\r\n<g class=\"layer\">\r\n<title>Layer 1<\/title>\r\n<circle cx=\"40\" cy=\"40\" fill=\"#fff\" id=\"svg_1\" r=\"38\" stroke=\"#000000\" stroke-width=\"0\"\/>\r\n<path d=\"m57.81072,21.975c-4.48928,-4.5 -10.46786,-6.975 -16.82142,-6.975c-13.11429,0 -23.78571,10.67143 -23.78571,23.78571c0,4.18928 1.09286,8.28215 3.17143,11.89286l-3.375,12.32142l12.61072,-3.31072c3.47143,1.89642 7.38215,2.89286 11.36786,2.89286l0.01072,0c13.10358,0 24.01072,-10.67143 24.01072,-23.78571c0,-6.35357 -2.7,-12.32142 -7.18928,-16.82142l-0.00001,-0.00001l-0.00001,0l-0.00002,0.00001zm-16.82142,36.6c-3.55714,0 -7.03928,-0.95357 -10.07143,-2.75357l-0.71785,-0.42857l-7.47858,1.96072l1.99286,-7.29642l-0.47143,-0.75c-1.98215,-3.15 -3.02142,-6.78215 -3.02142,-10.52142c0,-10.89642 8.87143,-19.76786 19.77858,-19.76786c5.28215,0 10.24286,2.05714 13.97143,5.79642c3.72857,3.73928 6.02142,8.7 6.01072,13.98215c0,10.90714 -9.09642,19.77858 -19.99286,19.77858l0,-0.00002l-0.00001,0l-0.00001,-0.00001zm10.84286,-14.80714c-0.58928,-0.3 -3.51429,-1.73572 -4.06072,-1.92857c-0.54643,-0.20358 -0.94286,-0.3 -1.33928,0.3c-0.39642,0.6 -1.53214,1.92857 -1.88571,2.33572c-0.34286,0.39642 -0.69642,0.45 -1.28571,0.15c-3.49286,-1.74643 -5.78571,-3.11785 -8.08928,-7.07143c-0.61072,-1.05 0.61072,-0.975 1.74643,-3.24643c0.19286,-0.39642 0.09642,-0.73928 -0.05357,-1.03928c-0.15,-0.3 -1.33928,-3.225 -1.83214,-4.41429c-0.48215,-1.15714 -0.975,-0.99642 -1.33928,-1.01785c-0.34286,-0.02142 -0.73928,-0.02142 -1.13572,-0.02142c-0.39642,0 -1.03928,0.15 -1.58571,0.73928c-0.54643,0.6 -2.07858,2.03572 -2.07858,4.96072c0,2.925 2.13214,5.75357 2.42142,6.15c0.3,0.39642 4.18928,6.39642 10.15714,8.97858c3.77143,1.62857 5.25,1.76786 7.13572,1.48928c1.14643,-0.17143 3.51429,-1.43572 4.00714,-2.82857c0.49286,-1.39286 0.49286,-2.58215 0.34286,-2.82857c-0.13928,-0.26786 -0.53572,-0.41785 -1.125,-0.70714l-0.00001,-0.00001l0.00002,-0.00001l-0.00002,-0.00001z\" fill=\"currentColor\" id=\"svg_2\"\/>\r\n<\/g>\r\n<\/svg><\/pre>\n
    Ahora le pondr\u00e9 el color corporativo de Whatsapp Green Light. Como estamos trabajando con un SVG, utilizar\u00e9 una propiedad de cambio de estilo que no ser\u00e1 \u00abbackground-color\u00bb pero \u00abfill\u00bb. Dentro del SVG, tengo dos elementos a los cuales voy a aplicar un cambio de estilo, <circle><\/strong> que va a tener el fondo verde, y <path><\/strong> que va a tener un fondo blanco:<\/p>\n
    circle {\r\n   fill: #25d366;\r\n}\r\npath {\r\n   fill: #fff;\r\n}<\/pre>\n
     <\/p>\n
    Agregar un v\u00ednculo personalizado de Whatsapp<\/h2>\n
    Cuando queremos a\u00f1adir un enlace con un n\u00famero de tel\u00e9fono en HTML, utilizamos el atributo href con el valor tel: seguido del prefijo de pa\u00eds y del n\u00famero de tel\u00e9fono sin espacio:\u00a0 href=\u00bbtel:+47……\u00bb.<\/p>\n
    Crear tu propio enlace:<\/h3>\n
    Utilice el enlace https:\/\/api.whatsapp.com\/send\/?phone=<n\u00famero>,\u00a0<\/strong><n\u00famero> siendo el n\u00famero de tel\u00e9fono en formato internacional, a decir con el prefijo de pa\u00eds, pero sin el + que aparece en general delante. Lo que dar\u00eda lo siguiente para un n\u00famero de tel\u00e9fono espa\u00f1ol :
    \nhttps:\/\/api.whatsapp.com\/send\/?phone=34650474…<\/span><\/p>\n
    Crear tu propio enlace con un mensaje predefinido:<\/h3>\n
    El mensaje predefinido aparecer\u00e1 autom\u00e1ticamente en el campo de texto de una discusi\u00f3n.\u00a0 Para a\u00f1adirlo, hay que utilizar el enlace anterior m\u00e1s el par\u00e1metro &text=<\/strong> m\u00e1s el mensaje en forma de URL. A decir, que los espacios deber\u00e1n ser remplazados por los caracteres %20.<\/strong><\/p>\n
    https:\/\/api.whatsapp.com\/send?phone=346….302&text=Hola%20,te%20asesoramos%20por
    \n%20whatsapp%20gestiona%20tu%20compra%20por%20este%20canal.<\/span><\/p>\n
     <\/p>\n
    Podemos comprobar el enlace para verificar que hemos agregado de manera correcta el bot\u00f3n de Whatsapp<\/strong>. Y ya estamos listos para chatear<\/strong> directamente con nuestros usuarios o clientes.<\/p>\n
    Pod\u00e9is encontrar el c\u00f3digo completo de este tutorial con un bonus, haciendo clic en este enlace de copen<\/a>. Cualquier duda me pod\u00e9is dejar un comentario.<\/p>\n","protected":false},"excerpt":{"rendered":"
    En otro articulo hemos visto como crear botones de compartir en redes sociales con HTML,\u00a0 y en este vamos a ver como agregar un bot\u00f3n Whatsapp para llamadas o chat a tu website. Hay una soluci\u00f3n muy f\u00e1cil que nos permite integrar un enlace de…<\/p>\n","protected":false},"author":33,"featured_media":12785,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-12747","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nAgregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS<\/title>\n<meta name=\"description\" content=\"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Agregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS\" \/>\n<meta property=\"og:description\" content=\"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-04T10:46:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-04T12:20:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"C\u00f3mo agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website con HTML y CSS\",\"datePublished\":\"2021-12-04T10:46:54+00:00\",\"dateModified\":\"2021-12-04T12:20:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\"},\"wordCount\":852,\"commentCount\":6,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\",\"name\":\"Agregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png\",\"datePublished\":\"2021-12-04T10:46:54+00:00\",\"dateModified\":\"2021-12-04T12:20:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png\",\"width\":1000,\"height\":500,\"caption\":\"Agregar boton whatsapp con html y css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website con HTML y CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Agregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS","description":"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/","og_locale":"es_ES","og_type":"article","og_title":"Agregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS","og_description":"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.","og_url":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2021-12-04T10:46:54+00:00","article_modified_time":"2021-12-04T12:20:49+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","type":"image\/png"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"C\u00f3mo agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website con HTML y CSS","datePublished":"2021-12-04T10:46:54+00:00","dateModified":"2021-12-04T12:20:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/"},"wordCount":852,"commentCount":6,"image":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/","url":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/","name":"Agregar un bot\u00f3n Whatsapp clic-para-chatear con HTML y CSS","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","datePublished":"2021-12-04T10:46:54+00:00","dateModified":"2021-12-04T12:20:49+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"En este tutorial vas a aprender c\u00f3mo agregar un bot\u00f3n Whatsapp de clic-para-chatear en tu website, de manera muy f\u00e1cil con HTML y CSS.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","width":1000,"height":500,"caption":"Agregar boton whatsapp con html y css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2021\/12\/como-agregar-un-boton-whatsapp-clic-para-chatear-a-tu-website-con-html-y-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar un bot\u00f3n Whatsapp clic-para-chatear a tu website con HTML y CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/12\/botonWhatsapp-html-css.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/12747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=12747"}],"version-history":[{"count":28,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/12747\/revisions"}],"predecessor-version":[{"id":14554,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/12747\/revisions\/14554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/12785"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=12747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=12747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=12747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}