{"id":984,"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:38:58","modified_gmt":"2026-03-19T07:38:58","slug":"butonul-whatsapp-realizat-integral-de-mine","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/ro\/butonul-whatsapp-realizat-integral-de-mine\/","title":{"rendered":"Butonul WhatsApp \u2013 realizat integral de mine"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Am integrat pe site-ul nostru un nou buton WhatsApp \u2013 pe care l-am programat chiar noi!<\/p>\n\n<p class=\"wp-block-paragraph\">De ce? Foarte simplu: majoritatea solu\u021biilor disponibile sunt fie limitate, fie contra cost \u2013 mai ales dac\u0103 dori\u021bi func\u021bii precum butoane care pot fi mutate liber, adaptare pentru dispozitive mobile sau func\u021bii suplimentare u\u0219or de utilizat.<\/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\">Butonul nostru poate:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>poate fi mutat liber (mobil)<\/li>\n\n\n\n<li>s\u0103 apar\u0103 pe anumite pagini (de exemplu, Contact \u0219i Despre)<\/li>\n\n\n\n<li>se \u00eenchide cu un singur clic (u\u0219or de utilizat)<\/li>\n\n\n\n<li>se adapteaz\u0103 perfect la diferite dimensiuni de ecran<\/li>\n\n\n\n<li>Multilingv \/ traducibil<\/li>\n<\/ul>\n\n<div class=\"wa-demo-box\">\r\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\r\n    Face\u021bi clic aici pentru a vedea butonul WhatsApp \u00een timp real\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\">Discut\u0103 cu noi<\/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 Exact astfel de func\u021bii nu sunt, de obicei, disponibile pe pia\u021b\u0103 sau se g\u0103sesc doar \u00een instrumente premium cu plat\u0103 (adesea \u00eencep\u00e2nd de la aproximativ 56 Leu (RON)).<\/p>\n\n<p class=\"wp-block-paragraph\">De aceea, am decis s\u0103 dezvolt\u0103m totul pe cont propriu.<br\/>Acest lucru ne ofer\u0103 control deplin \u0219i ne permite s\u0103 personaliz\u0103m chiar \u0219i cele mai mici detalii, lucru care adesea nu este posibil cu pluginurile standard.<\/p>\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Un bun exemplu al modului \u00een care lucr\u0103m \u0219i al capacit\u0103\u021bilor noastre:<br\/>Nu ne limit\u0103m la a pune \u00een practic\u0103 ceea ce exist\u0103 deja \u2013 dezvolt\u0103m solu\u021bii care se potrivesc perfect cerin\u021belor noastre.<\/p>\n\n<p class=\"wp-block-paragraph\">\u0218i exact asta realiz\u0103m \u0219i pentru clien\u021bii no\u0219tri!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Am integrat pe site-ul nostru un nou buton WhatsApp \u2013 pe care l-am programat chiar noi! De ce? Foarte simplu: majoritatea solu\u021biilor disponibile sunt fie limitate, fie contra cost \u2013 mai ales dac\u0103 dori\u021bi func\u021bii precum butoane care pot fi mutate liber, adaptare pentru dispozitive mobile sau func\u021bii suplimentare u\u0219or de utilizat. Butonul nostru poate: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":986,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[72],"tags":[],"class_list":["post-984","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\/ro\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":3,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":1019,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/posts\/984\/revisions\/1019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/ro\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}