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

Чтобы разместить блок обратной связи, используйте вложенную структуру тегов <div>:

<div data-block="widget-feedback" ...>
    <div data-type="..." ...>
    ...
</div>


<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="call" data-url="+7 012 345-67-89"></div>
    <div data-type="telegram" data-url="https://t.me/example"></div>
    <div data-type="mail" data-url="mailto:mail@example.com"></div>
    <div data-type="chat"></div>
</div>

Возможные атрибуты внешнего <div data-block="widget-feedback">:

Атрибут Описание
data-title Принимает произвольное текстовое значение. Например, «Обратная связь». Отображается на Турбо-странице, если вы передаете атрибут data-stick со значением false.
data-stick
Позволяет выравнивать блок. Возможные значения:
  • left — выравнивание по левому краю страницы. При таком расположении вы можете разместить до четырех кнопок. Кнопки будут расположены вертикально.
  • right — выравнивание по правому краю страницы. При таком расположении вы можете разместить до четырех кнопок. Кнопки будут расположены вертикально.
  • false — блок будет расположен в том месте страницы, где он указан в RSS-канале. В этом случае количество кнопок не ограничено — пользователь сможет прокрутить блок до нужной кнопки.

Возможные атрибуты вложенного <div data-type="...">:

Атрибут Описание
data-type Позволяет передать тип связи. Возможные значения:
  • call — позволяет указать номер телефона;
  • chat — позволяет добавить чат для бизнеса;
  • mail — позволяет указать адрес электронной почты;
  • callback — позволяет добавить форму обратной связи, которая при нажатии кнопки откроется поверх содержимого страницы.
Следующие значения определяют мессенджер или социальную сеть:
  • facebook;
  • google;
  • odnoklassniki;
  • telegram;
  • twitter;
  • viber;
  • vkontakte;
  • whatsapp.
data-url

Позволяет передать контактную информацию. Используйте только для типов связи call и mail, а также мессенджеров.

Возможные значения:
  • номер телефона или ссылка вида tel:<номер телефона>;
  • адрес электронной почты или ссылка вида mailto:<адрес>;
  • URL, по которому доступен чат или канал в мессенджере;
  • URL, по которому доступна страница социальной сети (группа, контакт и др.).
data-send-to

Позволяет указать адрес электронной почты, на который будет отправлено обращение пользователя. Используйте для типа связи callback.

data-agreement-company ** Позволяет указать юридическое название вашей организации. Например, ООО «Ромашка». Используйте для типа связи callback.
data-agreement-link *** Позволяет указать ссылку на пользовательское соглашение о предоставлении обратной связи. Используйте для типа связи callback.

** Атрибут становится обязательным, если указан атрибут data-agreement-link.

Как добавить чат для бизнеса

Подробно о технологии Чат для бизнеса.

  1. Заведите учетную запись на одной из поддерживаемых чат-платформ.
  2. В сервисе Яндекс.Диалоги создайте чат для сайта или отдельных страниц.

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

  3. Добавьте элемент div с атрибутом data-type и значением chat в блок обратной связи вашего RSS-канала.

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

Примеры элементов в блоке обратной связи
Вызов звонка
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="call" data-url="+7 012 345-67-89"></div>
</div>
Отправка письма
...
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="mail" data-url="mailto:mail@example.com"></div>
</div>
...
Вызов формы обратной связи
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="callback"
         data-send-to="mail@example.com"
         data-agreement-company="ООО Ромашка"
         data-agreement-link="http://example.com">
    </div>
</div>
Вызов Чата для бизнеса
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="chat"></div>
</div>
Вызов чата в мессенджере
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="telegram" data-url="https://t.me/example"></div>
</div>
Общий пример
<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="call" data-url="+7 012 345-67-89"></div>
    <div data-type="telegram" data-url="https://t.me/example"></div>
    <div data-type="mail" data-url="mailto:mail@example.com"></div>
    <div data-type="chat"></div>
</div>