Zostavte si svoj zoznam účastníkov s Jetpack a interkomu

Jetpack je skvelé riešenie na vytvorenie zoznamu predplatiteľov a Intercom je riešenie, ktoré vám umožní spravovať predplatiteľov a zostať v kontakt s nimi.

V tomto tutoriále vám ukážeme, ako rozšíriť zoznam účastníkov s Jetpack a Intercom.

Niektorí ľudia ma prišli opýtať, či je možné používateľom povoliť prihlásenie na odber a prijímanie všetkých ich článkov e-mailom a ukladanie ich e-mailových adries do interkomu. Okamžite som reagoval pozitívne, najmä ako API (Application Programming Interface) sa ľahko používa.

Tak som premýšľal nad použitím predplatného pluginu, ktorý bude cez API posielať e-mailové adresy Interkomu. A presne to urobím.

Jetpack už máme nainštalovaný, takže stačí aktivovať modul “ odbery …Nie je to však také jednoduché, čo ak chcete zobraziť formulár na vlastnom mieste (napríklad vlastná stránka)? Ukážeme vám tiež, ako prispôsobiť, kde formulár.

prvé kroky

Začneme s a formulár základné:

 Nikdy nezmeškajte naše príspevky. Získajte aktualizácie do svojej poštovej schránky ihneď po ich zverejnení. 

Pre všetkých, ktorých to môže zaujímať, som sem pridal formulár pomocou akcie “ genesis_after_entry Téma Genesis, ale ak nepoužívate Genesis, môžete použiť filter „ obsah A zreťazil váš obsah do obsahu tohto článku.

V našom príklade zobrazíme formulár po 3^e článok. Ak používate filter, použite funkcie „ ob_start „A“ ob_get_clean Inicializácia medzipamäte a použitie jeho obsahu.

celkovo $ príspevok, $ wp_query; 
if (is_home() && $ wp_query->Príspevkov:[3]->ID == $ príspevok->ID) {       
     zahrnúť(get_stylesheet_directory()."/Includes/templates/snippets/blog-archive-signup.php"); 
}

Tu je kód CSS pre štýl formulára.

# Blog-archive-signup { šírka:100% ! dôležité; zrejmý:oba; } 
# Blog-archive-signup { @ zahŕňa zarážku ($ tablet) { pozadia:url ( "images / low-bg.png") bez opakovania 0 0; výška:200px; } } 
# pole-blog-archív-registrácia pole { hraničné:0; šírka:100%; padding-left:50px; } 
# pole-blog-archív-registrácia pole { @ zahŕňa zarážku (tablet s maximálnou šírkou $) { padding-left:0px } } 
# blog-archív-registrácia legenda { padding-top:20px; } 
# blog-archive-signup # fields-container { šírka:100% } 
# blog-archive-signup vstup [name * = 'email'] { pozadia:url ( "images / low-field.png") bez opakovania 0 0; vypchávka:0; okraj:0; výška:44px; hraničné:0; šírka:560px; line-height:22px; vznášať sa:ľavý; } 
# blog-archive-signup vstup [name * = 'email'] { @ zahŕňa zarážku (tablet s maximálnou šírkou $) { vypchávka:0; okraj:0; hraničné:0; šírka:50%; vznášať sa:ľavý; } } 
# blog-archive-signup input [typ = 'submit'] { pozadia:url ( "images / low-button.png") bez opakovania 0 0; vypchávka:0; okraj:0; výška:44px; hraničné:0; šírka:180px; farba: #fff; text-align:centrum }

Ako pridať predplatiteľov

Teraz zaregistrujeme používateľov na serveri Jetpack pomocou výrazu „ jQuery.ajax ".

$("# Blog-archive-signup").predložiť(funkcie(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").skryť().odstrániť(); 
      var __button = $('blog-archív-prihlasovací vstup [typ = "submit"]').dostať(0); $('blog-archív-prihlasovací vstup [typ = "submit"]').po(codeable_spinner); 
      var __DATA = $(toto).serializáciu() + '& secure =' + codeableVars.zabezpečenia + „& action = blog_archive_signup“;   
      $.zverejniť(codeableVars.ajaxurl,__DATA,funkcie(odpoveď) { konzola.záznam(odpoveď); if (odpoveď.úspech) { 
          $("#Codeable_spinner").replaceWith("Úspech!").oneskorenie(5000).fadeOut('Slow').odstrániť(); } inak { 
          $("#Codeable_spinner").replaceWith(""+odpoveď.správa+"").oneskorenie(5000).fadeOut('Slow').odstrániť(); 
      } 
}) 
})

Teraz musíme uložiť používateľa v Jetpack a Intercom. Prehrabal som sa kódom Jetpack, aby som zistil, ako pridáva predplatiteľov, a našiel som triedu „Jetpack_Subscriptions“ a statickú metódu, ktorá berie e-mail ako parameter. A pre interkom bude stačiť jednoduchá požiadavka CURL.

ADD_ACTION('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
ADD_ACTION('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
funkcie blog_archive_signup() { 
  $ dáta = rad( , E-mail ' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => rad('Subscribed_via' => 'Blog_archive_partition') ); 
  $ volanie = wswp_make_api_call($ dáta); 
  $ odpoveď = rad("Úspech"=>pravdivý,"Message" => "Bpa_signup"); 
  $ predplatiť = Jetpack_Subscriptions::predplatiť($ _REQUEST[$ prefix.'_Email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // obnoviť počet odberateľov v wp-admin  
  wp_send_json($ odpoveď); 
  výjazd(); 
} 
funkcie wswp_make_api_call($ dáta) { 
   $ curl = curl_init(); curl_setopt_array($ curl, rad( CURLOPT_HTTPHEADER => rad("Content-Type: application / json", 'Prijať: application / json'), CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => 'Https://api.intercom.io/users', CURLOPT_POST => 1, CURLOPT_USERPWD => INTERCOM_APP_ID . "" . INTERCOM_API_KEY, CURLOPT_POSTFIELDS => json_encode($ dáta), CURLOPT_HEADER => nepravdivý, )); 
   // Upozorňujeme, že kľúč musíte nastaviť na správne hodnoty  
  $ return = json_decode(curl_exec($ curl), pravdivý); 
  curl_close($ curl); 
  návrat $ return; 
}

To je všetko. Keď teraz niekto vyplní tento formulár, okamžite dostane na Jetpacku e-mail s potvrdením, že sa prihlásil na odber, a dostane e-maily s vašimi článkami hneď po zverejnení.

V zákulisí sú zaregistrovaní v interkome s označením „Subscribed_Via => oddiel archívu blogu“. Nabudúce vám poviem, ako môžete tiež poslať predplatiteľov doplnku Thrive Leads do Intercomu pomocou Données dodatočné informácie, ktoré vám umožnia ich všetky rozlíšiť.

Ak neovládate užitočnosť „ codeableVars.security Musíte vedieť, že obsahuje „ nuncius "WordPress. Normálne by sa to dalo s funkciou php “ wp_nonce_field () Vo formulári, ale skript obsahujúci iba JavaScript, je pole nonce už k dispozícii vo funkcii JS “ wp_localize_script () ".

To je o všetkom, čo pre tento tutoriál urobiť. Neváhajte a opýtajte sa nás alebo zdieľajte tutoriál so svojimi priateľmi na obľúbených sociálnych sieťach.