Кнопки Ватсап и Вайбер для карточки пользователя в Геткурс

В данной статье я расскажу как настроить вот такие кнопочки в карточке пользователя как на картинке ниже.

Кнопки Ватсап и Вайбер для карточки пользователя в Геткурс

Эти кнопки дают возможность написать пользователю в указанный мессенджер — whatsapp или viber (если он у него подключен) без настройки стандартной интеграции Getcourse

Этот вариант подходит, если у вас завтра запуск и нужно быстро настроить возможность писать людям в мессенджеры без кучи доплат и настройки бизнес-ватсапов

Для того чтобы это настроить:

  1. Заходим в «настройки аккаунта» — > Настройки
  2. Находим там поле «Дополнительные теги для HEAD (применяются в течение 10 минут )» и добавляем туда код ниже
<script type="text/javascript">
$(function(){
  window.isMobile = /Mobile|webOS|BlackBerry|IEMobile|MeeGo|mini|Fennec|Windows Phone|Android|iP(ad|od|hone)/i.test(navigator.userAgent);
  var nint = setInterval(function() {
    if($('#whatsapp_button').length == 0) {
      if($(".user-phone-widget").length) {
        var phone = $('.user-phone span[data-reactid=".0.1.1.0.0.1.4.2"]').text().replace(/\D+/g,'');
        if(phone[0] == 3 && phone.length == 10) phone = "39"+phone;
        if(phone[0] == 9 && phone.length == 10) phone = "7"+phone;
        if(phone[0] == 8 && phone.length == 11) phone = "7"+phone.slice(1);
        $(".user-phone-widget").after(`
          <span><a href="${(window.isMobile ? 'https://wa.me/' : 'https://wa.me/') + "+" + phone}" target="_blank">
            <button id="whatsapp_button" class="btn btn-sm btn-default" style="
              margin: 0 0 3px;
              background-color: #25D366;
              color: white;
              padding: 4px 5px;
              border: none;
              border-radius: 30px;
              height: 22px;
            "><svg style="width: 12px;" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>
            </button>
          </a></span>
          <span><a href="${(window.isMobile ? 'viber://add?number=' : 'viber://chat?number=') + "+" + phone}" target="_blank">
            <button id="viber_button" class="btn btn-sm btn-default" style="
              margin: 0 0 3px;
              background-color: #59267c;
              color: white;
              padding: 4px 5px;
              border: none;
              border-radius: 30px;
              height: 22px;"><svg style="width: 12px; margin-top: 1px;" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="viber" class="svg-inline--fa fa-viber fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z"></path></svg>
            </button>
          </a></span>
        `);
      }
    }
  },50);
});
</script>

3. Сохраняем.

Все, можно писать людям.

При этом нужно понимать, что:

1. писать вы (или ваш менеджер) будет от своего личного аккаунта вайбер или ватсап. То есть от того аккаунта, под которым вы авторизованы на конкретном компьютере. Для таких случаев иногда создается отдельный серый бизнес-ватсап, под которым авторизуются все менеджеры на своих местах и переписываются от его имени (в этом случае все переписки менеджеров будут находиться в одном месте)

2. переписка никаким образом не подгружается в Геткурс. Для того чтоб подгружалась нужна полноценная настройка интеграций с бизнес-ватсапом и Вайбером.

Технический консультант для онлайн-школ. Исследую, изучаю, настраиваю, пишу.

Оцените автора
Добавить комментарий

  1. Анна

    Добрый день!
    Подкажите как получить скрипт?
    И правильно понимаю это временный вариант, так как скрипт будет отображаться в НЕАD на страницах аккаута?

    Ответить
    1. Екатерина Саламатова автор

      Здравствуйте, скрипт выложен в статье в п.2. Да, скрипт будет везде отображаться, на всех страницах, т.к. в геткурсе нет возможности вносить изменения в отдельные страницы аккаунта

      Ответить
      1. Юрий

        К сожалению, он некликабельный

        Ответить
  2. Ирина

    Добрый день! Подскажите возможно ли получить данный скрипт? Сейчас страница не активна для копирования

    Ответить
    1. Екатерина Саламатова автор

      добрый день, отправила на почту

      Ответить
  3. Андрей

    Добрый вечер, могу ли так же получить скрипт на почту, Екатерина?
    Заранее благодарю!

    Ответить
    1. Екатерина Саламатова автор

      добрый, выслала на почту. так же можно можно скачать здесь

      Ответить
      1. Екатерина Саламатова автор

        Скрипт можно скачать, он выложен в комментариях выше..

        Ответить
  4. Елена

    Скрипт не копируется с сайта, есть возможность его в текстовом виде выслать?

    Ответить