Как добавить кнопку бизнес-чата Apple на свой сайт WordPress

Опубликовано: 2021-03-01

Apple Message - это функция, которая позволяет веб-мастерам добавлять на свой веб-сайт кнопку бизнес-чата и кнопку телефона / звонка. Это очень полезно и удобно, потому что пользователи могут напрямую обращаться к владельцам веб-сайтов с просьбой о помощи. Поэтому, как владелец веб-сайта, вы обязательно должны добавить кнопку бизнес-чата на свой веб-сайт WordPress, чтобы улучшить взаимодействие с пользователем.

Оглавление скрыть
  1. 1. Шаг 1. Зарегистрируйтесь в бизнес-чате.
  2. 2. Шаг 2. Добавьте библиотеку Javascript.
    1. 2.1. Метод 1: отредактируйте код в файле темы
    2. 2.2. Метод 2: Использование плагина Slim SEO
  3. 3. Шаг 3. Установите кнопку делового чата в желаемое положение.
  4. 4. Последние слова

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

Примечание . Кнопка бизнес-чата доступна только на устройствах Apple. Если пользователи не используют эти устройства, кнопка будет скрыта.

Шаг 1. Зарегистрируйтесь в бизнес-чате

Сначала перейдите на страницу Apple Business Register и зарегистрируйтесь в Business Chat со своим Apple ID. Это довольно просто, поэтому не буду вдаваться в подробности.

перейдите на страницу Apple Business Register и зарегистрируйтесь в Business Chat со своим Apple ID.

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

Шаг 2. Добавьте библиотеку Javascript

Затем вам нужно добавить библиотеку Javascript для отображения кнопки бизнес-чата на веб-сайте. Это можно сделать двумя способами:

Метод 1: отредактируйте код в файле темы

Найдите теги <head></head> или </body> в файле темы. Их расположение будет отличаться в зависимости от темы. Например, я использую тему Justread, поэтому <head><head> находится в файле header.php , а </body> - в файле footer.php .

После того, как вы найдете эти теги выше, добавьте этот код перед </body> или в тег <head><head> :

 <script src = "https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"> </script>

Метод 2: Использование плагина Slim SEO

Помимо редактирования кода в файле темы, вы можете использовать плагин Slim SEO для добавления кода, не открывая файл темы и не ища теги <head><head> и </body> .

Slim SEO полностью бесплатен, поэтому вы можете легко найти его на wordpress.org. На панели управления администратора выберите Плагины > Добавить новый , а затем установите и активируйте плагин как обычно.

Slim SEO - быстрый и автоматизированный плагин для WordPress SEO Slim SEO - быстрый и автоматизированный плагин для WordPress SEO

Автор (ы): eLightUp

Текущая версия: 3.11.1

Последнее обновление: 16 ноября 2021 г.

slim-seo.3.11.1.zip

92% Рейтинги 10,000+ Установлен WP 4.5+ Требуется

После этого перейдите в « Настройки» > « Slim SEO» и добавьте указанный выше код в разделы « Код заголовка» или « Основной код» .

используйте плагин Slim SEO, чтобы добавить код для отображения кнопки делового чата Apple

И не забудьте нажать « Сохранить» .

Кроме того, Slim SEO имеет множество других полезных функций, которые помогут вам автоматически оптимизировать веб-сайты WordPress для SEO. Вы можете узнать больше об этих функциях здесь.

Шаг 3. Отобразите кнопку делового чата в желаемом положении

На этом последнем шаге вам нужно отобразить кнопку Делового чата в нужной области виджетов. Это можно сделать, добавив в виджет некоторый HTML-код. HTML-код должен иметь следующую структуру:

 <div class = "apple-class-name" имя-атрибута яблока> </div>

Я делаю пример с атрибутом в виде data-apple-business-id . Вы помните идентификатор, сделанный на шаге 1? Теперь пришло время использовать это. Мой идентификатор - ca0db090, и я хочу добавить кнопку чата в баннер в container-style , поэтому мой <div> :

 <div class = "apple-business-chat-banner-container" data-apple-business-> </div>

Обратите внимание, что атрибут data-apple-business-id является обязательным. Он используется для указания владельца идентификатора бизнес-чата и отправки им сообщений.

Кроме того, есть много других классов и атрибутов, которые вы можете использовать для кода HTML. Вы можете найти самые популярные классы и атрибуты в списке ниже:

Классы для отображения кнопок чата или вызова:

  • apple-business-chat-banner-container : отображать кнопки чата и вызова
  • apple-business-chat-message-container : отображать только кнопку чата
  • apple-business-chat-phone-container : отображать только кнопку вызова
  • и т.д

Атрибуты для настройки отображения кнопок чата / вызова (цвета, шрифты, размер,…)

  • data-apple-banner-font-family : выберите семейный шрифт для кнопки с призывом к действию
  • data-apple-banner-icon-background-color : выберите цвет фона (кружок) значка
  • data-apple-banner-icon-color : выберите цвета кнопок чата и вызова
  • И Т. Д.

Атрибуты, относящиеся к взаимодействию между клиентами и владельцами веб-сайтов:

  • data-apple-business-group-id : определите отдел, который принимает звонки / сообщения. Например, этому атрибуту можно присвоить ID отделов «Обслуживание клиентов» или «Техническая поддержка».
  • Data-apple-business-phone : введите номер телефона, по которому пользователи могут связаться с вами, если они не могут общаться в чате. Если вы не добавите этот атрибут, кнопка « Позвонить» будет скрыта.
  • И Т. Д.

Кроме того, здесь вы можете найти все атрибуты и классы Apple.

Создав необходимые теги <div> , добавьте их в нужное место с помощью редактора HTML. Например, я хочу отобразить кнопку бизнес-чата в виджете в нижнем колонтитуле темы Justread, и вот способ сделать это.

На панели управления администратора выберите « Внешний вид» > « Виджет» , выберите виджет « Пользовательский HTML» , а затем выберите отображение виджета в нижнем колонтитуле.

отображать виджет в нижнем колонтитуле сайта WordPress

Затем вставьте в виджет следующий код:

 <div>
	class = "яблоко-бизнес-чат-баннер-контейнер"
	данные-яблоко-бизнес-
	data-apple-business-phone = "0987725475"
	data-apple-banner-cta = "Есть вопросы? Мы можем помочь".
	data-apple-banner-context = "Поговорите с одним из наших профессионалов, чтобы получить ваше предложение для iPhone Xs."
	data-apple-banner-scale = "1"
	data-apple-banner-background-color = "rgb (27, 63, 104)"
	data-apple-banner-text-color = "rgb (255, 255, 255)"
	data-apple-banner-icon-background-color = "rgb (255, 255, 255)"
	data-apple-banner-icon-color = "rgba (0, 210, 143, 0.3)"> </div>

Используйте код, чтобы вставить кнопку делового чата

Наконец, нажмите " Сохранить" .

Мы закончили отображать кнопку бизнес-чата в нижнем колонтитуле веб-сайта WordPress. С этого момента пользователи Apple будут видеть кнопку бизнес-чата в нижнем колонтитуле следующим образом:

Отобразите кнопку Business Chat в нижнем колонтитуле веб-сайта WordPress.

Вы можете стилизовать кнопку и отображать ее в других позициях таким же образом, как с приведенным выше кодом, классами и атрибутами. Попробуйте и покажите нам в комментариях!

Последние слова

Использование кода для добавления кнопки бизнес-чата на веб-сайт WordPress может быть довольно трудным для новичков в WordPress. Но если вы будете строго следовать этому руководству, он определенно сработает. После того, как на вашем сайте появится кнопка «Деловой чат», не забывайте отвечать на звонки и сообщения клиентов. Это поможет укрепить доверие между клиентами и владельцем веб-сайта, тем самым улучшив ваш бренд и увеличив конверсию.

Помимо добавления кнопки бизнес-чата, вы также можете добавить кнопку живого чата и кнопку чата клиента Facebook на свой веб-сайт WordPress. Эти функции помогут вам быстрее отвечать на вопросы клиентов.