Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

sailplay-hub-leads

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sailplay-hub-leads

Event-based tool for SailPlay Widgets development

  • 0.0.4
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

SAILPLAY.HUB.LEADS

Описание

SAILPLAY.HUB.LEADS расширяет стандартный функционал SAALPLAY.HUB, позволяя быстро и удобно работать с лид-формами SailPlay

Установка

Если вы используете npm:

npm install sailplay-hub-leads --save

SAILPLAY.HUB.LEADS требует для работы сам хаб, поэтому необходимо добавить на страницу теги:

<script src="путь до файла sailplay.hub.js"></script>
<script src="путь до файла sailplay.hub.leads.js"></script>

Принцип работы

В первую очередь, необходимо запустить хаб для вашей компании:

    SAILPLAY.send('init', { partner_id: 206 }); //инициируем модуль для партнера с айди = 206

Плагин добавляет в хаб следущие события:

##leads.parse

   SAILPLAY.send('leads.parse'); //Находит все формы в документе, которые помечены атрибутом "data-sp-lead" и добавляет к ним функционал лид-формы

Пример html кода формы для парсинга


    <form data-sp-lead="test_1" data-sp-tags="test4,test5" >
    
        <label>phone<input type="text" name="phone"/></label>
        <label>email<input type="email" name="email"/></label>
    
        <input type="submit" value="Подписаться">

    </form>
    

Где:

  • атрибут data-sp-lead - уникальный идентификатор формы, используется для работы с формой после создания.

  • атрибут data-sp-tags - необязательный параметр. В нем можно указать теги через запятую, которые необходимо добавить к полбзователю.

leads.submit

   SAILPLAY.send('leads.submit', 'lead_name', callback); //Отправляет форму с указанным именем на сервер.

Принимает два параметра:

  • имя формы - имя формы, указанное при создании.

  • функция обратного вызова, запускаемая после отправки формы.

После отправки формы нициирует следущие события:

leads.submit.success - форма отправлена успешно

leads.submit.error - при отправке формы произошла ошибка

Обы события возвращают объект, содержащий отправленную лид-форму и ответы сервера.

Так же плагин расширяет глобальный объект SAILPLAY свойством leads.

С помощью него можно проводить все те же самые процедуры, без событийной системы.

Метод SAILPLAY.leads работает в зависимости от переданных параметров.

  1. если не передать параметры, то он вернет объект со списком всех текущих лидформ

  2. если передать только имя в качестве первого параметра - вернет лидформу с указанным именем

  3. если передать имя в качестве первого параметра и DOM элемент формы в качестве второго - создаст новую лидформу, так же можно передать дополнительные опции в качестве третьего параметра

Пример испозьзования SAILPLAY.leads


    window.addEventListener('DOMContentLoaded', function(){
    
      SAILPLAY.send('leads.parse');

      SAILPLAY.send('init', { partner_id: 366, domain: '//sailplay.ru' });


      SAILPLAY.on('init.success', function(){

        SAILPLAY.leads('test3', document.getElementById('form'), { tags: [ 'test666', 'test111', 'test999' ] });

        console.dir(SAILPLAY.leads());

      });

      SAILPLAY.on('leads.submit.success', function(res){
        console.dir(res);
      });

      SAILPLAY.on('leads.submit.error', function(res){
        console.dir(res);
      });

    });

Пример можно посмотреть тут:

http://saike.ru/sailplay/widgets/demo/metropolis/

Исходный код страницы находится в данном репозитарии в директории: /demo/metropolis

FAQs

Package last updated on 04 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc