Установка на веб-сайте

Добавьте загрузчик виджетов на все страницы, где будут виджеты, и поставьте теги виджетов туда, где они должны появиться. Установка занимает 5–15 минут.

Что понадобится

• Доступ к HTML-шаблонам сайта.
• Код загрузчика. Готовый код с вашими настройками показывает раздел Виджеты по значку Показать инструкции по установке, раздел открыт ролям Менеджер и Администратор. Без него понадобится Company ID из раздела Настройки → Разработчикам (роль Администратор).
• Для установки с настройками в коде сайта: токен OAuth-приложения со скоупами content_api и submissions_api из того же раздела Разработчикам.

Шаг 1. Выберите, где будут настройки

Загрузчик бывает двух видов. Выберите вкладку и используйте её код в шаге 2.

Настройки в скрипте провайдера

Настройки хранятся в Aplaut и меняются в личном кабинете, код сайта при этом не правится. Загрузчик берёт скрипт по адресу вашей компании:

https://get.aplaut.io/f/v2/<COMPANY_ID>/app.js

Скрипт провайдера с настройками заполняют в разделе Виджеты: см. как настроить виджеты в личном кабинете. Пока в разделе выключен переключатель Отдавать скрипт провайдера вместо бандла, по этому адресу приходят виджеты без настроек, и на сайте они не появляются.

Настройки в коде сайта

Настройки стоят в коде страницы, и любая их правка означает выкладку сайта. Загрузчик берёт код виджетов напрямую:

https://get.apltcdn.com/v1/app.js

Сразу после загрузчика вызовите aplaut.init с токеном и перечнем виджетов, которые стоят на сайте:

<script>
  aplaut.init("<ACCESS_TOKEN>", {
    companyId: "<COMPANY_ID>",
    locale: "ru",
    availableWidgets: ["reviews", "reviewsForm", "gallery", "summary", "questionsAnswers"],
  });
</script>

Виджет, которого нет в availableWidgets, не загрузится. Остальные параметры — в справочнике JS API.

Если сайт вызывает aplaut.init и одновременно получает скрипт провайдера, настройки сайта теряются: действуют настройки из скрипта провайдера. Подробнее — в статье о том, где живут настройки виджетов.

Шаг 2. Добавьте загрузчик в <head>

Вставьте код в <head> на всех страницах с виджетами, до любых вызовов aplaut.* в коде страницы. Замените адрес в конце загрузчика на адрес из шага 1.

<link rel="preconnect" href="https://get.aplaut.io" />
<link rel="preconnect" href="https://get.apltcdn.com" />
<script>!function(t, e, n, c){if(!t[n]){var r, o, c;function s(t){r[t]=function(){o.push([t].concat(Array.prototype.slice.call(arguments, 0)))}}t[n]={}, (r=t[n]).v="1.0", r.q=[], o=r.q, r.init=function(t, e){r.initArgs=arguments}, r.start=function(){for(i=0;i<c.length;i++)s(c[i])}, r.start(), a=document.createElement("script"), m=document.getElementsByTagName("script")[0], a.async=1, a.src=e, a.type="module", m.parentNode.insertBefore(a, m)}}(window, "https://get.aplaut.io/f/v2/<COMPANY_ID>/app.js", "aplaut", ["createWidget", "on", "emit", "off", "setParams", "setConsumer", "setAuthParams", "setAuthStrategy", "manageOrder", "clearFormData", "setLocale", "applyStyles", "showReviewForm", "setProductReviewInviteVisible"]);</script>

Массив в конце перечисляет методы, которые можно вызывать до загрузки скрипта. В загрузчике из раздела Виджеты он короче: чтобы вызывать сразу setLocale, applyStyles, showReviewForm или setProductReviewInviteVisible, замените массив на приведённый выше.

Шаг 3. Разместите теги виджетов

Поставьте тег виджета в то место страницы, где он должен появиться, и укажите в data-context-id ID товара, под которым товар загружен в Aplaut (offer.id из YML-каталога).

<ap-informer data-context-id="12345"></ap-informer>
<ap-reviews data-context-id="12345"></ap-reviews>

Виджет	Тег
Отзывы	<ap-reviews>
Информер с рейтингом	<ap-informer>
Вопросы и ответы	<ap-questions-answers>
Галерея фото и видео	<ap-reviews-gallery>
AI-сводка отзывов	<ap-reviews-summary>
Форма отзыва без списка	<ap-reviews-form>
Сторис	<ap-stories>

В коде из раздела Виджеты у тегов есть ещё class="aplaut-widget-instance" и data-widget. С тегами виджетов они не нужны, но и не мешают. Настройки конкретного экземпляра задаются data-атрибутами на том же теге: см. справочник настроек виджетов.

До загрузки тег — пустой блок. Виджет использует container queries, поэтому задайте тегу ширину родительского блока стилями, а информеру и отзывам — минимальную высоту min-height, чтобы страница не прыгала при загрузке.

Кнопку «Оставить отзыв» вне карточки товара, например в списке заказов покупателя, подключите вызовом aplaut.showReviewForm() по клику. На странице при этом должен стоять виджет отзывов или форма отзыва.

Проверка результата

Откройте страницу с виджетом. Виджет появился там, где стоит тег, в консоли браузера нет ошибок, а на вкладке «Сеть» запросы к API Aplaut отвечают 200.

Признак	Причина	Что сделать
Ответ 401	Токен не подходит или истёк: по умолчанию токен действует два года	Выдайте новый токен приложения со скоупами content_api и submissions_api
Ответ 403 при отправке отзыва	У токена нет скоупа submissions_api	Выдайте токен приложения с этим скоупом
Ответ 404	Товара нет в Aplaut	Проверьте, что товар загружен и data-context-id совпадает с offer.id из фида
Тег пустой, запросов нет	Виджета нет в availableWidgets или выключен переключатель Отдавать скрипт провайдера вместо бандла	Добавьте модуль или включите переключатель в разделе Виджеты

Смотрите также: как настроить виджеты в личном кабинете, что делать, если опубликованный отзыв не виден на сайте.