{"id":969,"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:20:09","modified_gmt":"2026-03-19T07:20:09","slug":"bouton-whatsapp-entierement-cree-par-mes-soins","status":"publish","type":"post","link":"https:\/\/em-agency.ch\/fr\/bouton-whatsapp-entierement-cree-par-mes-soins\/","title":{"rendered":"Bouton WhatsApp \u2013 enti\u00e8rement cr\u00e9\u00e9 par mes soins"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Nous avons int\u00e9gr\u00e9 un nouveau bouton WhatsApp sur notre site web \u2013 et nous l&rsquo;avons programm\u00e9 nous-m\u00eames !<\/p>\n\n<p class=\"wp-block-paragraph\">Pourquoi ? C&rsquo;est tr\u00e8s simple : la plupart des solutions disponibles sont soit limit\u00e9es, soit payantes, surtout si l&rsquo;on souhaite disposer de fonctionnalit\u00e9s telles que des boutons librement d\u00e9pla\u00e7ables, une adaptation aux appareils mobiles ou des options conviviales.<\/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\">Notre bouton permet de :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>peuvent \u00eatre d\u00e9plac\u00e9s librement (Mobile)<\/li>\n\n\n\n<li>appara\u00eetre sur certaines pages (par exemple, Contact et \u00c0 propos)<\/li>\n\n\n\n<li>se ferme d&rsquo;un simple clic (facile \u00e0 utiliser)<\/li>\n\n\n\n<li>s&rsquo;adapter parfaitement \u00e0 diff\u00e9rentes tailles d&rsquo;\u00e9cran<\/li>\n\n\n\n<li>Multilingue \/ traduisible<\/li>\n<\/ul>\n\n<div class=\"wa-demo-box\">\r\n  <a href=\"#\" id=\"show-wa-demo\" class=\"wa-demo-trigger\">\r\n    Cliquez ici pour voir le bouton WhatsApp en direct\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\">Discutez avec nous<\/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 Or, ce sont justement ces fonctionnalit\u00e9s qui, la plupart du temps, ne sont pas disponibles sur le march\u00e9 ou qui ne le sont que dans des outils premium payants (souvent \u00e0 partir d&rsquo;environ 10 \u20ac par mois).<\/p>\n\n<p class=\"wp-block-paragraph\">C&rsquo;est pourquoi nous avons d\u00e9cid\u00e9 de tout d\u00e9velopper nous-m\u00eames.<br\/>Cela nous donne un contr\u00f4le total et nous permet de personnaliser les moindres d\u00e9tails, ce qui est souvent impossible avec les plugins standard.<\/p>\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Un bon exemple de notre fa\u00e7on de travailler et de nos comp\u00e9tences :<br\/>Nous ne nous contentons pas de mettre en \u0153uvre ce qui existe d\u00e9j\u00e0 : nous d\u00e9veloppons des solutions parfaitement adapt\u00e9es \u00e0 nos besoins.<\/p>\n\n<p class=\"wp-block-paragraph\">Et c&rsquo;est exactement ce que nous mettons en \u0153uvre pour nos clients !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous avons int\u00e9gr\u00e9 un nouveau bouton WhatsApp sur notre site web \u2013 et nous l&rsquo;avons programm\u00e9 nous-m\u00eames ! Pourquoi ? C&rsquo;est tr\u00e8s simple : la plupart des solutions disponibles sont soit limit\u00e9es, soit payantes, surtout si l&rsquo;on souhaite disposer de fonctionnalit\u00e9s telles que des boutons librement d\u00e9pla\u00e7ables, une adaptation aux appareils mobiles ou des options [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":971,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe"],"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\/fr\/wp-json\/wp\/v2\/posts\/969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":3,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"predecessor-version":[{"id":1009,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/posts\/969\/revisions\/1009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/media\/971"}],"wp:attachment":[{"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/em-agency.ch\/fr\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}