โ–ผ
Streaming live at 10am (PST)

How to make WhatsApp Icon open WhatsApp?

Video with voice over concerning question.

Many thanks!

Hi @DroneMotion,

what about using the phone attribute and then the number of the business youโ€™d like your client to connect to ?

<a href="https://api.whatsapp.com/491751138245">Message us on whatsapp ๐Ÿ˜Š</a>

EDIT

You can also use a prefilled message (text needs to be encoded) like so:

<a href="https://api.whatsapp.com/491751138245?text=Hello">Say hello ๐Ÿ‘‹๐Ÿป</a>

Hi @anthonysalamin. Thank you for the reply!

From your message I donโ€™t really know where that code would go? Iโ€™m not big into code but use Webflow for itโ€™s design factor. (Indeed, iโ€™m not a real web designer!)

I see, if you share the live link of your website I could get to see how you structured your layout and try assist further.

@anthonysalamin oh sorry yes i normally attach the link to my original post.

Here you go:

https://preview.webflow.com/preview/taps-toilets?utm_medium=preview_link&utm_source=designer&utm_content=taps-toilets&preview=a2943420c38c89a20d710caba12a16d7&mode=preview

Okay, first use a link block instead of a div block for your whatsapp wrapper. Then add whatsappButton as the id of your new link block. Then copy this small function which will inject the code into your link block, wrapp it inside ints <script></script> tag and paste it inside the custom code section of your page before the end of the body tag </body>

Codepen for you here to see the script in action.

JavaScript

(function injectWhatsapp() {
  // ๐Ÿง  options
  const number = "491751138245";
  const message = "Let's connect ๐Ÿ‘‹๐Ÿป";
  
  const encoded = encodeURIComponent(message);
  const button = document.getElementById("whatsappButton");
  const href = document.createAttribute("href");
  href.value = `https://api.whatsapp.com/${number}?text=${encoded}`;
  button.setAttributeNode(href);
  console.log(button);
})();


3 Likes

Amazing! @anthonysalamin thank you for the details.

Does this look right for the custom code? From what you said, thatโ€™s what Iโ€™ve done.

Almost, just remove the red highlighted </body> tag, webflow does it for you :wink:

EDIT

your custom code should look like this:

<script>
(function injectWhatsapp() {
  // ๐Ÿง  options
  const number = "491751138245";
  const message = "Let's connect ๐Ÿ‘‹๐Ÿป";
  
  const encoded = encodeURIComponent(message);
  const button = document.getElementById("whatsappButton");
  const href = document.createAttribute("href");
  href.value = `https://api.whatsapp.com/${number}?text=${encoded}`;
  button.setAttributeNode(href);
  console.log(button);
})();
</script>

EDIT 2

Sorry, the path is https://api.whatsapp.com/ not https://wa.me/

2 Likes

Thank you @anthonysalamin your input has been a great help!

1 Like