{"id":987,"date":"2026-03-19T06:33:02","date_gmt":"2026-03-19T06:33:02","guid":{"rendered":"https:\/\/em-agency.ch\/whatsapp-button-komplett-selbst-gebaut\/"},"modified":"2026-03-19T07:26:31","modified_gmt":"2026-03-19T07:26:31","slug":"boton-de-whatsapp-creado-integramente-por-mi-mismo","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/es\/boton-de-whatsapp-creado-integramente-por-mi-mismo\/","title":{"rendered":"Bot\u00f3n de WhatsApp: creado \u00edntegramente por m\u00ed mismo"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hemos a\u00f1adido un nuevo bot\u00f3n de WhatsApp a nuestra p\u00e1gina web, \u00a1y lo hemos programado nosotros mismos!<\/p>\n\n<p class=\"wp-block-paragraph\">\u00bfPor qu\u00e9? Muy sencillo: la mayor\u00eda de las soluciones disponibles tienen limitaciones o son de pago, sobre todo si se buscan funciones como botones que se puedan mover libremente, adaptaci\u00f3n a dispositivos m\u00f3viles o extras f\u00e1ciles de usar.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n<p class=\"wp-block-paragraph\">Nuestro bot\u00f3n puede:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>se puede mover libremente (dispositivos m\u00f3viles)<\/li>\n\n\n\n<li>aparecer en determinadas p\u00e1ginas (por ejemplo, \u00abContacto\u00bb y \u00abAcerca de\u00bb)<\/li>\n\n\n\n<li>se cierran con un solo clic (f\u00e1cil de usar)<\/li>\n\n\n\n<li>adaptarse perfectamente a diferentes tama\u00f1os de pantalla<\/li>\n\n\n\n<li>Multiling\u00fce \/ traducible<\/li>\n<\/ul>\n\n<div class=\"wa-demo-box\">\r\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\r\n   Haz clic aqu\u00ed para ver el bot\u00f3n de WhatsApp en directo\r\n  <\/a>\r\n<\/div>\r\n\r\n<div class=\"wa-demo-overlay hidden\" id=\"waOverlay\">\r\n  <div class=\"wa-demo-center\" id=\"waCenter\">\r\n    <button class=\"wa-close\" id=\"waClose\" aria-label=\"WhatsApp-Button schlie\u00dfen\">\u00d7<\/button>\r\n\r\n    <a href=\"https:\/\/wa.me\/41764571904\" class=\"wa-demo-btn pulse\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Mit uns auf WhatsApp chatten\">\r\n      <span class=\"wa-demo-tooltip\">Chatea con nosotros<\/span>\r\n\r\n      <svg viewbox=\"0 0 32 32\" aria-hidden=\"true\">\r\n        <path d=\"M19.11 17.23c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.14-1.15-.42-2.19-1.34-.81-.72-1.35-1.6-1.51-1.87-.16-.27-.02-.42.12-.55.12-.12.27-.32.41-.48.14-.16.18-.27.27-.46.09-.18.05-.34-.02-.48-.07-.14-.61-1.48-.84-2.03-.22-.53-.45-.46-.61-.47h-.52c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.28s.98 2.65 1.12 2.83c.14.18 1.92 2.93 4.65 4.11.65.28 1.15.45 1.54.58.65.2 1.24.17 1.7.1.52-.08 1.6-.65 1.83-1.27.23-.61.23-1.13.16-1.24-.07-.11-.25-.18-.52-.32z\"><\/path>\r\n        <path d=\"M16.03 3.2c-6.98 0-12.64 5.66-12.64 12.64 0 2.22.58 4.38 1.67 6.29L3.2 28.8l6.83-1.79a12.6 12.6 0 0 0 6 1.53h.01c6.98 0 12.64-5.66 12.64-12.64S23.01 3.2 16.03 3.2zm0 22.97h-.01a10.3 10.3 0 0 1-5.24-1.43l-.38-.22-4.05 1.06 1.08-3.95-.25-.4a10.28 10.28 0 0 1-1.58-5.45c0-5.69 4.63-10.32 10.33-10.32 2.76 0 5.35 1.07 7.3 3.02a10.26 10.26 0 0 1 3.02 7.3c0 5.69-4.63 10.32-10.32 10.32z\"><\/path>\r\n      <\/svg>\r\n    <\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .wa-demo-box {\r\n    margin: 18px 0;\r\n  }\r\n\r\n  .wa-demo-trigger {\r\n    display: inline-block;\r\n    padding: 14px 22px;\r\n    border-radius: 999px;\r\n    background: #bd1e59;\r\n    color: #fff;\r\n    text-decoration: none;\r\n    font-weight: 600;\r\n    font-size: 15px;\r\n    line-height: 1;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .wa-demo-trigger:hover {\r\n    background: #25D366;\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  .wa-demo-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0, 0, 0, 0.35);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 99999;\r\n    padding: 20px;\r\n  }\r\n\r\n  .wa-demo-overlay.hidden {\r\n    display: none;\r\n  }\r\n\r\n  .wa-demo-center {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    animation: waPopIn 0.22s ease-out;\r\n  }\r\n\r\n  .wa-demo-btn {\r\n    position: relative;\r\n    width: 96px;\r\n    height: 96px;\r\n    border-radius: 999px;\r\n    background: #25d366;\r\n    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n    transform: scale(1);\r\n  }\r\n\r\n  .wa-demo-btn svg {\r\n    width: 48px;\r\n    height: 48px;\r\n    fill: #fff;\r\n  }\r\n\r\n  .wa-demo-tooltip {\r\n    position: absolute;\r\n    top: -52px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: #111;\r\n    color: #fff;\r\n    font-size: 15px;\r\n    padding: 10px 14px;\r\n    border-radius: 999px;\r\n    white-space: nowrap;\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\r\n  }\r\n\r\n  .wa-close {\r\n    position: absolute;\r\n    top: -10px;\r\n    right: -10px;\r\n    width: 30px;\r\n    height: 30px;\r\n    border: 0;\r\n    border-radius: 999px;\r\n    background: #222;\r\n    color: #fff;\r\n    font-size: 18px;\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,.2);\r\n    z-index: 2;\r\n  }\r\n\r\n  .pulse {\r\n    animation: waPulse 2s infinite;\r\n  }\r\n\r\n  @keyframes waPulse {\r\n    0% {\r\n      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45), 0 14px 34px rgba(0, 0, 0, 0.28);\r\n    }\r\n    70% {\r\n      box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 14px 34px rgba(0, 0, 0, 0.28);\r\n    }\r\n    100% {\r\n      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 14px 34px rgba(0, 0, 0, 0.28);\r\n    }\r\n  }\r\n\r\n  @keyframes waPopIn {\r\n    0% {\r\n      opacity: 0;\r\n      transform: scale(0.82);\r\n    }\r\n    100% {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .wa-demo-btn {\r\n      width: 88px;\r\n      height: 88px;\r\n    }\r\n\r\n    .wa-demo-btn svg {\r\n      width: 42px;\r\n      height: 42px;\r\n    }\r\n\r\n    .wa-demo-tooltip {\r\n      font-size: 14px;\r\n      top: -48px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function () {\r\n    const trigger = document.getElementById(\"show-wa-demo\");\r\n    const overlay = document.getElementById(\"waOverlay\");\r\n    const closeBtn = document.getElementById(\"waClose\");\r\n\r\n    if (!trigger || !overlay || !closeBtn) return;\r\n\r\n    trigger.addEventListener(\"click\", function (e) {\r\n      e.preventDefault();\r\n      overlay.classList.remove(\"hidden\");\r\n    });\r\n\r\n    closeBtn.addEventListener(\"click\", function () {\r\n      overlay.classList.add(\"hidden\");\r\n    });\r\n\r\n    overlay.addEventListener(\"click\", function (e) {\r\n      if (e.target === overlay) {\r\n        overlay.classList.add(\"hidden\");\r\n      }\r\n    });\r\n  })();\r\n<\/script>\r\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Precisamente este tipo de funciones no suelen estar disponibles en el mercado o solo se encuentran en herramientas premium de pago (a menudo a partir de unos 10 CHF al mes).<\/p>\n\n<p class=\"wp-block-paragraph\">Por eso hemos decidido desarrollar todo nosotros mismos.<br\/>Esto nos da un control total y nos permite personalizar hasta el m\u00e1s m\u00ednimo detalle, algo que a menudo no es posible con los plugins est\u00e1ndar.<\/p>\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Un buen ejemplo de c\u00f3mo trabajamos y de lo que somos capaces de hacer:<br\/>No nos limitamos a aplicar lo que ya existe, sino que desarrollamos soluciones que se adaptan perfectamente a nuestras necesidades.<\/p>\n\n<p class=\"wp-block-paragraph\">\u00a1Y eso es precisamente lo que hacemos por nuestros clientes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hemos a\u00f1adido un nuevo bot\u00f3n de WhatsApp a nuestra p\u00e1gina web, \u00a1y lo hemos programado nosotros mismos! \u00bfPor qu\u00e9? Muy sencillo: la mayor\u00eda de las soluciones disponibles tienen limitaciones o son de pago, sobre todo si se buscan funciones como botones que se puedan mover libremente, adaptaci\u00f3n a dispositivos m\u00f3viles o extras f\u00e1ciles de usar. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":989,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"jetpack_featured_media_url":"https:\/\/em-agency.ch\/wp-content\/uploads\/2026\/03\/whatsapp-support-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/posts\/987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/comments?post=987"}],"version-history":[{"count":3,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/posts\/987\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/posts\/987\/revisions\/1013"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/media\/989"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/media?parent=987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/categories?post=987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/es\/wp-json\/wp\/v2\/tags?post=987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}