Как встроить плавающую кнопку WhatsApp на веб-сайт html

О плагине Floating WhatsApp Button

Хотите расширить функциональность своего сайта, добавив плавающую кнопку WhatsApp, но не знаете как? Вот несколько готовых решений, которые могут вам помочь, например, плагин, который можно встроить в HTML-код любого сайта, от WordPress и Squarespace до Shopify и Wix. И мы можем предоставить вам это решение. Это плагин Floating WhatsApp Button от Elfsight. С помощью этого плагина вы можете легко создать окно чата для любых целей на своем сайте.

1. Начните с выбора подходящего шаблона для чата.
2. Подключите свой профиль и настройте окно чата.
3. Получите код для своего виджета чата WhatsApp.
4. Вставьте код на свой сайт.

Создайте свою плавающую кнопку WhatsApp прямо здесь всего за несколько кликов!

Добавить плавающую кнопку WhatsApp в HTML-код веб-сайта

Вы можете создать плавающую кнопку WhatsApp всего за несколько щелчков мыши и добавить ее в HTML-код вашего веб-сайта. HTML поможет вам создать веб-сайт для любых целей. И даже если создание веб-сайта несложное, добавление дополнительных элементов, таких как плавающая кнопка, может потребовать сторонней помощи. Это можно легко сделать с помощью нашего удобного конфигуратора. Давайте посмотрим, как это можно сделать.

1. Создайте учетную запись в Elfsight Apps и войдите в панель администратора.
2. В конфигураторе выберите и настройте плавающий шаблон.
3. Сохраните плавающую кнопку чата.
4. Скопируйте код установки, который появится во всплывающем окне.
5. Вставьте код плагина в нужное место на вашем сайте.

Это было довольно просто, не так ли? Если вы предпочитаете более наглядное руководство по добавлению плавающей кнопки WhatsApp в ваш HTML-код, посмотрите видео ниже:

Как добавить плавающую кнопку WhatsApp в WordPress и другие платформы

WordPress — один из самых популярных конструкторов сайтов в мире, поэтому неудивительно, что многим пользователям требуется руководство по добавлению плавающей кнопки чата. Добавить кнопку чата WhatsApp для WordPress на сайты очень просто. Ниже мы расскажем, как это сделать с помощью собственного редактора WordPress. Вы увидите, как легко добавить WhatsApp в WordPress.

После того, как вы создали и настроили плавающую кнопку чата в панели администратора Elfsight, вставьте код установки в поле HTML панели администратора WordPress. Это действительно легко реализовать! Обычно вам следует вставить код установки в раздел кода HTML. Вот как это работает:

1. Создайте свой плагин плавающей кнопки WhatsApp в панели администратора, выбрав соответствующий шаблон.
2. Сохраните результат и скопируйте код установки из специального всплывающего окна.
3. Войдите в панель администратора WordPress.
4. Перейдите в раздел «Страницы» и выберите страницу, на которую вы хотите встроить кнопку.
5. Добавьте пользовательский HTML-блок в нужное место на сайте.
6. В этот HTML-блок вставьте код плавающей кнопки, который вы получили в генераторе.
7. Нажмите «Обновить», чтобы сохранить все изменения.

Вы можете вносить столько настроек, сколько захотите, на панели Elfsight, и они будут отражены в вашей плавающей кнопке чата. Никаких изменений в HTML-коде вашей страницы WordPress не требуется.

Наш чат WhatsApp также доступен на других платформах, таких как Wix. Вот простые инструкции о том, как добавить плагин чата на определенную страницу Wix:

1. Войдите в конструктор сайтов Wix, выберите страницу, на которой вы хотите разместить наш плагин, и нажмите «Изменить сайт».
2. Добавьте блок HTML, нажав на значок «плюс», перейдя в раздел «Встроить» и выбрав «Встроить виджет» на вкладке «Пользовательские вставки».
3. Вставьте код установки. Затем нажмите «Ввести код», вставьте фрагмент кода и нажмите «Обновить».
4. Отрегулируйте размер и положение плагина. Перетащите плагин в нужное место и изменяйте размеры, пока он не будет идеально подходить — без полос прокрутки.
5. Оптимизируйте плагин для мобильных устройств и опубликуйте его. Щелкните значок мобильного устройства, чтобы работать в мобильном редакторе, при необходимости отрегулируйте размер плагина, а затем нажмите «Опубликовать».

Готово! Вы добавили приложение Elfsight на определенную страницу вашего сайта Wix.

А как насчет добавления чата WhatsApp в Shopify? Это просто. Вот как это сделать всего за несколько шагов:

1. Войдите в панель администратора Shopify и перейдите в раздел «Каналы продаж» → «Интернет-магазин».
2. Нажмите кнопку «Настроить», чтобы открыть визуальный редактор.
3. Чтобы изменить страницу, используйте раскрывающийся список вверху.
4. Нажмите «Добавить раздел» и выберите «Пользовательский Liquid».
5. Вставьте свой код чата WhatsApp Shopify в поле Custom Liquid, при необходимости настройте цвета и интервалы и сохраните.

Таким образом, вы можете легко добавить пользовательский чат WhatsApp на страницы своего сайта Shopify.

Кнопка WhatsApp: интересные варианты использования

При создании и настройке плавающей кнопки чата WhatsApp для WordPress или любого другого сайта одной из распространенных проблем являются трудности с настройкой. Особенно это касается вводных текстов, не всегда понятно, как их оформить в HTML-коде веб-сайта. Вот почему мы собрали несколько примеров дизайна, которые вы можете использовать в качестве вдохновения.

Пример 1: встраивание кнопки чата

Это пример плавающей кнопки для WordPress или другого веб-сайта с классическим дизайном, который будет знаком пользователям. Чтобы открыть настраиваемое диалоговое окно, пользователю нужно просто нажать на кнопку. Окно чата включает в себя настраиваемое сообщение о времени ответа, которое укрепляет доверие ваших посетителей — они будут видеть, что вы всегда готовы ответить на вопросы.

Пример 2: кнопка «Совет»

Значок чата WhatsApp на WordPress или любом другом веб-сайте — отличный способ предложить пользователям совет по их вопросам. Благодаря обширным возможностям настройки плагина вы можете легко подобрать цвета кнопок и окна чата к дизайну вашего сайта и его HTML-коду.

Пример 3: Кнопка регистрации

Поддержка клиентов и регистрация являются важной частью любого коммерческого сайта. Предоставление этих услуг через окно чата, встроенное в HTML-код вашего WordPress или другого сайта, — отличная идея. Вы можете использовать плавающую кнопку чата на всех страницах вашего сайта, чтобы постоянно оставаться на связи с клиентами и повышать качество обслуживания.

Пример 4: Кнопка обратной связи

Хотите улучшить качество своих продуктов и услуг, получая быструю и надежную обратную связь? Тогда плавающая кнопка чата в HTML-коде вашего сайта поможет вам в этом — любой может нажать на нее в любое время, чтобы поделиться своим мнением. Как и в предыдущих примерах, вы можете легко настроить дизайн чата в нужных вам цветах, чтобы легко интегрировать его в общий вид вашего веб-сайта.

Преимущества плавающей кнопки WhatsApp для вашего бизнеса

Почему вам следует вставить плавающую кнопку WhatsApp в HTML-код вашего веб-сайта? Ответ прост — из-за простоты использования. Она предлагает вашей целевой аудитории возможность взаимодействовать с вашим бизнесом всего за два клика. Не требуется заполнение форм, телефонных номеров или сообщений. Всего два клика: один на веб-сайте, другой в приложении WhatsApp. Что может быть проще?

Большинству людей удобнее общаться через мессенджеры, интерфейс которых им знаком. Это более практично, чем электронная почта, телефон или онлайн-чат. Ниже мы объясним, почему вам стоит подумать о добавлении кнопки чата WhatsApp на свой сайт.

Повышение популярности с помощью кнопки

WhatsApp — второй по величине сервис в мире после Facebook. По данным Statista, WhatsApp имеет более 500 000 ежедневных активных пользователей. Во многих странах WhatsApp является ведущим мессенджером по количеству пользователей.

Быстрый канал связи с кнопкой

Люди воспринимают мессенджеры как быстрый канал связи. Продавец быстро ответит на сообщения в любом канале, но пользователь ответит быстрее в WhatsApp. Почему?

• WhatsApp пользуется высоким уровнем доверия среди пользователей. Даже если кому-то не нравится приложение, они все равно установят его — как канал связи с семьей и друзьями. Вот почему многие особенно быстро отвечают на сообщения WhatsApp.
• WhatsApp — это не спам-канал. Большую часть времени мы получаем сообщения там только от людей, которых знаем. В нем нет навязчивой рекламы, раздражающих push-уведомлений, новостных лент и массового спама.
• Непрочитанные сообщения отвлекают пользователей. Даже если они не хотят отвечать, они откроют сообщение.
• Эти пункты не относятся к электронным письмам. Если электронное письмо не кажется важным, его могут никогда не открыть, и вы никогда не узнаете, было ли оно прочитано.

WhatsApp также отображает статусы сообщений. Вы можете видеть, прочитал ли клиент ваше сообщение, и наоборот, пользователь также знает, что вы его видели. Это увеличивает вероятность ответа. Даже краткое «да» или «нет» помогает вам спланировать следующий шаг.

Более непринужденная атмосфера с кнопкой WhatsApp

Люди воспринимают разговоры в WhatsApp как непринужденное общение — разговор без формальностей. Такие диалоги кажутся привлекательными. Пользователи не боятся делать ошибки, задавать вопросы или шутить. С другой стороны, электронные письма по-прежнему считаются формальными и требуют структурированных, подробных текстов. «Это требует времени», — думает пользователь — и предпочитает ответить конкуренту через WhatsApp.

Кнопка призыва к действию

Важность призыва к действию (CTA) невозможно переоценить. Логотип WhatsApp сам по себе не является призывом к действию. Не все посетители вашего сайта сразу понимают, что делает кнопка чата. И даже если они это делают, без четкого CTA коэффициент конверсии низок.

Без CTA конверсии падают. CTA-подсказка также не особенно эффективна. Лучше всего работает сообщение, которое постоянно видно и интегрировано непосредственно в плагин.

Индивидуальный дизайн кнопки

Важным аспектом является обеспечение того, чтобы кнопка чата гармонично вписывалась в дизайн вашего сайта. Гибкие настройки предотвращают конфликты дизайна с другими элементами вашей страницы. Идеальным вариантом является сервис, который позволяет изменять шрифт, цвет, размер и положение.

Заключение

Плагин WhatsApp — это не волшебный инструмент, который немедленно принесет вам массовые заказы. Но при правильном использовании он может значительно улучшить конверсию мобильного трафика на вашем сайте.