ManyChat Help Portal
Submit a ticket

Эта библиотека предоставляет дополнительные возможности при использовании инструментов роста ManyChat:

  • Возможность использования виджета «флажок» без графического интерфейса
  • Возможность инициализации виджетов для динамически создаваемых элементов
  • Управление видимостью виджетов и т. д.


Инициализация

Загрузка библиотеки осуществляется при помощи скрипта. Ссылка на скрипт расположена в разделе «Инструменты роста» (вкладка «Настройка», «Установить сниппет JavaScript»). Загрузка происходит асинхронно, поэтому необходимо дождаться загрузки библиотеки перед вызовом ее методов. Для этого служит обратный вызов mcAsyncInit. После загрузки становится доступной глобальная переменная «MCю, которая предоставляет доступ к функциональным возможностям библиотеки.

<script src="//widget.manychat.com/ИДЕНТИФИКАТОР_СТРАНИЦЫ.js" async="async"></script>
<script>
  window.mcAsyncInit = function() {
    // теперь переменная MC доступна
    console.log(MC);
  };
</script>


Инициализация встраиваемых виджетов

Для инициализации встраиваемого виджета (кнопки или блока) необходимо вставить на страницу дополнительный код в том месте, где должен выводиться виджет. В общем случае этот код выглядит следующим образом:

<div class="mcwidget-embed" data-widget-id="ИДЕНТИФИКАТОР_ВИДЖЕТА" data-widget-payload="НЕОБЯЗАТЕЛЬНАЯ_ПОЛЕЗНАЯ_НАГРУЗКА"></div>

Код можно вставить в нескольких местах на одной странице. В каждом месте будет инициирован отдельный экземпляр виджета. Для каждого экземпляра виджета можно задать необязательную полезную нагрузку, т.е. данные, которые будут сохраняться в пользовательском поле, указанном в настройках виджета. Чтобы задать полезную нагрузку для экземпляра виджета, можно настроить атрибут data-widget-payload для элемента или использовать метод setPayload, как описано ниже.


Базовые методы

Метод

Описание

MC.parse()

Находит элементы виджета на странице (например, <div class="mcwidget-checkbox" data-widget-id="420"></div>) и отрисовывает их. Эта функция вызывается при загрузке библиотеки. С помощью этого метода можно отрисовывать элементы, добавленные в DOM уже после загрузки библиотеки.

MC.getWidget(widgetId или элемент DOM)

Возвращает объект виджета по идентификатору виджета или по DOM-элементу экземпляра встраиваемого виджета. С помощью этого объекта можно прослушивать события виджета и вызывать его методы. Идентификатор виджета можно получить из сниппета в инструментах роста.

MC.getWidgetList()Возвращает список всех активных виджетов.


Методы виджета «Флажок»

Все методы и свойства, перечисленные ниже, имеют отношение только к виджету типа «Флажок».

Метод

Описание

.on(eventName, callback)

Подписка на событие eventName. Возможные значения eventName:

  • checked — изменение состояния флажка
  • submitted — отправка виджета
.off(event[, callback])

Отмена подписки на одно событие или на все события. Если не указан обратный вызов, отменяется подписка на все события.

.submit()

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

.checked

Это свойство позволяет проверять текущее состояние флажка.

.refСтрока Ref используется после отправки виджета, это свойство доступно только после отправки.
.userRefИдентификатор пользователя используется после отправки виджета, это свойство доступно только после отправки.


Методы всплывающих виджетов

Все методы и свойства, перечисленные ниже, доступны только для виджетов типа «Топпер», «Выдвижной блок», «Модальное окно» и «Окно на весь экран».

Метод

Описание

.open()

Открыть виджет.

.close()

Закрыть виджет.

.setPayload(refPayload)Задать полезную нагрузку Ref для виджета. Значение должно быть строкой. Не более 200 символов. Допускаются символы a-z A-Z 0-9 +/=-._


Методы виджета «Чат с клиентами»

Все методы и свойства, перечисленные ниже, имеют отношение только к виджету типа «Чат с клиентами».

Ограничение частоты

Все методы виджета «Чат с клиентами» могут вызываться не чаще, чем 1 раз в 5 секунд.

Метод

Описание

.open(shouldOpenDialog)

Открыть виджет. Параметр shouldOpenDialog позволяет задать, должно ли также открываться диалоговое окно.

.close()

Закрыть весь виджет.

.openDialog()Открыть диалоговое окно виджета.
.closeDialog()Закрыть диалоговое окно виджета.
.setLoggedInGreeting(text)Задать текст приветствия для вошедшего пользователя.
.setLoggedOutGreeting(text)Задать текст приветствия для не вошедшего пользователя.
.set(changes)Задать текст приветствия и (или) параметры полезной нагрузки Ref. changes — это объект JSON с новыми значениями. Доступные имена параметров:
loggedInGreeting,
loggedOutGreeting,
refPayload


Методы встраиваемых виджетов

Все методы и свойства, перечисленные ниже, имеют отношение только к виджетам типа «Кнопка» и «Блок».

Для вызова методов виджета необходимо получить экземпляр объекта виджета. Его нельзя получить путем передачи widgetId в метод MC.getWidget, поскольку на странице может быть несколько экземпляров виджета одновременно. Поэтому для получения экземпляра объекта необходимо передать в метод MC.getWidget DOM-элемент виджета, например:

<!-- ваш сниппет кода -->
<div id="test-widget" class="mcwidget-embed" data-widget-id="420"></div>
const widgetInstanceElement = document.getElementById('test-widget')
const widget = MC.getWidget(widgetInstanceElement)
widget.setPayload('custom_payload')

Метод

Описание

.setPayload(refPayload)Задать полезную нагрузку Ref для виджета. Значение должно быть строкой. Не более 200 символов. Допускаются символы a-z A-Z 0-9 +/=-._


Примеры