How to call different whatsapp numbers on location based? - css

Question

Am planning to have a WhatsApp floating button on a landing page, have 5 WhatsApp numbers on 5 different countries. Is there any way to load the location based. eg, US region to US WhatsApp number and Canadian region to Canadian WhatsApp number.
<!-- CTA float -->
<div class="wh-api "><button class="wh-ap-btn"></button></div>
CSS
.wh-api {
z-index: 99999;
Position: fixed;
bottom: 20px;
right: 20px; display: block!important;
}
button.wh-ap-btn {
outline: none;
width: 54px;
height: 54px;
border: 0;
background-color: #25d366;
padding: 0;
border-radius: 100%;
box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, .14);
cursor: pointer;
transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;
}
button.wh-ap-btn::after {
content: '';
background-image: url(../images/whatsapp.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 48%;
width: 100%;
height: 100%;
display: block;
opacity: 1;
}
button.wh-ap-btn:hover {
opacity: 1;
background-color: #01E675;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .13);
}
.ctc-button {
display: block!important;
position: fixed;
bottom: 20px;
left: 15px;
z-index: 100;
background-color: #fcd12a;
border-radius: 100%;
padding: 5px;
width: 54px;
height: 54px;
box-shadow: 0 4px 3px rgb(0 0 0 / 12%), 0 4px 4px rgb(0 0 0 / 14%);
cursor: pointer;
transition: opacity .3s,background .3s,box-shadow .3s;
}