{"id":981,"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:30:54","modified_gmt":"2026-03-19T07:30:54","slug":"przycisk-whatsapp-w-calosci-wlasnej-roboty","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/pl\/przycisk-whatsapp-w-calosci-wlasnej-roboty\/","title":{"rendered":"Przycisk WhatsApp \u2013 w ca\u0142o\u015bci w\u0142asnej roboty"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Na naszej stronie internetowej umie\u015bcili\u015bmy nowy przycisk WhatsApp \u2013 i to w\u0142asnor\u0119cznie zaprogramowany!<\/p>\n\n<p class=\"wp-block-paragraph\">Dlaczego? To proste: wi\u0119kszo\u015b\u0107 dost\u0119pnych rozwi\u0105za\u0144 ma ograniczone mo\u017cliwo\u015bci lub jest p\u0142atna \u2013 zw\u0142aszcza je\u015bli zale\u017cy nam na takich funkcjach, jak swobodne przesuwanie przycisk\u00f3w, dostosowanie do urz\u0105dze\u0144 mobilnych czy przyjazne dla u\u017cytkownika dodatki.<\/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\">Nasz przycisk potrafi:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>mo\u017cna swobodnie przesuwa\u0107 (urz\u0105dzenia mobilne)<\/li>\n\n\n\n<li>pojawiaj\u0105 si\u0119 na okre\u015blonych stronach (np. Kontakt i O nas)<\/li>\n\n\n\n<li>mo\u017cna zamkn\u0105\u0107 jednym klikni\u0119ciem (\u0142atwe w obs\u0142udze)<\/li>\n\n\n\n<li>optymalnie dostosowywa\u0107 si\u0119 do r\u00f3\u017cnych rozmiar\u00f3w ekran\u00f3w<\/li>\n\n\n\n<li>Wieloj\u0119zyczny \/ z mo\u017cliwo\u015bci\u0105 t\u0142umaczenia<\/li>\n<\/ul>\n\n<div class=\"wa-demo-box\">\r\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\r\n    Kliknij tutaj, aby zobaczy\u0107 przycisk WhatsApp na \u017cywo\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\">Porozmawiaj z nami<\/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 W\u0142a\u015bnie takie funkcje s\u0105 zazwyczaj niedost\u0119pne na rynku lub oferowane w p\u0142atnych narz\u0119dziach premium (cz\u0119sto ju\u017c od oko\u0142o 47 Zloty miesi\u0119cznie).<\/p>\n\n<p class=\"wp-block-paragraph\">Dlatego postanowili\u015bmy opracowa\u0107 wszystko samodzielnie.<br\/>Daje nam to pe\u0142n\u0105 kontrol\u0119 \u2013 i pozwala na indywidualne dopracowanie nawet najdrobniejszych szczeg\u00f3\u0142\u00f3w, co cz\u0119sto nie jest mo\u017cliwe w przypadku standardowych wtyczek.<\/p>\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1\u00a0Dobry przyk\u0142ad tego, jak pracujemy i czym si\u0119 zajmujemy:<br\/>Nie ograniczamy si\u0119 tylko do wdra\u017cania istniej\u0105cych rozwi\u0105za\u0144 \u2013 opracowujemy rozwi\u0105zania, kt\u00f3re s\u0105 dok\u0142adnie dostosowane do naszych potrzeb.<\/p>\n\n<p class=\"wp-block-paragraph\">I w\u0142a\u015bnie to realizujemy dla naszych klient\u00f3w!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na naszej stronie internetowej umie\u015bcili\u015bmy nowy przycisk WhatsApp \u2013 i to w\u0142asnor\u0119cznie zaprogramowany! Dlaczego? To proste: wi\u0119kszo\u015b\u0107 dost\u0119pnych rozwi\u0105za\u0144 ma ograniczone mo\u017cliwo\u015bci lub jest p\u0142atna \u2013 zw\u0142aszcza je\u015bli zale\u017cy nam na takich funkcjach, jak swobodne przesuwanie przycisk\u00f3w, dostosowanie do urz\u0105dze\u0144 mobilnych czy przyjazne dla u\u017cytkownika dodatki. Nasz przycisk potrafi: Kliknij tutaj, aby zobaczy\u0107 przycisk WhatsApp [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":983,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii"],"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\/pl\/wp-json\/wp\/v2\/posts\/981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/comments?post=981"}],"version-history":[{"count":3,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/posts\/981\/revisions"}],"predecessor-version":[{"id":1015,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/posts\/981\/revisions\/1015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/media\/983"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/media?parent=981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/categories?post=981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/pl\/wp-json\/wp\/v2\/tags?post=981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}