Jetpack er en fantastisk løsning til at opbygge en liste over abonnenter, og Intercom er en løsning, der giver dig mulighed for at administrere abonnenter og blive i kontakt med dem.
I denne tutorial vil vi vise dig, hvordan du øger din abonnentliste med Jetpack og Intercom.
Nogle mennesker spurgte mig, om det er muligt at give brugerne mulighed for at abonnere og modtage alle deres artikler pr. E-mail og gemme deres e-mail-adresser i Intercom. Jeg svarede straks positivt, især som API (Application Programming Interface) er nem at bruge.
Så jeg tænkte på at bruge et abonnements plugin, som sender e-mail-adresserne til Intercom via API. Og det er præcis, hvad jeg vil gøre.
Vi havde allerede Jetpack installeret, så alt hvad du behøver er at aktivere modulet " Abonnementer …Det er dog ikke så enkelt, hvad nu hvis du vil vise formular på en tilpasset placering (brugerdefineret side for eksempel)? Vi viser dig også, hvordan du tilpasser, hvor formular.
De første skridt
Vi starter med en formular grundlæggende:
Gå aldrig glip af vores indlæg. Få opdateringer i din postkasse, så snart de er sendt.
For alle, der kan være interesserede, har jeg tilføjet formularen her ved hjælp af handlingen " genesis_after_entry Genesis-tema, men hvis du ikke bruger Genesis, kan du bruge filteret " the_content Og sammenkædet dit indhold med artiklen.
I vores eksempel viser vi formularen efter 3e artikel. Hvis du bruger filteret, skal du bruge funktionerne " ob_start "Og" ob_get_clean At initialisere bufferen og bruge dens indhold.
global $ indlæg, $ wp_query; if (is_home() && $ wp_query->indlæg[3]->ID == $ indlæg->ID) { omfatter(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Her er en CSS til at style formularen.
# Blog-arkiv-tilmelding { bredde:100 % ! vigtigt; klar:både; } # Blog-arkiv-tilmelding { @include breakpoint ($ tablet) { baggrund:url ( "billeder / lav-bg.png") no-gentag 0 0; højde:200px; } } # Blog-arkiv-signup fieldset { grænse:0; bredde:100 %; padding-venstre:50px; } # Blog-arkiv-signup fieldset { @include breakpoint (max-bredde $ Tablet) { padding-venstre:0px } } # Blog-arkiv-signup legende { padding-top:20px; } # Blog-arkiv-tilmelding felter Container # { bredde:100 % } # Blog-arkiv-signup indgang [navn * = 'email'] { baggrund:url ( "billeder / lav-field.png") no-gentag 0 0; polstring:0; margin:0; højde:44px; grænse:0; bredde:560px; line-height:22px; flyde:til venstre; } # Blog-arkiv-signup indgang [navn * = 'email'] { @include breakpoint (max-bredde $ Tablet) { polstring:0; margin:0; grænse:0; bredde:50 %; flyde:til venstre; } } # Blog-arkiv-signup input [type = 'submit'] { baggrund:url ( "billeder / lav-button.png") no-gentag 0 0; polstring:0; margin:0; højde:44px; grænse:0; bredde:180px; farve: #fff; text-align:center }
Sådan tilføjes abonnenter
Vi registrerer nu brugere på Jetpack ved hjælp af " jQuery.ajax '.
$("# Blog-arkiv-signup").indsende(funktion(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").skjule().Fjern(); var __button = $('# Blog-arkiv-signup input [type = "submit"]').få(0); $('# Blog-arkiv-signup input [type = "submit"]').efter(codeable_spinner); var __DATA = $(denne).føljeton() + '& sikkert =' + codeableVars.sikkerhed + '& action = blog_archive_signup'; $.indlæg(codeableVars.ajaxurl,__DATA,funktion(svar) { konsol.log(svar); if (svar.succes) { $("#codeable_spinner").replaceWith("Succes!").forsinkelse(5000).fadeout('Slow').Fjern(); } andet { $("#codeable_spinner").replaceWith(""+svar.besked+"").forsinkelse(5000).fadeout('Slow').Fjern(); } }) })
Nu skal vi gemme brugeren i Jetpack og Intercom. Jeg gravede i Jetpacks kode for at finde ud af, hvordan den tilføjer abonnenter og fandt "Jetpack_Subscriptions"-klassen og den statiske metode, der tager e-mail som en parameter. Og for intercom vil en simpel CURL-anmodning være tilstrækkelig.
ADD_ACTION('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); ADD_ACTION('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); funktion blog_archive_signup() { $ data = matrix( 'E-mail' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => matrix('Subscribed_via' => 'Blog_archive_partition') ); $ opkald = wswp_make_api_call($ data); $ respons = matrix("Succes"=>sand,"Message" => "Bpa_signup"); $ abonnere = Jetpack_Subscriptions::Hold mig opdateret($ _REQUEST[$ præfiks.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // opdateringshastighed Abonnenter tæller i wp-admin wp_send_json($ respons); frakørsel(); } funktion wswp_make_api_call($ data) { $ krølle = curl_init(); curl_setopt_array($ krølle, matrix( CURLOPT_HTTPHEADER => matrix('Content-Type: application / JSON', 'Accepter: 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 => falsk, )); // Bemærk du bliver nødt til at sætte den konstant for app-id og api nøglen til de rette værdier $ retur = json_decode(curl_exec($ krølle), sand); curl_close($ krølle); afkast $ retur; }
Det er alt. Når nogen nu udfylder denne formular, får de straks en bekræftelses-e-mail på Jetpack, der siger, at de har abonneret, og de får e-mails, der indeholder dine artikler, så snart de er sendt.
Bag kulisserne er de registreret i Intercom med etiketten “Subscribed_Via => blog archive partition”. Næste gang vil jeg fortælle dig, hvordan du også kan sende dine Thrive Leads plugin-abonnenter til Intercom med données yderligere oplysninger, der giver dig mulighed for at skelne dem alle.
Hvis du ikke mestrer nytten af " codeableVars.security Du skal vide, at det indeholder en " nuntius "WordPress. Normalt ville dette være gjort med php-funktionen " wp_nonce_field () I formularen, men scriptet kun indeholder JavaScript, er nonce-feltet allerede tilgængeligt i JS-funktionen " wp_localize_script () '.
Det er omtrent alt, hvad der er at gøre for denne tutorial. Du er velkommen til at stille os spørgsmål eller dele selvstudiet med dine venner på dine foretrukne sociale netværk.
