Sestavte si svůj seznam účastníků s Jetpack a interkomu

Jetpack je skvělé řešení pro vytváření seznamu předplatitelů a Intercom je řešení, které vám umožní spravovat předplatitele a zůstat v Kontakt s nimi.

V tomto tutoriálu vám ukážeme, jak rozšířit seznam účastníků pomocí Jetpack a Intercom.

Někteří lidé mě přišli zeptat, zda je možné uživatelům povolit předplatné a přijímat všechny jejich články e-mailem a ukládat jejich e-mailové adresy do Intercomu. Okamžitě jsem odpověděl pozitivně, zejména jako API (Application Programming Interface) se snadno používá.

Takže jsem přemýšlel o použití předplatného pluginu, který bude odesílat e-mailové adresy Interkomu přes API. A přesně to udělám.

Jetpack jsme již nainstalovali, takže stačí aktivovat modul “ Předplatné …Není to však tak jednoduché, co když chcete zobrazit formulář na vlastním místě (například vlastní stránka)? Ukážeme vám také, jak upravit, kde je formulář.

první kroky

Začneme s a formulář základní:

Nikdy nezmeškejte naše příspěvky. Získejte aktualizace do své poštovní schránky, jakmile budou zveřejněny.

Pro každého, kdo by mohl mít zájem, jsem sem přidal formulář pomocí akce “ genesis_after_entry Genesis téma, ale pokud nepoužíváte Genesis, můžete použít filtr „ the_content A spojil váš obsah s obsahem tohoto článku.

V našem příkladu zobrazíme formulář po 3^e článek. Pokud používáte filtr, použijte funkce „ ob_start "A" ob_get_clean Inicializace vyrovnávací paměti a použití jejího obsahu.

globální $ příspěvek, $ wp_query; 
if (is_home() && $ wp_query->Příspěvků:[3]->ID == $ příspěvek->ID) {       
     obsahovat(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); 
}

Zde je kód CSS pro stylování formuláře.

# Blog-archive-signup { šířka:100% ! důležité; jasný:oba; } 
# Blog-archive-signup { @ include breakpoint ($ tablet) { pozadí:url ( "images / low-bg.png") bez opakování 0 0; výška:200px; } } 
# blog-archiv-registrace pole { hranice:0; šířka:100%; padding-left:50px; } 
# blog-archiv-registrace pole { @ include breakpoint (max-width $ tablet) { padding-left:0px } } 
# blog-archive-registrace legendy { padding-top:20px; } 
# blog-archive-signup # fields-container { šířka:100% } 
# blog-archive-přihlášení [name * = 'e-mail'] { pozadí:url ( "images / low-field.png") bez opakování 0 0; vycpávka:0; okraj:0; výška:44px; hranice:0; šířka:560px; linka-height:22px; vznášet se:vlevo; } 
# blog-archive-přihlášení [name * = 'e-mail'] { @ include breakpoint (max-width $ tablet) { vycpávka:0; okraj:0; hranice:0; šířka:50%; vznášet se:vlevo; } } 
# blog-archive-signup input [typ = 'submit'] { pozadí:url ( "images / low-button.png") bez opakování 0 0; vycpávka:0; okraj:0; výška:44px; hranice:0; šířka:180px; barva: #fff; text-align:centrum }

Jak přidat odběratele

Nyní zaregistrujeme uživatele na serveru Jetpack pomocí „ jQuery.ajax ".

$("# Blog-archive-signup").předložit(funkce(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").skrýt().odstranit(); 
      byl __button = $('blog-archive-signup input [typ = "odeslat"]').získat(0); $('blog-archive-signup input [typ = "odeslat"]').po(codeable_spinner); 
      byl __DATA = $(tento).serializovat() + '& secure =' + codeableVars.zabezpečení + '& action = blog_archive_signup';   
      $.zveřejnit(codeableVars.ajaxurl,__DATA,funkce(odpověď) { konzole.přihlásit(odpověď); if (odpověď.úspěch) { 
          $("#codeable_spinner").replaceWith(„Úspěch!“).zpoždění(5000).fadeOut('Slow').odstranit(); } jiný { 
          $("#codeable_spinner").replaceWith(""+odpověď.zpráva+"").zpoždění(5000).fadeOut('Slow').odstranit(); 
      } 
}) 
})

Nyní musíme uložit uživatele v Jetpack a Intercom. Prohrabal jsem se kódem Jetpack, abych zjistil, jak přidává předplatitele, a našel jsem třídu „Jetpack_Subscriptions“ a statickou metodu, která bere e-mail jako parametr. A pro Intercom bude stačit jednoduchý požadavek CURL.

ADD_ACTION('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
ADD_ACTION('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
funkce blog_archive_signup() { 
  $ data = řada( ‚E-mail‘ => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => řada('Subscribed_via' => 'Blog_archive_partition') ); 
  $ volání = wswp_make_api_call($ data); 
  $ odpověď = řada(„Úspěch“=>pravdivý,"Message" => "Bpa_signup"); 
  $ předplatit = Jetpack_Subscriptions::upsat($ _REQUEST[$ prefix.'_email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // refresh subscribers count in wp-admin  
  wp_send_json($ odpověď); 
  výstup(); 
} 
funkce wswp_make_api_call($ data) { 
   $ curl = curl_init(); curl_setopt_array($ curl, řada( CURLOPT_HTTPHEADER => řada('Content-Type: application / json', 'Přijmout: 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($ data), CURLOPT_HEADER => nepravdivý, )); 
   // Všimněte si, že je třeba nastavit klíč na správné hodnoty  
  $ return = json_decode(curl_exec($ curl), pravdivý); 
  curl_close($ curl); 
  zpáteční $ return; 
}

To je vše. Když teď někdo vyplní tento formulář, okamžitě obdrží na Jetpack e-mail s potvrzením, že se přihlásil k odběru, a dostane e-maily obsahující vaše články, jakmile budou zveřejněny.

V zákulisí jsou registrováni v Intercomu pod štítkem „Subscribed_Via => oddíl archivu blogu“. Příště vám řeknu, jak můžete také poslat své předplatitele pluginu Thrive Leads do Intercomu pomocí données další informace, které vám umožní je všechny rozlišit.

Pokud neovládáte užitečnost „ codeableVars.security Musíte vědět, že obsahuje „ nuncius WordPress. Normálně by to bylo provedeno pomocí funkce php “ wp_nonce_field () Ve formuláři, ale skript obsahující pouze JavaScript, je pole nonce již k dispozici ve funkci JS " wp_localize_script () ".

To je o všem, co pro tento tutoriál udělat. Neváhejte se na nás zeptat nebo se o kurz podělte se svými přáteli na svých oblíbených sociálních sítích.