How to make WhatsApp Icon open WhatsApp?

Design help Animations & Interactions
1

Video with voice over concerning question.

https://vimeo.com/380526890

Many thanks!

2

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>

3

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!)

4

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.

5

@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

6

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);
})();

Screenshot (974)
Screenshot (974)1920×1080 217 KB

Screenshot (975)
Screenshot (975)1920×1080 217 KB

3 Likes
7

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.

Screenshot 2019-12-19 at 17.42.58
Screenshot 2019-12-19 at 17.42.58939×960 91.5 KB

8

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
9

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

1 Like
13

Using WhatsApp Aero, it will help you to solve that problem