{"id":972,"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:07:39","modified_gmt":"2026-03-19T07:07:39","slug":"whatsapp-button-komplett-selbst-gebaut","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/de\/whatsapp-button-komplett-selbst-gebaut\/","title":{"rendered":"WhatsApp-Button \u2013 komplett selbst gebaut"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wir haben auf unserer Website einen neuen WhatsApp-Button integriert \u2013 und zwar <strong>selbst programmiert!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Warum? Ganz einfach: Die meisten verf\u00fcgbaren L\u00f6sungen sind entweder eingeschr\u00e4nkt oder kostenpflichtig \u2013 vor allem, wenn man Funktionen wie <strong>frei verschiebbare Buttons<\/strong>, <strong>mobile Anpassung<\/strong> oder <strong>benutzerfreundliche Extras<\/strong> m\u00f6chte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Unser Button kann:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>frei verschoben werden (Mobile)<\/li>\n\n\n\n<li>auf bestimmten Seiten erscheinen (z. B. Kontakt &amp; About)<\/li>\n\n\n\n<li>mit einem Klick geschlossen werden (Benutzerfreundlich)<\/li>\n\n\n\n<li>sich optimal an verschiedene Bildschirmgr\u00f6ssen anpassen<\/li>\n\n\n\n<li>Mehrsprachig \/ \u00fcbersetzbar<\/li>\n<\/ul>\n\n\n\n<div class=\"wa-demo-box\">\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\n    Hier klicken und den WhatsApp-Button live ansehen\n  <\/a>\n<\/div>\n\n<div class=\"wa-demo-overlay hidden\" id=\"waOverlay\">\n  <div class=\"wa-demo-center\" id=\"waCenter\">\n    <button class=\"wa-close\" id=\"waClose\" aria-label=\"WhatsApp-Button schlie\u00dfen\">\u00d7<\/button>\n\n    <a href=\"https:\/\/wa.me\/41764571904\" class=\"wa-demo-btn pulse\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Mit uns auf WhatsApp chatten\">\n      <span class=\"wa-demo-tooltip\">Chatte mit uns<\/span>\n\n      <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\">\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>\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>\n      <\/svg>\n    <\/a>\n  <\/div>\n<\/div>\n\n<style>\n  .wa-demo-box {\n    margin: 18px 0;\n  }\n\n  .wa-demo-trigger {\n    display: inline-block;\n    padding: 14px 22px;\n    border-radius: 999px;\n    background: #bd1e59;\n    color: #fff;\n    text-decoration: none;\n    font-weight: 600;\n    font-size: 15px;\n    line-height: 1;\n    transition: all 0.2s ease;\n  }\n\n  .wa-demo-trigger:hover {\n    background: #25D366;\n    transform: translateY(-1px);\n  }\n\n  .wa-demo-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.35);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 99999;\n    padding: 20px;\n  }\n\n  .wa-demo-overlay.hidden {\n    display: none;\n  }\n\n  .wa-demo-center {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: waPopIn 0.22s ease-out;\n  }\n\n  .wa-demo-btn {\n    position: relative;\n    width: 96px;\n    height: 96px;\n    border-radius: 999px;\n    background: #25d366;\n    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-decoration: none;\n    transform: scale(1);\n  }\n\n  .wa-demo-btn svg {\n    width: 48px;\n    height: 48px;\n    fill: #fff;\n  }\n\n  .wa-demo-tooltip {\n    position: absolute;\n    top: -52px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #111;\n    color: #fff;\n    font-size: 15px;\n    padding: 10px 14px;\n    border-radius: 999px;\n    white-space: nowrap;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  }\n\n  .wa-close {\n    position: absolute;\n    top: -10px;\n    right: -10px;\n    width: 30px;\n    height: 30px;\n    border: 0;\n    border-radius: 999px;\n    background: #222;\n    color: #fff;\n    font-size: 18px;\n    line-height: 1;\n    cursor: pointer;\n    box-shadow: 0 4px 12px rgba(0,0,0,.2);\n    z-index: 2;\n  }\n\n  .pulse {\n    animation: waPulse 2s infinite;\n  }\n\n  @keyframes waPulse {\n    0% {\n      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45), 0 14px 34px rgba(0, 0, 0, 0.28);\n    }\n    70% {\n      box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 14px 34px rgba(0, 0, 0, 0.28);\n    }\n    100% {\n      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 14px 34px rgba(0, 0, 0, 0.28);\n    }\n  }\n\n  @keyframes waPopIn {\n    0% {\n      opacity: 0;\n      transform: scale(0.82);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @media (max-width: 768px) {\n    .wa-demo-btn {\n      width: 88px;\n      height: 88px;\n    }\n\n    .wa-demo-btn svg {\n      width: 42px;\n      height: 42px;\n    }\n\n    .wa-demo-tooltip {\n      font-size: 14px;\n      top: -48px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const trigger = document.getElementById(\"show-wa-demo\");\n    const overlay = document.getElementById(\"waOverlay\");\n    const closeBtn = document.getElementById(\"waClose\");\n\n    if (!trigger || !overlay || !closeBtn) return;\n\n    trigger.addEventListener(\"click\", function (e) {\n      e.preventDefault();\n      overlay.classList.remove(\"hidden\");\n    });\n\n    closeBtn.addEventListener(\"click\", function () {\n      overlay.classList.add(\"hidden\");\n    });\n\n    overlay.addEventListener(\"click\", function (e) {\n      if (e.target === overlay) {\n        overlay.classList.add(\"hidden\");\n      }\n    });\n  })();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Genau solche Funktionen sind auf dem Markt meist nicht verf\u00fcgbar oder in <strong>kostenpflichtigen Premium Tools (oft ab ca. 10 CHF\/Monat)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wir haben uns deshalb entschieden, alles selbst zu entwickeln.<br>Das gibt uns volle Kontrolle \u2013 und erm\u00f6glicht es, auch <strong>kleinste Details individuell umzusetzen<\/strong>, die mit Standard-Plugins oft gar nicht m\u00f6glich sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Ein gutes Beispiel daf\u00fcr, wie wir arbeiten und was wir k\u00f6nnen:<br>Wir setzen nicht nur um, was es schon gibt \u2013 wir entwickeln L\u00f6sungen, die genau zu unseren Anforderungen passen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Und genau das realisieren wir auch f\u00fcr unsere Kunden!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wir haben auf unserer Website einen neuen WhatsApp-Button integriert \u2013 und zwar selbst programmiert! Warum? Ganz einfach: Die meisten verf\u00fcgbaren L\u00f6sungen sind entweder eingeschr\u00e4nkt oder kostenpflichtig \u2013 vor allem, wenn man Funktionen wie frei verschiebbare Buttons, mobile Anpassung oder benutzerfreundliche Extras m\u00f6chte. Unser Button kann: Hier klicken und den WhatsApp-Button live ansehen \u00d7 Chatte mit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":974,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[75],"tags":[],"class_list":["post-972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"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\/de\/wp-json\/wp\/v2\/posts\/972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/comments?post=972"}],"version-history":[{"count":1,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/posts\/972\/revisions"}],"predecessor-version":[{"id":997,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/posts\/972\/revisions\/997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/media\/974"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/media?parent=972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/categories?post=972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/de\/wp-json\/wp\/v2\/tags?post=972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}