Как показать покупателю приглашение оставить отзыв

Как установить виджет «Приглашение оставить отзыв», который показывает вошедшему покупателю купленные и ещё не оценённые товары

Установите виджет Приглашение оставить отзыв, чтобы вошедший на сайт покупатель видел товары, которые он купил и ещё не оценил. Клик по товару открывает форму отзыва. На десктопе окно появляется поверх страницы, на мобильных устройствах выезжает снизу.

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

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

Менеджер Aplaut включил аутентификацию покупателей и создание запросов на отзыв при отправке писем из кампаний. Без этого виджет получает пустой список.
Вход покупателя по JWT уже настроен: см. как настроить вход покупателя для отзывов.
В aplaut.init задан companyId.
На каждой странице с приглашением есть форма отзыва: виджет <ap-reviews> или <ap-reviews-form>.

Шаг 1. Проверьте методы загрузчика

В массиве методов в конце загрузчика должны быть setConsumer и setProductReviewInviteVisible. В загрузчике из раздела Виджеты нет setProductReviewInviteVisible, поэтому замените массив целиком:

["createWidget", "setUser", "on", "off", "emit", "setParams", "setConsumer", "setAuthParams", "manageOrder", "clearFormData", "setAuthStrategy", "setProductReviewInviteVisible"]

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

Добавьте тег в любое место <body>. Положение окна задают атрибуты, а не место тега в разметке.

<ap-product-review-invite
  data-position-x="right"
  data-position-y="bottom"
  data-product-list-limit="3"
  data-display-interval-hours="24"
></ap-product-review-invite>

Те же настройки можно задать для всех страниц в разделе Виджеты на вкладке Виджет → Поведение или в widgetsConfig.products_review_invite. Полный список — в справочнике настроек виджетов.

Шаг 3. Покажите окно

Первый показ запускает ваш сайт: после входа, на странице заказов или по кнопке в личном кабинете покупателя.

<button onclick="aplaut.setProductReviewInviteVisible(true)">Оценить покупки</button>

Вызов показывает окно сразу, без задержки data-delay-sec и независимо от data-display-interval-hours. Если товаров для отзыва нет, окно не появляется.

Дальше виджет показывает окно сам:

пока покупатель не закрыл окно, оно открывается при загрузке страницы с задержкой data-delay-sec;
закрытое окно виджет сам больше не показывает. Исключение — заданный data-display-interval-hours: тогда окно появится снова через указанное число часов после последнего показа, тоже с задержкой data-delay-sec.

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

Шаг 4. Добавьте товары в свои рассылки

Пропустите шаг, если письма покупателям отправляет Aplaut. Если рассылка ваша, ведите покупателя по ссылке с товарами на страницу сайта, где стоит форма отзыва. Задайте форме товар и откройте её хешем: <ap-reviews-form data-context-id="SKU-1"> и ссылка с #/mps/reviews/new/SKU-1 в конце.

https://shop.example.com/reviews?product_ids=SKU-1,SKU-2&consumer_token=<JWT>&redirect_uri=https%3A%2F%2Fshop.example.com%2Faccount#/mps/reviews/new/SKU-1

Часть ссылки	Обязательная	Что делает
`product_ids`	да	ID товаров из каталога через запятую. Товары не из каталога пропускаются
`consumer_token`	да	JWT покупателя. Вызывать `setConsumer` на этой странице не нужно
`redirect_uri`	нет	Адрес `http` или `https`. У формы с `modalPersistent: true` на него ведёт кнопка Готово. Другие схемы адреса форма пропускает
`#/mps/reviews/new/<ID>`	нет	Открывает обычную форму сразу. `<ID>` совпадает с `data-context-id` отдельной формы на странице. Форма внутри виджета отзывов открывается по адресу без ID, см. ссылку на форму для своей рассылки

По переходу Aplaut создаёт запросы на отзыв на эти товары. Aplaut не проверяет, покупал ли покупатель эти товары: проверка на вашей стороне. Чтобы отзыв получил метку «Подтвержденная покупка», добавьте номер заказа в скобках после ID: #/mps/reviews/new/SKU-1(order_number=12345).

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

Войдите на сайт покупателем, который ещё не оставил отзыв, и откройте страницу с приглашением по ссылке из письма «Отзыв о товаре» или по ссылке с product_ids из шага 4.
В консоли браузера вызовите aplaut.setProductReviewInviteVisible(true).
На вкладке «Сеть» найдите запрос review_requests к s-api.aplaut.io. Он отвечает 200, товары лежат в items.
Клик по товару в окне открывает форму отзыва с этим товаром.

Признак	Причина	Что сделать
`aplaut.setProductReviewInviteVisible is not a function`	В загрузчике нет метода	Замените массив методов, как в шаге 1
Запроса `review_requests` нет	Не передан токен, в адресе страницы нет приглашения или `product_ids`, или не вызван показ окна	Проверьте `setConsumer`, ссылку и вызов показа
Ответ 401	Токен не проходит проверку: другой ключ, `iss` не совпадает с Company ID, истёк `exp`	Сверьте ключ, `iss`, срок и алгоритм `HS256`
Ответ 200, `items` пустой	Нет запросов на отзыв или идентификаторы в токене не совпадают с заказами	Сравните `external_id`, `email`, `phone` с данными заказов
Товары есть, окна нет	Покупатель закрывал окно, интервал не задан	Задайте `data-display-interval-hours` или вызовите показ ещё раз
Клик по товару ничего не открывает	На странице нет формы отзыва	Добавьте `<ap-reviews>` или `<ap-reviews-form>`

Смотрите также: справочник JS API виджетов.

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

Шаг 1. Проверьте методы загрузчика​

Шаг 2. Разместите виджет​

Шаг 3. Покажите окно​

Шаг 4. Добавьте товары в свои рассылки​

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