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

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

Эти кнопки дают возможность написать пользователю в указанный мессенджер — 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. переписка никаким образом не подгружается в Геткурс. Для того чтоб подгружалась нужна полноценная настройка интеграций с бизнес-ватсапом и Вайбером.

Вам также может понравиться:

Регистрация аккаунта для Геткурс — подробная инструкция, нюансы

Инструкция по регистрация аккаунта , бонус при...

Настройка геткурс "под ключ" — стоимость

Если вы тут - скорее всего ищите технического специалиста по Getcourse. Мой опыт в теме геткурса и...

Настройка геткурс бесплатно

Базовая бесплатная настройка аккаунта...

Дашборды геткурс: настройка, примеры

Когортный анализ, дашборды автоворонки, по...