{"id":975,"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:34:52","modified_gmt":"2026-03-19T07:34:52","slug":"whatsapp-gomb-teljesen-sajat-keszitesu","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/hu\/whatsapp-gomb-teljesen-sajat-keszitesu\/","title":{"rendered":"WhatsApp-gomb \u2013 teljesen saj\u00e1t k\u00e9sz\u00edt\u00e9s\u0171"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Weboldalunkra felvett\u00fcnk egy \u00faj WhatsApp-gombot \u2013 amit mi magunk programoztunk!<\/p>\n\n<p class=\"wp-block-paragraph\">Mi\u00e9rt? Egyszer\u0171: a legt\u00f6bb el\u00e9rhet\u0151 megold\u00e1s vagy korl\u00e1tozott, vagy fizet\u0151s \u2013 f\u0151leg, ha olyan funkci\u00f3kat szeretn\u00e9nk, mint a szabadon \u00e1thelyezhet\u0151 gombok, a mobil eszk\u00f6z\u00f6kh\u00f6z val\u00f3 alkalmazkod\u00e1s vagy a felhaszn\u00e1l\u00f3bar\u00e1t kieg\u00e9sz\u00edt\u0151k.<\/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\">A gombunk k\u00e9pes:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>szabadon mozgathat\u00f3 (mobil)<\/li>\n\n\n\n<li>bizonyos oldalakon jelennek meg (pl. Kapcsolat \u00e9s R\u00f3lunk)<\/li>\n\n\n\n<li>egy kattint\u00e1ssal bez\u00e1rhat\u00f3 (felhaszn\u00e1l\u00f3bar\u00e1t)<\/li>\n\n\n\n<li>optim\u00e1lisan alkalmazkodik a k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9perny\u0151m\u00e9retekhez<\/li>\n\n\n\n<li>T\u00f6bbnyelv\u0171 \/ leford\u00edthat\u00f3<\/li>\n<\/ul>\n\n<div class=\"wa-demo-box\">\r\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\r\n    Kattintson ide, \u00e9s n\u00e9zze meg \u00e9l\u0151ben a WhatsApp-gombot\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\">Csevegj vel\u00fcnk<\/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 Pontosan ilyen funkci\u00f3k \u00e1ltal\u00e1ban nem el\u00e9rhet\u0151k a piacon, vagy csak fizet\u0151s pr\u00e9mium eszk\u00f6z\u00f6kben (gyakran havi 10 CHF-t\u00f3l kezd\u0151d\u0151en).<\/p>\n\n<p class=\"wp-block-paragraph\">Ez\u00e9rt \u00fagy d\u00f6nt\u00f6tt\u00fcnk, hogy mindent saj\u00e1t magunk fejleszt\u00fcnk ki.<br\/>Ez teljes ellen\u0151rz\u00e9st biztos\u00edt sz\u00e1munkra, \u00e9s lehet\u0151v\u00e9 teszi, hogy a legapr\u00f3bb r\u00e9szleteket is egy\u00e9nileg val\u00f3s\u00edtsuk meg, ami a szok\u00e1sos b\u0151v\u00edtm\u00e9nyekkel gyakran egy\u00e1ltal\u00e1n nem lehets\u00e9ges.<\/p>\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Egy j\u00f3 p\u00e9lda arra, hogyan dolgozunk \u00e9s mire vagyunk k\u00e9pesek:<br\/>Nem csup\u00e1n a m\u00e1r megl\u00e9v\u0151 megold\u00e1sokat val\u00f3s\u00edtjuk meg \u2013 olyan megold\u00e1sokat fejleszt\u00fcnk, amelyek pontosan megfelelnek az ig\u00e9nyeinknek.<\/p>\n\n<p class=\"wp-block-paragraph\">\u00c9s pontosan ezt val\u00f3s\u00edtjuk meg \u00fcgyfeleink sz\u00e1m\u00e1ra is!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Weboldalunkra felvett\u00fcnk egy \u00faj WhatsApp-gombot \u2013 amit mi magunk programoztunk! Mi\u00e9rt? Egyszer\u0171: a legt\u00f6bb el\u00e9rhet\u0151 megold\u00e1s vagy korl\u00e1tozott, vagy fizet\u0151s \u2013 f\u0151leg, ha olyan funkci\u00f3kat szeretn\u00e9nk, mint a szabadon \u00e1thelyezhet\u0151 gombok, a mobil eszk\u00f6z\u00f6kh\u00f6z val\u00f3 alkalmazkod\u00e1s vagy a felhaszn\u00e1l\u00f3bar\u00e1t kieg\u00e9sz\u00edt\u0151k. A gombunk k\u00e9pes: Kattintson ide, \u00e9s n\u00e9zze meg \u00e9l\u0151ben a WhatsApp-gombot \u00d7 Csevegj vel\u00fcnk \ud83d\udc49 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":977,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-975","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\/hu\/wp-json\/wp\/v2\/posts\/975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/comments?post=975"}],"version-history":[{"count":3,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/posts\/975\/revisions"}],"predecessor-version":[{"id":1017,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/posts\/975\/revisions\/1017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/media\/977"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/categories?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/hu\/wp-json\/wp\/v2\/tags?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}