Simple WhatsApp Button Generator

index.html

<div class="wrapper">

  <form>
    <div class="inputSet">
      <label for="phone">Phone Number:</label>
      <input id="phone" type="tel" required pattern="\+?\(?\d*\)?[0-9- ]+">
    </div>
    <div class="inputSet">
      <label for="text">Default Text (optional):</label>
      <input id="text">
    </div>
    <div class="inputSet">
      <label for="id">Button ID:</label>
      <input id="id" value="whatsapp-button" type="text" required pattern="[a-zA-Z]+[a-zA-Z0-9-_]*" oninvalid="this.setCustomValidity('Please start with a letter and use just letters, numbers, dashes and underscores.')" oninput="this.setCustomValidity('')">
    </div>
    <div class="inputSet"><label>Size:</label></div>
    <div class="inputSet">
      <label for="size">small<span class="toRight">large</span></label>
      <input id="size" type="range" min="10" max="200">
    </div>
    <div class="inputSet"><label>Positioning:</label></div>
    <div class="inputSet">
      <label for="marginLeftRight">left<span class="toRight">right</span></label>
      <input id="marginLeftRight" type="range" min="-101" max="100">
    </div>
    <div class="inputSet">
      <label for="marginTopBottom">top<span class="toRight">bottom</span></label>
      <input id="marginTopBottom" type="range" min="-101" max="100">
    </div>
    <input type="submit" value="Auto Generating Code... 👉">
  </form>

  <pre><code class="html"></code></pre>
</div>

<a target="_blank" href="https://api.whatsapp.com/send?phone=&text=" id="whatsapp-button" style="position:fixed; bottom:10px; right:10px; width:50px; z-index:999;"><img style="width:100%;" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPHBhdGggc3R5bGU9ImZpbGw6I0VERURFRDsiIGQ9Ik0wLDUxMmwzNS4zMS0xMjhDMTIuMzU5LDM0NC4yNzYsMCwzMDAuMTM4LDAsMjU0LjIzNEMwLDExNC43NTksMTE0Ljc1OSwwLDI1NS4xMTcsMCAgUzUxMiwxMTQuNzU5LDUxMiwyNTQuMjM0UzM5NS40NzYsNTEyLDI1NS4xMTcsNTEyYy00NC4xMzgsMC04Ni41MS0xNC4xMjQtMTI0LjQ2OS0zNS4zMUwwLDUxMnoiLz4KPHBhdGggc3R5bGU9ImZpbGw6IzU1Q0Q2QzsiIGQ9Ik0xMzcuNzEsNDMwLjc4Nmw3Ljk0NSw0LjQxNGMzMi42NjIsMjAuMzAzLDcwLjYyMSwzMi42NjIsMTEwLjM0NSwzMi42NjIgIGMxMTUuNjQxLDAsMjExLjg2Mi05Ni4yMjEsMjExLjg2Mi0yMTMuNjI4UzM3MS42NDEsNDQuMTM4LDI1NS4xMTcsNDQuMTM4UzQ0LjEzOCwxMzcuNzEsNDQuMTM4LDI1NC4yMzQgIGMwLDQwLjYwNywxMS40NzYsODAuMzMxLDMyLjY2MiwxMTMuODc2bDUuMjk3LDcuOTQ1bC0yMC4zMDMsNzQuMTUyTDEzNy43MSw0MzAuNzg2eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRkVGRUZFOyIgZD0iTTE4Ny4xNDUsMTM1Ljk0NWwtMTYuNzcyLTAuODgzYy01LjI5NywwLTEwLjU5MywxLjc2Ni0xNC4xMjQsNS4yOTcgIGMtNy45NDUsNy4wNjItMjEuMTg2LDIwLjMwMy0yNC43MTcsMzcuOTU5Yy02LjE3OSwyNi40ODMsMy41MzEsNTguMjYyLDI2LjQ4Myw5MC4wNDFzNjcuMDksODIuOTc5LDE0NC43NzIsMTA1LjA0OCAgYzI0LjcxNyw3LjA2Miw0NC4xMzgsMi42NDgsNjAuMDI4LTcuMDYyYzEyLjM1OS03Ljk0NSwyMC4zMDMtMjAuMzAzLDIyLjk1Mi0zMy41NDVsMi42NDgtMTIuMzU5ICBjMC44ODMtMy41MzEtMC44ODMtNy45NDUtNC40MTQtOS43MWwtNTUuNjE0LTI1LjZjLTMuNTMxLTEuNzY2LTcuOTQ1LTAuODgzLTEwLjU5MywyLjY0OGwtMjIuMDY5LDI4LjI0OCAgYy0xLjc2NiwxLjc2Ni00LjQxNCwyLjY0OC03LjA2MiwxLjc2NmMtMTUuMDA3LTUuMjk3LTY1LjMyNC0yNi40ODMtOTIuNjktNzkuNDQ4Yy0wLjg4My0yLjY0OC0wLjg4My01LjI5NywwLjg4My03LjA2MiAgbDIxLjE4Ni0yMy44MzRjMS43NjYtMi42NDgsMi42NDgtNi4xNzksMS43NjYtOC44MjhsLTI1LjYtNTcuMzc5QzE5My4zMjQsMTM4LjU5MywxOTAuNjc2LDEzNS45NDUsMTg3LjE0NSwxMzUuOTQ1Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" /></a>

script.js

// initialize the highlighter

hljs.initHighlightingOnLoad();

// whatsapp button js

let form = document.querySelector("form");
let btnSubmit = document.querySelector("[type='submit']");
let phone = document.querySelector("#phone");
let text = document.querySelector("#text");
let id = document.querySelector("#id");
let size = document.querySelector("#size");
let marginLeftRight = document.querySelector("#marginLeftRight");
let marginTopBottom = document.querySelector("#marginTopBottom");
let resultCode = document.querySelector("pre code.html");
let waLinkEl = document.querySelector("#whatsapp-button");

// defining deafult values from html
let maxMargin = parseInt(marginTopBottom.max);
marginLeftRight.value = maxMargin - parseInt(waLinkEl.style.right);
marginTopBottom.value = maxMargin - parseInt(waLinkEl.style.bottom);
size.value = parseInt(waLinkEl.style.width);
// ---------------------------------

// rebuild the code when input info is changed
[phone, text, id, size, marginLeftRight, marginTopBottom].forEach((el) => {
  el.addEventListener("input", (e) => {
    resultCode.innerText = '';
    btnSubmit.click();
  });
});

// updating the button
form.addEventListener("submit", (e) => {
  e.preventDefault();

  let newLink = new URL(waLinkEl.href);
  let params = newLink.searchParams;

  params.delete("text");
  params.set("phone", phone.value);
  if (text.value) params.set("text", text.value);

  waLinkEl.href = newLink.toString();
  waLinkEl.id = id.value;

  resultCode.innerText = waLinkEl.outerHTML;
  hljs.highlightBlock(resultCode);
});

// size slider
size.addEventListener("input", (e) => {
  let value = e.target.value;
  waLinkEl.style.width = value + "px";
});

// margin left/right slider
marginLeftRight.addEventListener("input", (e) => {
  let value = e.target.value;
  let newValue = convertNewValue(value);

  // margin right
  if (value >= 0) {
    waLinkEl.style.removeProperty("left");
    waLinkEl.style.right = newValue + "px";
  }
  // margin left
  else {
    waLinkEl.style.removeProperty("right");
    waLinkEl.style.left = newValue + "px";
  }
});

// margin top/bottom slider
marginTopBottom.addEventListener("input", (e) => {
  let value = e.target.value;
  let newValue = convertNewValue(value);

  // margin bottom
  if (value >= 0) {
    waLinkEl.style.removeProperty("top");
    waLinkEl.style.bottom = newValue + "px";
  }
  // margin top
  else {
    waLinkEl.style.removeProperty("bottom");
    waLinkEl.style.top = newValue + "px";
  }
});

// text selection on click for easier copy
resultCode.addEventListener("click", function () {
  if (window.getSelection().toString() == "")
    window.getSelection().selectAllChildren(this);
});

// slider value converter
let convertNewValue = (value) => {
  value = parseInt(value);
  let offset = value >= 0 ? -maxMargin : maxMargin + 1;
  let newValue = (value + offset) * -1;
  return newValue < 0 ? newValue * -1 : newValue;
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>

simple-whatsapp-button-generator.markdown

Simple WhatsApp Button Generator

A Pen by Gabriel F. Monteiro on CodePen.

License.

style.scss

html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 20px 7px 5px 5px;
  font-family: Verdana;
  font-size: 12px;
  color: #fbfbfb;
  background-color: #202228;
  border-top: 2px solid #1d4e31;
}

* {
  &::-webkit-scrollbar {
    background-color: transparent;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(234, 234, 234, 0.6);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-button {
    display: none;
  }
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: auto;
  max-width: 800px;
}

form {
  position: sticky;
  top: 10px;
  display: flex;
  align-self: flex-start;
  flex-wrap: wrap;
  margin-right: 15px;
  justify-content: space-between;
}

.inputSet {
  width: 100%;
}

label,
input,
pre {
  display: block;
  width: 100%;
  padding: 5px 0 5px 5px;
  margin: 0;
  color: #fbfbfb;
  background-color: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 3px;
}

label {
  background-color: inherit;
  font-weight: bold;
  color: #bbb;

  .toRight {
    float: right;
    margin-right: 10px;
  }
}

input {
  margin-bottom: 8px;
  box-sizing: border-box;

  &:not([type="range"]) {
    padding: 10px;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px #29c46a;
  }

  &[type="submit"] {
    cursor: pointer;
    margin-top: 15px;
  }

  &[type="range"] {
    opacity: 0.6;
    -webkit-appearance: none;
    height: 10px;
    overflow: hidden;
    background: rgb(234, 234, 234);
    cursor: ew-resize;

    &:focus,
    &:hover {
      box-shadow: none;
      opacity: 1;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #29c46a;
      box-shadow: -1000px 0 0 995px #29c46a, 0 0 5px 2px #000;
    }

    &::-webkit-slider-thumb:hover {
      box-shadow: 0 0 5px 2px #000, -1000px 0 0 995px #29c46a;
    }
  }
}

pre {
  padding: 10px 15px;
  white-space: pre-wrap;
  word-break: break-all;
  height: 420px;
  overflow-x: hidden;
  overflow-y: scroll;

  code.html {
    background: transparent;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/androidstudio.min.css" rel="stylesheet" />