Versions Compared

Version Old Version 9 New Version Current
Changes made by

Ivan Malov

Ivan Malov

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Яндекс пессимизировал сайты партнеров, на которых является перевод трафика на сайт трипстера. Для этого был разработан виджет, который представляет собой кнопку, по нажатию на которую открывается модальное окно с возможностью забронировать экскурсию, не уходя с сайта партнера.

На время эксперимента проводим А/Б тест:

  • 50% - по нажатии на кнопку, перенаправляет на сайт трипстера

  • 50% - по нажатии на кнопку, открывается оформление заказа сайте партнера


Инструкция по установке:

  1. Подключить скрипт

    Code Block
    languagejs
    <script src=”https://experience.tripster.ru/partner-payment-widget/payment-widget.umd.cjs” 
async></script>

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

    1. Виджет-кнопка оплаты заказа:

      Code Block
      languagehtml
      <payment-widget 
  experience="<id экскурсии>" 
  partner="<Имя<Название партнера, по нему будут производиться начисления(exp_partner)>" 
  button-text="<Текст кнопки>"
></payment-widget>

      image-20250417-083059.png

    2. Виджет-кнопка “Задать вопрос гиду“

      Code Block
      <question-widget 
  experience="<id экскурсии>" 
  partner="<Имя партнера, по нему будут производиться начисления(exp_partner)>" 
  button-text="<Текст кнопки>"
></question-widget>

      image-20250417-083322.png

  3. Опционально можно стилизовать кнопки с помощью css переменных

    Code Block
    languagecss
    payment-widget {
  --button-color: #fff;
  --button-background-color: #00be8b;
  --button-border-radius: 8px;
  --button-width: auto;
  --button-height: auto;
  --button-padding: 12px 24px;
  --button-font-size: 17px;
}

question-widget {
  --button-color: #fff;
  --button-background-color: #00be8b;
  --button-border-radius: 8px;
  --button-width: auto;
  --button-height: auto;
  --button-padding: 12px 24px;
  --button-font-size: 17px;
}


Пример для партнера tmania:

Code Block
languagehtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    payment-widget {
      --button-color:black;
      --button-background-color: red;
    }
    question-widget {
      --button-color: white;
      --button-background-color: blue;
    }
  </style>
</head>
<body>
  <payment-widget experience="25505" partner="tmania" button-text="Заказать"> </payment-widget>
  <question-widget experience="25505" partner="tmania" button-text="Задать вопрос"> </question-widget>
  <script src="https://experience.tripster.ru/partner-payment-widget/payment-widget.umd.cjs" async></script>
</body>
</html>