25 июля 2024

No-code виджеты: как стилизовать виджет отзывов под свой сайт

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


Зачем нужен виджет с отзывами

По данным Powerreviews, 95% клиентов читают отзывы перед покупкой. Отзывы выступают социальным доказательством качества продукта и надежности компании.


Публикация отзывов на сайте имеет ряд преимуществ:

  1. Повышение доверия

    Посетителю сайта важно удостовериться, что у компании много клиентов, и их опыт взаимодействия положительный. Демонстрация отзывов также указывает на открытость и готовность компании к диалогу.

  2. Работа с "болью" клиента

    В отзывах на компанию люди ищут истории, похожие на свои, а также опровержения своим страхам. "Демократичные цены", "Тактичный персонал", "Первый врач, который назначил действующий препарат" - зачастую отзывы лучше рекламируют ваш бренд, чем любой SEO-специалист.

  3. Повышение конверсии в оплату

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


Какие отзывы отображаются в виджете

Виджет MyReviews собирает отзывы с открытых площадок, которые имеют алгоритмы проверки подлинности отзыва. Сейчас мы собираем отзывы десяти площадок:

  • Яндекс Карты

  • 2ГИС

  • Google maps

  • Zoon

  • Yell

  • Flamp

  • ПроДокторов

  • Авито

  • Яндекс Услуги

  • Отзовик

    Скоро планируем добавить НаПоправку и СберЗдоровье


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


В виджете не обязательно демонстрировать отзывы со всех площадок, вы можете ограничиться самыми популярными (Яндекс Карты и 2ГИС) или, наоборот, профильными платформами (ПроДокторов и Яндекс Услуги).

Раздел "Виджеты", вкладка "Площадки". Если площадка добавлена в виджет, то у нее появляется градиентная обводка

Отзывы также можно отсортировать по рейтингу. Например, отображать только отзывы с оценками 4 и 5, однако для некоторых брендов принципиально отображать все отзывы. Настроить сортировку по отзывам можно в разделе "Виджет"→"Категории отзывов".

Выбор рейтинга отзывов, которые будут транслироваться на сайте

Как кастомизировать виджет

Команда MyReviews разработала редактор виджетов на основе запросов наших пользователей. Мы постарались добавить максимально детализированные настройки каждого элемента виджета: от звездочек в отзыве до фона и переключателей.


Фон

Изменить цвет фона можно у всех типов виджетов. Выбрать цвет можно как из палитры, так и по коду RGB. Для виджета Карусель доступно 6 градиентов фона: от насыщенного розово-фиолетового до приглушенного серо-голубого.


Настройки фона виджета. Фон может быть однотонным или градиентным

Карточка отзыва

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


Настройки карточки отзыва: фон, обводка, скругление, цвет текста и даты в отзыве

Кнопка "Оставить отзыв"

Кнопка "Оставить отзыв" - это популярный инструмент для наших пользователей. После клика на кнопку клиент попадает на страницу предопределения рейтинга, для довольных клиентов открывается список площадок, на которых можно оставить отзыв, а недовольные клиенты попадают на страницу связи с директором.


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

Настройки кнопки "Оставить отзыв": цвет фона, текста и обводки

Ссылка на отзыв

Мы внедрили настройки цвета, nofollow и подчеркивания для ссылки на площадку.

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

Звездный рейтинг

Цвет звездочек можно заменить в разделе "Звездный рейтинг". Цвет изменится как в карточках с отзывами, так и в шапке виджета.


Настройка цвета звездного рейтинга. Окно с палитрой цветов и пипеткой для выбора цвета

Стрелки и пагинация

Настройки переключателей доступны только для виджета Карусель. В разделе "Стрелки" можно настроить

  • Цвет фона стрелки

  • Цвет иконки стрелки

  • Прозрачность переключателей в % (от 1% до 100%)

  • Размер переключателей (от 25px до 65px)

  • Скругление углов переключателей


    Настройка переключателей: цвет, скругление, прозрачность

Пагинация - это нумерация страниц виджета, она состоит из буллитов (точек) внизу виджета. Активный буллит отображает, до какой страницы Карусели вы долистали.

В редакторе можно скрыть пагинацию и поменять цвет буллитов, в том числе активного буллита.


Настройки буллетов (круглых переключателей): цвет, обводка, цвет активного буллета

Бейдж

Плавающий виджет состоит из двух отдельных блоков: бейджа с оценкой и ленты с отзывами. Мы разработали независимые настройки для блоков, чтобы точечно и детализировано кастомизировать оба блока.

У бейджа настраивается расположение, форма и цвета элементов бейджа.


Настройки бейджа с рейтингом у плавающего виджета

Надпись "Сделано в MyReviews" и логотип сервиса можно скрыть из виджетов.


Как установить виджет

Установить виджет можно на любую CMS или конструктор сайтов. В нашем блоге есть иллюстрированные инструкции по установке виджета на самые популярные CMS: Tilda, Craftum, WordPress, Битрикс и Битрикс24.


При изменении дизайна виджет обновится автоматически, переустанавливать его не надо.


Примеры кастомизации

Мы попросили ChatGPT придумать дизайн для виджета и воплотили его идею в новом редакторе.


ChatGPT:

Дизайн виджета отзывов для ресторана:
Концепция: Яркий и аппетитный дизайн, который отражает атмосферу ресторана и привлекает внимание к отзывам.

Цветовая палитра:
Основной цвет: Теплый бежевый (#f5f0e8), создающий ощущение уюта и домашней обстановки.
Акцентный цвет: Яркий оранжевый (#ff9800), отражает аппетитную еду и позитивное настроение.
Текст: Темно-коричневый (#333)
Звезды рейтинга: Золотистый (#ffd700)
Скругление углов: 12px

Шрифт: Roboto Regular 14px
Кнопка "Оставить отзыв": Оранжевый фон с белым текстом, круглые углы.

Яркий оранжевый виджет отзывов из 2ГИС

Дизайн виджета отзывов для медицинской клиники:

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

Цветовая палитра:

Основной цвет: Светло-серый (#f2f2f2)
Акцентный цвет: Голубой (#007bff), символизирующий спокойствие и надежность.
Текст: Темно-серый (#333)
Звезды рейтинга: Золотистый (#ffd700)
Скругление углов: 8px
Шрифт: Roboto Regular 14px
Кнопка "Оставить отзыв": Голубой фон с белым текстом, круглые углы.

Серый виджет отзывов для клиник из ПроДокторов с акцентным голубым цветом

Заключение

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

Если вы уже пользовались пробным периодом, обратитесь в службу поддержки, чтобы получить доступ к редактору еще на 7 дней


Создать виджет с отзывами 🚀


Читайте также