Feedback block

To add a feedback block, use the nested <div> tag structure:

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


<div data-block="widget-feedback" data-title="Feedback" 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>

Attributes of the external <div data-block="widget-feedback">:

Attribute Description
data-title Takes an arbitrary text value. For example, “Feedback”. Displayed on the Turbo page if you pass the data-stick attribute set to false.
data-stick
Allows block alignment. Possible values:
  • left — Left alignment. With this layout, you can place up to four buttons. The buttons are placed vertically.
  • right — Right alignment. With this layout, you can place up to four buttons. The buttons are placed vertically.
  • false — The block will be located on the page in the place you specified in the RSS channel. In this case, the number of buttons is unlimited — the user can scroll the block to the needed button.

Attributes of the nested <div data-type="...">:

Attribute Description
data-type Allows you to send the connection type. Possible values:
  • call — Allows you to specify a phone number.
  • chat — Allows you to add a business chat.
  • mail — Allows you to specify an email address.
  • callback — Allows you to add a feedback form, that opens over the page content when the user taps the button.
The following values set the messenger or social network:
  • facebook.
  • google.
  • odnoklassniki.
  • telegram.
  • twitter.
  • viber.
  • vkontakte;
  • whatsapp.
data-url

Allows you to pass contact information. Use it only for the call and mail connection types, as well as for messengers.

Possible values:
  • Phone number or link in the tel:<Telephone number> format.
  • Email address or link in the mailto:<адресformat.
  • The URL of the chat or messenger channel.
  • The URL of the social network page (group, contact and so on).
data-send-to
Allows you to specify the email address to send the user's message to. Use it for the callback connection type.
Note. Enter an email address that's located on your domain. If you don't have such an email address, you can use Yandex.Mail for domain to create one.
data-agreement-company ** Lets you specify your organization's legal name. For example, “Chamomile” LLC. Use it for the callback connection type.
data-agreement-link *** Allows you to specify a link to the user agreement on providing feedback. Use it for the callback connection type.

** This attribute is required if you specified the data-agreement-link attribute.

How to add a business chat

More about the Chat for business technology.

  1. Create an account on one of the supported chat platforms.
  2. In the Yandex.Dialogs service, create a chat for the site or individual pages.

    To create a chat for the whole site, specify the domain of the source page for which the Turbo page is generated in the chat settings. You can also create a chat only for the source page. In this case, its address in the chat settings must match the address in the data source that you send through Yandex.Webmaster.

  3. Add the div element with the data-type attribute set to chat to the feedback block in your RSS feed.

The chat will appear in the search results according to the schedule specified in the chat settings.

Examples of elements in the feedback block
Making a call
<div data-block="widget-feedback" data-title="Feedback" data-stick="right">
    <div data-type="call" data-url="+7 012 345-67-89"></div>
</div>
Sending an email
...<div data-block= "widget-feedback" data-title= "Feedback" data-stick= "right">    <div data-type= "mail" data-url="mailto:mail@example.com">< / div>< / div>...
Calling a feedback form
<div data-block="widget-feedback" data-title="Feedback" data-stick="right">
    <div data-type="callback"
         data-send-to="mail@example.com"
         data-agreement-company="Daisy Inc."
         data-agreement-link="http://example.com">
    </div>
</div>
Calling a business chat
<div data-block="widget-feedback" data-title="Feedback" data-stick="right">
    <div data-type="chat"></div>
</div>
Calling a messenger chat
<div data-block="widget-feedback" data-title="Feedback" data-stick="right">
    <div data-type="telegram" data-url="https://t.me/example"></div>
</div>
General example
<div data-block="widget-feedback" data-title="Feedback" 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>