1. YCLIENTS
  2. Маркетплейс интеграций
  3. Плагинизация
  4. Руководство по созданию Frontend плагина
  5. Плагинизация виджета онлайн-записи
  6. Widget API
  7. Комплексные примеры использования
  8. Кнопка + модалка

Кнопка + модалка


Добавляет кнопку на страницу о мастере, которая вызывает модальное окно.
В модальном окне идёт запрос на редирект.

widgetApi.addSlotInfo({
    containerType: 'staff_info_comments',
    containerOptions: {
        masterId: 2819885
    },
    componentType: 'button',
    componentOptions: {
        buttonType: 'ghost',
        buttonLabel: 'YCLIENTS',
        clickAction: () => {
            widgetApi.openModalWindow({
            modalTitle: 'YCLIENTS',
            modalBodyHtml: `
              <style>
                .modal-content {
                  padding: 16px 0;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 8px;
                }
              </style>
              <div class="modal-content">
                <div>Перейти на сайт?</div>
                <img style="width: 50%;" src="https://tcdn.yclients.com/tild6137-6132-4261-b037-386539613636/Main_Dark_Filled_2.png">
              </div>
            `,
            modalButtons: [
              {
                buttonTitle: 'Подтвердить',
                buttonType: 'primary',
                clickAction: () => {
                  window.open('https://www.yclients.com/');
                  widgetApi.closeModalWindow();
                }
              },
              {
                buttonTitle: 'Отмена',
                buttonType: 'secondary',
                clickAction: () => {
                  widgetApi.closeModalWindow();
                }
              },
            ]
          });
        }
    }
})
Предыдущая статья Комплексные примеры использования
Следующая статья Зоны встраивания плагинов виджета