Të ndërtuar listën tuaj të abonentëve me Jetpack dhe Intercom

Jetpack është një zgjidhje e shkëlqyeshme për krijimin e një liste abonentësh, dhe Intercom është një zgjidhje që do t'ju lejojë të menaxhoni abonentët dhe të qëndroni në na kontaktoni me ta.

Në këtë tutorial, ne do t'ju tregojmë se si të rritni listën e pajtimtarëve tuaj me Jetpack dhe Intercom.

Disa njerëz erdhën për të më pyetur nëse është e mundur t'u lejoni përdoruesve të pajtohen dhe të marrin të gjitha artikujt e tyre me postë elektronike, dhe t'i ruajnë adresat e tyre të postës elektronike në Intercom. Unë menjëherë u përgjigja pozitivisht, veçanërisht pasi API (Ndërfaqja e Programimit të Aplikimit) është i lehtë për t’u përdorur.

Kështu që mendova të përdor një shtojcë pajtimi, e cila do t'i dërgojë adresat e postës elektronike Intercom përmes API. Dhe kjo është pikërisht ajo që unë do të bëj.

Tashmë kemi instaluar Jetpack, kështu që gjithçka që ju duhet është të aktivizoni modulin " Abonimet …Megjithatë, nuk është aq e thjeshtë, çka nëse dëshironi të shfaqni formë në një vend të personalizuar (faqe me porosi për shembull)? Ne do t'ju tregojmë gjithashtu se si të rregulloni se ku formë.

Hapat e parë

Do të fillojmë me një formë bazë:

 Mos i humb asnjëherë postimet tona. Merrni azhurnime në kutinë tuaj postare sapo të postohen. 

Për këdo që mund të jetë i interesuar, unë kam shtuar formularin këtu duke përdorur veprimin " genesis_after_entry Tema e Zanafillës, por nëse nuk jeni duke përdorur Genesis, mund të përdorni filtrin " the_content Dhe lidhi përmbajtjen tuaj me atë të artikullit.

Në shembullin tonë, ne do të shfaqim formularin pas 3^e artikull. Nëse përdorni filtrin, përdorni funksionet " ob_start "Dhe" ob_get_clean Për të inicializuar bufferin dhe për të përdorur përmbajtjen e tij.

global $ pas, $ wp_query; 
if (is_home() && $ wp_query->postime[3]->ID == $ pas->ID) {       
     përfshin(get_stylesheet_directory()."/Includes/templates/snippets/blog-archive-signup.php"); 
}

Këtu është një kod CSS për të stiluar formën.

# Blog-arkiv-signup { gjerësi:100% ! i rëndësishëm; qartë:të dy; } 
# Blog-arkiv-signup { @ përfshi breakpoint (tabletë $) { sfond:URL ( "images / të ulët-BG.png") nuk e përsëris 0 0; lartësi:200px; } } 
# blog-arke-regjistrohen fieldset { kufi:0; gjerësi:100%; padding-majtas:50px; } 
# blog-arke-regjistrohen fieldset { @ përfshi breakpoint (max-width tabletë) { padding-majtas:0px } } 
# blog-archive-signup legjenda { padding-top:20px; } 
# blog-archive-signup # field-container { gjerësi:100% } 
# blog-archive-signup input [emri * = 'email'] { sfond:URL ( "images / të ulët-field.png") nuk e përsëris 0 0; mbushje:0; diferencë:0; lartësi:44px; kufi:0; gjerësi:560px; line-height:22px; shket:la; } 
# blog-archive-signup input [emri * = 'email'] { @ përfshi breakpoint (max-width tabletë) { mbushje:0; diferencë:0; kufi:0; gjerësi:50%; shket:la; } } 
# blog-archive-signup input [type = 'submit'] { sfond:URL ( "images / të ulët-button.png") nuk e përsëris 0 0; mbushje:0; diferencë:0; lartësi:44px; kufi:0; gjerësi:180px; ngjyrë: #fff; text-align:qendër }

Si të shtoni pajtimtarët

Tani do t'i regjistrojmë përdoruesit në Jetpack duke përdorur " jQuery.ajax '.

$("# Blog-arkiv-signup").paraqesë(funksion(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").fsheh().heq(); 
      ishte __button = $('# blog-archive-signup input [type = "dërgoj"]').marrë(0); $('# blog-archive-signup input [type = "dërgoj"]').pas(codeable_spinner); 
      ishte __DATA = $(kjo).botoj pjesë-pjesë() + '& e sigurt =' + codeableVars.siguri + '& veprim = blog_archive_signup';   
      $.post(codeableVars.ajaxurl,__DATA,funksion(përgjigje) { konsol.hyni(përgjigje); if (përgjigje.sukses) { 
          $("#Codeable_spinner").replaceWith("Suksesi!").vonesë(5000).Fadeout('Slow').heq(); } tjetër { 
          $("#Codeable_spinner").replaceWith(""+përgjigje.mesazh+"").vonesë(5000).Fadeout('Slow').heq(); 
      } 
}) 
})

Tani duhet ta ruajmë përdoruesin në Jetpack dhe Intercom. Unë gërmova në kodin e Jetpack për të zbuluar se si shton abonentët dhe gjeta klasën "Jetpack_Subscriptions" dhe metodën statike që merr email-in si parametër. Dhe për Intercom një kërkesë e thjeshtë CURL do të mjaftojë.

add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
funksion blog_archive_signup() { 
  $ dhënave = grup( 'Email' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => grup('Subscribed_via' => 'Blog_archive_partition') ); 
  $ thirrje = wswp_make_api_call($ dhënave); 
  Përgjigja $ = grup("Suksesi"=>i vërtetë,"Mesazhi" => "Bpa_signup"); 
  $ regjistroheni = Jetpack_Subscriptions::pajtohem($ _REQUEST[$ prefix.'_Email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // refresh abonentë llogariten në wp-admin  
  wp_send_json(Përgjigja $); 
  dalje(); 
} 
funksion wswp_make_api_call($ dhënave) { 
   $ curl = curl_init(); curl_setopt_array($ curl, grup( CURLOPT_HTTPHEADER => grup('Përmbajtja Type: application / json', 'Prano: 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($ dhënave), CURLOPT_HEADER => i rremë, )); 
   // Vini re se do t'ju duhet të vendosni të drejtën për aplikacionin dhe çelësin për vlerat e sakta  
  $ kthimi = json_decode(curl_exec($ curl), i vërtetë); 
  curl_close($ curl); 
  kthim $ kthimi; 
}

Kjo eshte e gjitha. Tani kur dikush plotëson këtë formë, ata menjëherë marrin një email konfirmimi në Jetpack duke thënë se janë regjistruar dhe ata do të marrin email që përmbajnë artikujt tuaj sa më shpejt që të postohen.

Në prapaskenë, ato regjistrohen në Intercom me etiketën “Subscribed_Via => ndarje e arkivit të blogut”. Herën tjetër do t'ju tregoj se si mund t'i dërgoni edhe abonentët tuaj të shtojcës Thrive Leads në Intercom with données informacion shtesë që do t'ju lejojë t'i dalloni të gjitha.

Nëse nuk zotëroni dobinë e " codeableVars.security Duhet ta dini që përmban një " ambasador i Papës "WordPress. Normalisht, kjo do të ishte bërë me funksionin php " wp_nonce_field () Në formë, por skenari që përmban vetëm JavaScript, fusha nonce është tashmë e disponueshme në funksionin JS " wp_localize_script () '.

Kjo ka të bëjë me gjithçka që duhet të bëni për këtë tutorial. Mos ngurroni të na shtroni pyetje ose të ndani mësimin me miqtë tuaj në rrjetet tuaja të preferuara sociale.