Онлайн-чаты стали неотъемлемой частью современных сайтов, они помогают создать живое общение между пользователями и администраторами сайта. В этой статье мы рассмотрим, как создать онлайн-чат на вашем сайте. 🔧
Выбор подходящего чат-решения
Первый шаг – определиться с подходящим для вашего сайта чат-решением. Существует множество готовых решений, как платных, так и бесплатных. Вот несколько популярных вариантов:
Tawk.to
LiveChat
Intercom
Jivosite
Установка чат-решения на вашем сайте
После выбора подходящего решения, следует установить его на вашем сайте. Обычно это подразумевает добавление небольшого кода JavaScript на вашу страницу. Вот пример установки Tawk.to на ваш сайт:
Добавьте данный код на вашу страницу перед закрывающим тегом </body>
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/your_ID_here/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</body>
</html>
Настройка чата и обучение команды
После установки чата на вашем сайте, необходимо настроить его внешний вид, а также обучить вашу команду работе с инструментом. Большинство чат-решений предлагают различные настройки, такие как выбор цветов, формы чата и аватаров.
👩💻 Рекомендуется провести обучение вашей команды, чтобы они смогли максимально эффективно использовать возможности чата для общения с клиентами.
Анализ и улучшение качества обслуживания
После внедрения чата на вашем сайте, важно постоянно анализировать его эффективность и улучшать качество обслуживания. Большинство чат-решений предоставляют статистику и аналитику, которые помогут вам определить слабые и сильные стороны вашего онлайн-чата. 📊
Теперь вы знаете основы создания онлайн-чата на вашем сайте. Удачи вам в улучшении взаимодействия с вашими пользователями! 🚀
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
","Зарегистрировавшись на каком-либо внешнем ресурсе"],"correct":1},{"question":"Что необходимо сделать после установки чата на сайте?","answers":["Закрыть сайт для пользователей","Настроить внешний вид и обучить команду","Удалить все другие чат-решения"],"correct":1},{"question":"Как можно улучшить качество обслуживания через онлайн-чат?","answers":["Постоянно анализируя его эффективность","Ограничив часы работы чата","Скрывая статистику от команды"],"correct":0},{"question":"Какие решения представлены в статье для создания онлайн-чата?","answers":["Discord и Slack","Tawk.to и LiveChat","Zoom и Skype"],"correct":1}]}`;
const $wrapper = jQuery('.media-article-test__main');
const { data: testData } = JSON.parse(test_data_json);
let current = 0;
function showForm() {
const input = document.querySelector(".media-article-test__form .media-article-test__form-input--phone");
const iti = window.intlTelInput(input, {
initialCountry: "ru",
strictMode: true,
showSelectedDialCode: true,
utilsScript: "https://fastly.jsdelivr.net/npm/intl-tel-input@21.2.7/build/js/utils.js",
});
jQuery.validator.addMethod("phoneValid", function () {
return iti.isValidNumber()
})
const $form = jQuery('.media-article-test__form');
$form.css('display', '');
$form.on('submit', (e) => {
e.preventDefault();
})
$form.validate({
rules: {
phone: {
required: true,
phoneValid: true
},
email: {
required: true
}
},
messages: {
phone: {
required: "Телефон обязателен",
phoneValid: "Введите корректный телефон"
},
email: {
required: "Почта обязательна",
email: "Введите корректный email"
}
},
focusInvalid: false,
submitHandler: async function (form) {
const $phone = $form.find('input[name="phone"]').get(0);
const $email = $form.find('input[name="email"]').get(0);
const $name = $form.find('input[name="name"]').get(0);
const utm_campaign = encodeURIComponent(window.location.href.split('?')[0])
const formData = new FormData();
$name.value && formData.append("name", $name.value);
formData.append("email", $email.value);
formData.append("phone", window.intlTelInputGlobals.getInstance($phone).getNumber());
formData.append("queryParams", `utm_source=skypro_blog&utm_campaign=${utm_campaign}`);
formData.append("sourceKey", "skypro_blog_article_test");
formData.append("funnel", "televox");
formData.append("televox_import_group_id", "9111");
$form.addClass("media-article-test__form--loading");
try {
await fetch('https://api.sky.pro/api/v1/lead/tilda', {
method: 'POST',
body: formData,
});
jQuery('.media-article-test__success').css('display', '');
try {
ym(69215599, "reachGoal", "marketing_lead");
ym(69215599, "reachGoal", "send_any_form");
} catch (e) {}
// $modalWrap.css("display", "none");
} catch (e) {
// $modal.removeClass("spm-voting__modal--loading");
// jQuery(".spm-voting__form-submit-error").css("display", "block");
jQuery('.media-article-test__form-title').text('Ошибка выполнения запроса!');
} finally {
$form.removeClass("media-article-test__form--loading");
jQuery('.media-article-test__form-submit').css('display', 'none');
jQuery('.media-article-test__form .iti').css('display', 'none');
jQuery('.media-article-test__form-input[name="name"]').css('display', 'none');
jQuery('.media-article-test__form-input[name="email"]').css('display', 'none');
}
}
})
const $testBlock = jQuery('.media-article-test__main');
$testBlock.css('filter', 'blur(10px)');
$testBlock.css('background', 'none');
$testBlock.css('pointer-events', 'none');
$form.css('display', '');
jQuery('.media-article-test').css('min-height', '360px');
jQuery('.media-article-test__title').css('display', 'none');
jQuery('.media-article-test__subtitle').css('display', 'none');
}
function render() {
const { question, answers } = testData[current]
$wrapper.html(`
Одной из распространенных задач при верстке веб-страниц является центрирование элементов. Это может быть необходимо для улучшения визуального восприятия
Особенностью языка программирования JavaScript является то, что при объединении двух массивов создается новый массив. Это может вызвать затруднения для
Добавить комментарий