Как сделать комбо сылку с вариантами выбора способа связи на сайте?

Question

Как сделать, чтобы по клику по номеру телефона предлагались варианты связи, например по whatsapp и просто tel:123123123 ?

дополняю для ясности. как можно объединить эти способы в 1 ссылку? Чтобы юзер мог выбрать из: позвонить на васап или просто позвонить?

Answer 1

Если просто телефон тогда добавляете атирибут tel (<a href="tel:{ваш телефон}">ваш телефон</a>), а если ватсап пишите ссылку в таком формате https://wa.me/{ваш телефон}), так же для ватсапа телефон должен быть в международном формате

Answer 2

Можно сделать, например, такой выбор

#call {
  display: none;
}

#call_hidden {
  display: none;
}

#call ~ label {
  cursor: pointer;
}

#call:checked ~ #call_hidden {
  display: block;
}

<span>
  <input type="checkbox" id="call">
  <label for="call">Позвонить</label><br>
  <span id="call_hidden">
    <a href="tel:+71234567890">По телефону</a><br>
    <a href="https://wa.me/71234567890">По WhatsApp</a>
  </span>
</span>

Answer 3

Использовал код от CbIPoK2513
В html в .super_tel прописывается телефон без +7 и вместо этого блока в итоге получается две ссылки

const super_tel = document.querySelector('.super_tel');
const call_hidden = document.querySelector('#call_hidden');
const aTags = 
`
<a href="+7${super_tel.innerText}">По телефону</a>
<a href="https://wa.me/7${super_tel.innerText}">По WhatsApp</a>
`;
super_tel.remove();
call_hidden.insertAdjacentHTML('beforeend', aTags);

#call {
  display: none;
}

#call_hidden {
  display: none;
}

#call ~ label {
  cursor: pointer;
}

#call:checked ~ #call_hidden {
  display: block;
}

#call_hidden > * {
  display: block;
}

<span>
  <input type="checkbox" id="call">
  <label for="call">Позвонить</label><br>
  <span id="call_hidden">
    <span class="super_tel">1234567890</span>
  </span>
</span>

БЛОГ НА HUSL

Как сделать комбо сылку с вариантами выбора способа связи на сайте?

Ответы (3 шт):