Jetpack är en bra lösning för att bygga en lista över abonnenter, och Intercom är en lösning som gör att du kan hantera abonnenter och stanna i kontakta med dem.

I den här tutorialen visar vi dig hur du kan öka din abonnentlista med Jetpack och Intercom.

Vissa människor kom och frågade mig om det är möjligt att låta användare prenumerera och ta emot alla sina artiklar via e-post och lagra sina e-postadresser i Intercom. Jag svarade genast positivt, särskilt som API (Application Programming Interface) är lätt att använda.

Så jag tänkte på att använda ett prenumerations-plugin, som skickar e-postadresserna till Intercom via API. Och det är precis vad jag ska göra.

Vi hade redan Jetpack installerat, så allt du behöver är att aktivera modulen " Abonnemang …Men det är inte så enkelt, tänk om du vill visa formen på en anpassad plats (anpassad sida till exempel)? Vi visar dig också hur du anpassar var formen.

första steg

Vi börjar med en formen grundläggande :

Missa aldrig våra inlägg. Få uppdateringar i din brevlåda så snart de publiceras.

För alla som kan vara intresserade har jag lagt till formuläret här med hjälp av åtgärden " genesis_after_entry Genesis-tema, men om du inte använder Genesis kan du använda filtret " the_content Och sammanlänkat ditt innehåll till artikeln.

I vårt exempel visar vi formuläret efter 3e artikeln. Om du använder filtret använder du funktionerna " ob_start "Och" ob_get_clean För att initialisera bufferten och använda dess innehåll.

global $ post, $ wp_query; 
if (is_home() && $ wp_query->inlägg[3]->ID == $ post->ID) {       
     innefattar(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); 
}

Här är en CSS att styla formuläret.

# Blogg-arkiv-registrering { bredd:100% ! viktigt; klar:båda; } 
# Blogg-arkiv-registrering { @include brytpunkt ($ Tablet) { bakgrund:url ( "bilder / låg-bg.png") ingen upprepa 0 0; höjd:200px; } } 
# Blogg-arkiv-registrering fieldset { gränsen:0; bredd:100%; padding-vänster:50px; } 
# Blogg-arkiv-registrering fieldset { @include brytpunkt (max-bredd $ Tablett) { padding-vänster:0px } } 
# Blogg-arkiv-registrering legend { padding-top:20px; } 
# Blogg-arkiv-signup fält Container # { bredd:100% } 
# Blogg-arkiv-registrering input [namn * = 'e'] { bakgrund:url ( "bilder / låg-field.png") ingen upprepa 0 0; stoppning:0; marginal:0; höjd:44px; gränsen:0; bredd:560px; radavstånd:22px; flyta:vänster; } 
# Blogg-arkiv-registrering input [namn * = 'e'] { @include brytpunkt (max-bredd $ Tablett) { stoppning:0; marginal:0; gränsen:0; bredd:50%; flyta:vänster; } } 
# Blog-arkiv-registrering input [type = 'submit'] { bakgrund:url ( "bilder / låg-button.png") ingen upprepa 0 0; stoppning:0; marginal:0; höjd:44px; gränsen:0; bredd:180px; färg: #fff; text-align:centrum }

Hur man lägger till prenumeranter

Vi registrerar nu användare på Jetpack med " jQuery.ajax ".

$("# Blog-arkiv-registrering").skicka(fungera(e) { e.prevent(); $("LoadingMessage #, # failMessage").dölja().ta bort(); 
      var __button = $("# Blog-arkiv-registrering input [type = "submit"]).skaffa sig(0); $("# Blog-arkiv-registrering input [type = "submit"]).efter(codeable_spinner); 
      var __DATA = $(detta).serialisera() + '& säkra =' + codeableVars.säkerhet + '& action = blog_archive_signup';   
      $.inlägg(codeableVars.ajaxurl,__DATA,fungera(respons) { trösta.log(respons); if (respons.framgång) { 
          $("#codeable_spinner").replaceWith("Framgång!").fördröja(5000).fadeout('Slow').ta bort(); } annars { 
          $("#codeable_spinner").replaceWith(""+respons.meddelande+"").fördröja(5000).fadeout('Slow').ta bort(); 
      } 
}) 
})

Nu måste vi spara användaren i Jetpack och Intercom. Jag grävde i Jetpacks kod för att ta reda på hur den lägger till prenumeranter och hittade klassen "Jetpack_Subscriptions" och statisk metod som tar e-post som en parameter. Och för Intercom räcker det med en enkel CURL-begäran.

add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
fungera blog_archive_signup() { 
  $ uppgifter = array( 'E-post' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => array('Subscribed_via' => 'Blog_archive_partition') ); 
  $ samtal = wswp_make_api_call($ uppgifter); 
  $ svar = array("Success"=>sann,"Meddelande" => "Bpa_signup"); 
  $ prenumerera = Jetpack_Subscriptions::prenumerera($ _REQUEST[$ prefix.'_email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // refresh Abonnenter räknas i wp-admin  
  wp_send_json($ svar); 
  avsluta(); 
} 
fungera wswp_make_api_call($ uppgifter) { 
   $ curl = curl_init(); curl_setopt_array($ curl, array( CURLOPT_HTTPHEADER => array('Content-Type: application / json', 'Acceptera: 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($ uppgifter), CURLOPT_HEADER => falsk, )); 
   // Observera att du måste ställa in konstant för app-id och API-nyckel till rätt värden  
  $ retur = json_decode(curl_exec($ curl), sann); 
  curl_close($ curl); 
  avkastning $ retur; 
}

Det är allt. Nu när någon fyller i det här formuläret får de omedelbart ett bekräftelsemeddelande på Jetpack där de säger att de har prenumererat, och de kommer att få e-postmeddelanden som innehåller dina artiklar så snart de publiceras.

Bakom kulisserna är de registrerade i Intercom med etiketten "Subscribed_Via => bloggarkivpartition". Nästa gång ska jag berätta hur du också kan skicka dina Thrive Leads plugin-prenumeranter till Intercom med uppgifter ytterligare information som gör att du kan särskilja dem alla.

Om du inte behärskar nyttan av " codeableVars.security Du måste veta att det innehåller en " nuncio "Wordpress. Normalt skulle detta ha gjorts med php-funktionen " wp_nonce_field () I formuläret, men skriptet som bara innehåller JavaScript, är fältet nonce redan tillgängligt i JS-funktionen " wp_localize_script () ".

Det är ungefär allt som finns att göra för denna självstudie. Ställ oss gärna frågor eller dela handledning med dina vänner på dina favorit sociala nätverk.