Для розробників

Інструкція для розробників

Всього 3 простих кроки

Від реєстрації бізнес-профілю до робочої кнопки «Додати в Rewish» на сайті.

  1. 01

    Пройти швидку реєстрацію

    Створіть бізнес-профіль у кілька кліків: перейдіть на Rewish та оберіть бажаний спосіб реєстрації.

  2. 02

    Отримати ключ

    У кабінеті магазину додайте посилання на ваш сайт і натисніть «Отримати код». Цей код знадобиться на третьому кроці.

  3. 03

    Додати кнопку на сайт

    Підключіть скрипт Rewish і додайте іконку на картки товарів – далі все працює автоматично.

Крок 2 · Отримати ключ

Отримайте ключ у кабінеті магазину

Після реєстрації перейдіть до кабінету магазину: відкрийте меню (три риски справа зверху) і оберіть пункт «Кабінет магазину». У полі «Додайте лінк на сайт» вставте адресу вашого магазину (наприклад https://site.com) і натисніть «Отримати код».

Меню → «Кабінет магазину»
Додайте лінк на сайт → «Отримати код»
Крок 3 · Підключення

Підключіть скрипт Rewish

Спочатку додайте скрипт Rewish у тег <head> вашого сайту. Де key – це код, який ви отримали на другому кроці.

HTML

  <head>
    ...
    <script
      async
      src="https://subscriptions.rewish.io/rewish-lib.min.js?key=key">
    </script>
  </head>
Підключайте скрипт якомога раніше у <head> (з атрибутом async), щоб іконки встигли завантажитись до того, як користувач почне взаємодіяти зі сторінкою.
Іконки

Додайте іконку на товари

Далі необхідно додати іконки на елементи. Зробити це можна двома способами – через дата-атрибути або через JavaScript (приклад із обробником кліку).

Якщо ви хочете додавати іконку Rewish безпосередньо в HTML, скористайтеся дата-атрибутами, які передаватимуть дані про товар. Іконка з’явиться автоматично, а під час кліку дані з атрибутів передадуться в сервіс Rewish.

HTML

  <div class="rewish-logo"
    data-rewish-title="Title"
    data-rewish-description="Description"
    data-rewish-picture="https://site.com/product.png"
    data-rewish-price="123"
    data-rewish-link="https://site.com/product"
    data-rewish-currency="1">
      <div class="rewish-logo-icon"></div>
      <span class="rewish-logo-tooltip">
        <img class="rewish-logo-tooltip-img" width="16" height="16"
             src="https://subscriptions.rewish.io/assets/icons/information-circle.svg" />
        Додати товар у вішліст в Rewish
      </span>
  </div>
Кожне поле не є обов'язковим, але для коректної роботи має бути вказане щонайменше одне.

Опис ключових полів

  • data-rewish-title назва товару або послуги
  • data-rewish-description короткий опис
  • data-rewish-picture посилання на зображення (png, jpeg, jpg, webp, bmp)
  • data-rewish-price ціна (числовий формат)
  • data-rewish-link посилання на сторінку товару
  • data-rewish-currency код валюти: UAH = 1, USD = 2, EUR = 3, GBP = 4, PLN = 5
Стилі додаються автоматично за класом rewish-logo-icon. Ви можете перевизначати їх у власному CSS, але назву класу змінювати не можна - система використовує її для обробки кліку.

Як додати кнопку на сайт Хорошоп

1. Перейдіть у Налаштування → Загальні налаштування → Скрипти і додайте скрипт Rewish у <head>:

HTML

  <head>
    ...
    <script
      async
      src="https://subscriptions.rewish.io/rewish-lib.min.js?key=key">
    </script>

    <script src="/rewish-injector.min.js" defer></script>
  </head>

2. Далі перейдіть у Налаштування → Утиліти → Файли для зовнішніх сервісів і додайте файл-інжектор нижче. Він містить стандартні стилі та логіку розміщення кнопки – під ваш сайт поля можна змінювати.

Завантажити rewish-injector.min.js
Дизайн

Оберіть іконку зі списку

Чотири фірмові варіанти іконки Rewish: біла на фіолетовому або фіолетова на білому, у формі кола чи закругленого квадрата. Натисніть, щоб завантажити SVG, і підставте файл у background-image класу rewish-logo-icon.

Завантажити всі іконки (SVG)
Best practice

Приклад застосування іконки на вашому магазині

Покупці вже звикли зберігати товари через «сердечко» та порівнювати їх. Додайте кнопку «Додати в Rewish» у той самий ряд дій — поруч із «серцем», порівнянням чи «поділитися». Так інтерфейс залишиться інтуїтивним, а товар буде доданий до Rewish в один клік і не загубиться.

Like У вішліст
Compare Порівняти
Share Поділитись
plus
Rewish Rewish
ThinkBook 16 G9 IRLВ наявності
ThinkBook 16 G9 IRL43 999 ₴
Купити
Книга BoschВ наявності
Книга Bosch1039 грн
Купити
Nike P-6000 BlackВ наявності
Nike P-6000 Black4 990 ₴
Like Купити
— кнопка «Додати в Rewish»
Рекомендовані розміри
243640 px
Кастомізація

Перевизначення стилів

Налаштовуйте вигляд елементів Rewish під дизайн вашого сайту – достатньо перевизначити CSS-стилі у вашій темі.

Не змінюйте назви класів .rewish-logo та .rewish-logo-icon – вони використовуються для обробки подій та коректної роботи бібліотеки.

Як знайти та перевизначити потрібні стилі

За допомогою інструментів розробника у браузері (DevTools) можна змінити будь-який елемент Rewish:

  1. Відкрийте сторінку з підключеною бібліотекою Rewish
  2. Натисніть правою кнопкою миші на потрібний елемент → Inspect / Перевірити.
  3. Знайдіть відповідний клас (наприклад .rewish-logo, .rewish-logo-icon, .about-rewish-container тощо).
  4. Додайте або перевизначте стилі у своєму CSS-файлі.

Якщо стилі не застосовуються – переконайтесь, що ваш CSS підключений після стилів Rewish і селектори мають достатню специфічність. У крайньому випадку – використайте !important.

Обгортка кнопки

CSS

  .rewish-logo {
    left: unset;
    right: 10px;
    background: grey;
  }

Іконка Rewish

CSS

  .rewish-logo-icon {
    background-image: url("https://subscriptions.rewish.io/assets/icons/rewish-badge-white-on-purple-circle.svg") !important;
    background-size: 25px;
    width: 25px;
    height: 25px;
  }

Модальне вікно

CSS

  .about-rewish-container, .success-rewish-container {
    background: #6f6f6f;
  }
Важливо

Зверніть увагу

  • Розташування скрипта.  Підключайте Rewish якомога раніше у <head> з async, щоб іконки встигли завантажитись.
  • Крос-доменні обмеження.  Якщо у вас суворий CSP, дозвольте домен https://subscriptions.rewish.io/ для завантаження скрипта.
Потрібна допомога з інтеграцією?