Для взаимодейсвтия с SailPlay popup вы можете использовать SailPlay JS SDK. Пример работы вы можете найти здесь.
Для того, чтобы на всех страницах вашего сайта появилась вкладка SailPlay, вам необходимо вставить JS-код, который вы можете найти здесь.
Пример кода:
<script charset="utf-8" type="text/javascript">
var _sp_options = {
publicKey: "none",
partnerId: "12334",
depId: "22399",
position: ["top", "right"],
notifications: {
enabled: true,
skin: {type: 'horizontal', position: ['bottom', 'right']}
}
};
(function() {
var sp = document.createElement("script");
sp.type = "text/javascript"; sp.async = true; sp.charset = "utf-8";
sp.src = ("https:" == document.location.protocol ? "https://" : "http://") +
"sailplay.ru/popup-sdk/js/sailplay/334/";
var scr = document.getElementsByTagName("script")[0]; scr.parentNode.insertBefore(sp, scr);
})();
</script>
При инициализации popup’а необходимо передать в качестве аргумента конструктора SailPlayExternalApp javascript объект, в данном случае spOptions, который содержит следующие поля:
depId: ID соответвующего отдела в системе SailPlay (подробнее см. здесь и здесь)
position: ['top'|'center'|'bottom', 'left'|'right'] - задает расположение вкладки SailPlay на вашем сайте
authHash: уникальный hash, который используется для автоматической авторизации клиента в popup’е (см. здесь).
publicKey: уникальный hash, который вы можете получить при успешной транзакции покупки через SailPlay API (см. здесь). Если при генерации страницы, был передан параметр publicKey, то popup откроется автоматически
link: Ссылка страницы на вашем сайте, которой пользователь может поделиться в социальных сетях (действие "Рассказать о покупке"). Если параметр не был передан, то будет использоваться URL вашего сайта (если вы не указали его, то URL вашей страницы на SailPlay). Пример: вы можете передать ссылку на купленный товар в вашем интернет-магазине
pic: URL-изображения, который будет использоваться при шаринге пользователем информации о покупке. Если параметр не был передан, то будет использоваться ваш логотип на SailPlay.
originUserId: ID пользователя в вашей системе, см. здесь. Служил для “связывания” пользователя в вашей системе и в системе SailPlay. Сохраняется в момент регистрации пользователя, либо в момент проведения транзакции. Важно: имеет ограничение на длину, максимальная длина - 100 символов.
probableUserPhone: номер телефона, который будет подставлен в поле, если человек не зарегистрирован и не авторизован.
Чтобы получить информацию о бонусных баллах пользователя, в SailPlay JS SDK, есть специальный метод:
SP.api.getUserPoints({callback: function(data), originUserId: 'id пользователя в вашей системе'})
originUserId – необязательный параметр, если вы указали в настройках подключения (_sp_options) этот параметр, то он будет автоматически подставлен. Если пользователь авторизован в попапе SailPlay и вы указали originUserId, то поиск пользователя будет осуществляться по переданному originUserId.
callback функция будет вызвана после того, как данные о бонусных баллах будут загружены;
data – объект с информацией о бонусных баллах.
//формат объекта data в случае успешного запроса
{
status: 'ok'
points: {
total: 800,
confirmed: 500, // подтвержденные бонусные баллы
unconfirmed: 300, // неподтвержденные бонусные баллы
spent: 200 // потраченные бонусные баллы
}
}
Метод позволяет оценить количество баллов, которое получит пользователь после покупки товара.
SP.api.loyalty.calcPoints({callback: function(),'product_sku': 'productSKU', 'category_sku': 'catSKU', 'price': 1000, 'email': 'some@email.com'});
email - почта клиента, используемая в качестве идентификатора клиента. В качестве идентификатора так же может быть использован номера телефона и идентификатор клиента в вашей системе (origin_user_id). В таком случае параметр email заменяется на phone или origin_user_id соответственно
price - стоимость товара. Обязательный параметр.
product_sku - идентификатор товара в системе SailPlay. Опциональный параметр.
catSKU - идентификатор категории в системе SailPlay. Опциональный параметр.
callback - функция, которая будет вызвана после получения ответа сервера SailPlay;
Формат объекта в случае успешного выполнения запроса:
{status: "ok", points: 50}
Метод позволяет добавить фамилию, имя, отчество, дату рождения и пол клиента.
SP.api.users.update({callback: function(), origin_user_id:"392329864", firstName:"Сергей", lastName:"Иванов", sex:1, birthDate:"MM-DD-YYYY",})
origin_user_id - идентификатор клиента в вашей ссистеме. В качестве идентфикатор может так же быть использоват телефон или почта клиента. В таком случае параметр origin_user_id заменяется на phone или email соответственно
Если пользователя с такими идентификаторами не найдено, то он создастся.
firstName - имя клиента
lastName - фамилия
sex - пол (1 - мужской. 2 - женский)
birthDate - дата рождения в форматеMM-DD-YYYY
Указанные ранее данные не переписываются.
callback функция будет вызвана после получения ответа сервера SailPlay;
Для отслеживания событий, связанных с открытием/закрытием popup’а, вы можете использовать SailPlay JS SDK и определенные в нем callback’и:
// функция SPready будет вызвана, после того, как будет загружен SDK
// внутри нее нужно объявить callback’и
// SP - главный объект SDK
function SPready(SP) {
SP.bindCallback('onTicketClick', function(){ alert('ticket clicked'); }); //событие “клик по вкладке”
SP.bindCallback('beforePopupOpen', function(){ alert('beforePopupOpen'); }); //событие “непосредственно перед открытием popup’а”
SP.bindCallback('afterPopupOpen', function(){ alert('afterPopupOpen'); }); // событие после открытия popup’а (как элемента)
SP.bindCallback('beforePopupClose', function(){ alert('beforePopupClose'); }); // событие перед закрытием
SP.bindCallback('afterPopupClose', function(){ alert('afterPopupClose'); }); // событие после закрытия popup’а
SP.bindCallback('onPopupLoaded', function(){ alert('onPopupLoaded'); }); // событие после открытия и после загрузки содержимого popup’а
}
function SPready(SP){
SP.api.customVariables.add({email: 'ipad@gmail.com', product: 'ipad mini'});
}
Для обработки пользовательских действий, связанных с работой popup'а, вы можете подписываться на соответвующие необходимые события:
SP.events.subscribe(eventName, callback);
callback(data) – функция которая будет вызвана при совершении пользователем действия eventName
data – содержит данные отслеживаемого события.
eventName может принимать следующие значения:
{
eventName: 'gift',
gift: {
gift_sku: артикул подарка,
gift_type: тип подарка: gift || coupon,
points_delta: потраченные балы,
gift_public_key: публичный ключ транзакции выдачи подарка
}
}
Все взаимодействие с lead-формой ведется через методы модуля SP.leads
Пример работающей формы можно взять здесь.
Вопросы интеграции и настройки форм раскрыты в нашем блоге.
Методы модуля:
init() - инициирует работу скрипта и обработку действий с лид формами.
getLead ( имя лида ) - возвращает объект lead-формы , содержащий:
container - DOM элемент в котором указано имя лида (data-sp-lead=”leadName” )
fields - массив типа HTMLcollection, содержащий dom-элементы типа <input>, которые находятся внутри container
submit - DOM элемент, в котором указано ( data-sp-lead-submit=”leadName” ). Является элементом по умолчанию для отправки данных формы
cancel - DOM элемент, в котором указано ( data-sp-lead-cancel=”leadName” ). Является элементом по умолчанию для закрытия формы
status() - строка, отображающая состояние lead-формы на основе сохраненной в куках переменной:
initial - переменная в куках не найдена. Вероятно, посетитель первый раз открывает сайт с этого браузера
submitted - переменная найдена. Постетитель уже заполнил и отправил данные формы
canceled - переменная найдена. Посетитель уже видел форму, но не заполнил её и закрыл
onSubmit - метод, который будет вызван при успешной отправлке данных формы
onCancel - метод, который будет вызван при успешном закрытии формы
submitLead( имя лида, callback ) - метод для принудительного сабмита лида с указанным именем. При успехе будет выполнена функция callback
cancelLead( имя лида, callback ) - метод для принудительного закрытия (отмены) формы с указанным именем. При успехе будет выполнена функция callback
destroyLead( имя лида ) - метод, убирающий весь функционал с формы
При заполнении формы значения всех полей записываются в куку sp_lead_user.
Помимо этого метода, popup можно открыть передав в него public_key покупки. Этот метод используется для открытия popup'a на странице подтверждения оформления заказа (success page).
После инициализации SDK, вы можете открыть popup программно (т.е. не по нажатию пользователем по вкладке или кастомному элементу):
SP.showPopup();
Для открытия страницы на нужной странице необходимо передать в метод showPopup() объект с настройками:
SP.showPopup({
openReload: true, //загружать содержимое попапа при каждом открытии
openTo: {
target: открываемая страница,
giftSku: SKU подарка
}
});
Параметр target может принимать следующие значения:
giftSku – артикул(sku) подарка, параметр обязателен при указании target = gift.
Создание тега:
function SPready(SP){
SP.tags({action: 'add', tags: ['Регистрация', 'A/B-тест #11', 'A/B-тест #11 вар. А'], phone: '7XXXXXXXXXX'});
}
или
function SPready(SP){
SP.tags({action: 'add', tags: ['Мальчик', 'Любит клубнику', 'Пришел из ВКонтакте'], email: 'useremail@userdomain.com'});
}
Получение списка:
function SPready(SP){
//необходимо передать один из параметров идентификации клиента. phone или email или origin_user_id
SP.tags({action: 'list', phone: '7XXXXXXXXXX', callback: function(data) { console.log(data); } });
}
Удаления тега:
Через JS могут быть удалены только те теги, которые были соданы с помощью JS SDK.
function SPready(SP){
//необходимо передать один из параметров идентификации клиента. phone или email или origin_user_id
SP.tags({action: 'delete', tags: ['jstag'], phone: '7XXXXXXXXXX'});
}