Shopify WhatsApp Button Generator

{%- comment -%}
  Floating WhatsApp button with a pre-filled message. [product], [url] and [price] fill in from the current product.
{%- endcomment -%}
{%- style -%}
  .ea-wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:30;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);text-decoration:none}
  .ea-wa[hidden]{display:none}
  .ea-wa svg{width:30px;height:30px;fill:#fff}
{%- endstyle -%}
{%- liquid
  assign wa_message = "Hi! Im interested in [product] ([url])"
  assign product_full_url = shop.url | append: product.url
  if product
    assign wa_message = wa_message | replace: '[product]', product.title | replace: '[url]', product_full_url
    assign price_str = product.price | money
    assign wa_message = wa_message | replace: '[price]', price_str
  else
    assign wa_message = wa_message | replace: '[product]', shop.name | replace: '[url]', shop.url | replace: '[price]', ''
  endif
-%}
{%- if true -%}
<a
  id="ea-whatsapp-btn"
  class="ea-wa"
  href="https://wa.me/15551234567?text={{ wa_message | url_encode }}"
  target="_blank"
  rel="noopener"
  aria-label="Chat on WhatsApp"
  
>
  <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M16 2C8.3 2 2 8.3 2 16c0 2.6.7 5.1 2 7.3L2 30l6.9-1.8c2.1 1.2 4.5 1.8 7.1 1.8 7.7 0 14-6.3 14-14S23.7 2 16 2zm7.6 20c-.3.9-1.7 1.6-2.6 1.8-.7.1-1.6.2-4.7-1-3.9-1.6-6.5-5.4-6.7-5.7-.2-.3-1.6-2.1-1.6-4s1-2.8 1.4-3.2c.4-.4.8-.5 1.1-.5h.8c.3 0 .6 0 .9.7.3.8 1.1 2.7 1.2 2.9.1.2.2.5 0 .8-.1.3-.2.5-.4.7-.2.3-.4.5-.6.7-.2.2-.4.4-.2.8.2.4 1 1.7 2.2 2.7 1.5 1.3 2.7 1.7 3.1 1.9.4.2.6.1.9-.1.3-.3 1.1-1.2 1.4-1.6.3-.4.5-.3.9-.2.4.2 2.3 1.1 2.7 1.3.4.2.6.3.7.4.1.2.1.9-.2 1.7z"/></svg>
</a>

{%- endif -%}