Jetpack er en flott løsning for å bygge en liste over abonnenter, og Intercom er en løsning som lar deg administrere abonnenter og holde deg inne kontakt med dem.
I denne opplæringen vil vi vise deg hvordan du kan øke abonnentlisten din med Jetpack og Intercom.
Noen mennesker kom for å spørre meg om det er mulig å la brukere abonnere og motta alle artiklene sine på e-post, og lagre e-postadressene sine i Intercom. Jeg reagerte umiddelbart positivt, spesielt som API (Application Programming Interface) er enkel å bruke.
Så jeg tenkte å bruke et abonnements-plugin, som vil sende e-postadressene til Intercom via API. Og det er akkurat det jeg skal gjøre.
Jetpack hadde vi allerede installert, så alt du trenger er å aktivere modulen " Abonnementer …Men det er ikke så enkelt, hva om du vil vise skjema på et tilpasset sted (tilpasset side for eksempel)? Vi viser deg også hvordan du tilpasser hvor skjema.
første trinn
Vi starter med en skjema grunnleggende:
Gå aldri glipp av innleggene våre. Få oppdateringer i postkassen din så snart de er lagt ut.
For alle som kan være interessert, har jeg lagt til skjemaet her ved hjelp av handlingen " genesis_after_entry Genesis-tema, men hvis du ikke bruker Genesis, kan du bruke filteret " the_content Og koble innholdet ditt til innholdet i artikkelen.
I vårt eksempel vil vi vise skjemaet etter 3e artikkelen. Hvis du bruker filteret, bruker du funksjonene " ob_start "Og" ob_get_clean For å initialisere bufferen og bruke innholdet.
global $ post, $ wp_query; if (is_home() && $ wp_query->innlegg[3]->ID == $ post->ID) { inkludere(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Her er en CSS-kode for å stile skjemaet.
# Blog-arkiv-registrering { bredde:100% ! viktig; fjerne:både; } # Blog-arkiv-registrering { @include breakpoint ($ tablet) { bakgrunn:url ( "images / low-bg.png") nei gjenta 0 0; høyde:200px; } } # blog-arkiv-registreringsfelt { grensen:0; bredde:100%; padding-left:50px; } # blog-arkiv-registreringsfelt { @include breakpoint (maksimal bredde $ tablett) { padding-left:0px } } # legendarisk arkiv-påloggingslegende { padding-top:20px; } # blog-arkiv-registrering # felt-container { bredde:100% } # bloggarkiv-påmeldingsinngang [navn * = 'email'] { bakgrunn:url ( "images / low-field.png") nei gjenta 0 0; padding:0; margin:0; høyde:44px; grensen:0; bredde:560px; line-height:22px; flyte:venstre; } # bloggarkiv-påmeldingsinngang [navn * = 'email'] { @include breakpoint (maksimal bredde $ tablett) { padding:0; margin:0; grensen:0; bredde:50%; flyte:venstre; } } # blogg-arkiv-påmeldingsinngang [type = 'send'] { bakgrunn:url ( "images / low-button.png") nei gjenta 0 0; padding:0; margin:0; høyde:44px; grensen:0; bredde:180px; farge: #fff; text-align:senter }
Hvordan legge til abonnenter
Vi vil nå registrere brukere på Jetpack ved å bruke " jQuery.ajax '.
$("# Blog-arkiv-registrering").send(funksjon(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").skjule().fjerne(); var __button = $('blogg-arkiv-registreringsinngang [type = "send"]').få(0); $('blogg-arkiv-registreringsinngang [type = "send"]').etter(codeable_spinner); var __DATA = $(denne).serial() + '& sikre =' + codeableVars.sikkerhet + '& action = blog_archive_signup'; $.poste(codeableVars.ajaxurl,__DATA,funksjon(svar) { trøste.logg(svar); if (svar.suksess) { $("#codeable_spinner").replaceWith("Suksess!").forsinkelse(5000).fadeout('Slow').fjerne(); } ellers { $("#codeable_spinner").replaceWith(""+svar.melding+"").forsinkelse(5000).fadeout('Slow').fjerne(); } }) })
Nå må vi lagre brukeren i Jetpack og Intercom. Jeg gravde i Jetpacks kode for å finne ut hvordan den legger til abonnenter og fant klassen "Jetpack_Subscriptions" og statisk metode som tar e-post som en parameter. Og for intercom vil en enkel CURL-forespørsel være tilstrekkelig.
ADD_ACTION('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); ADD_ACTION('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); funksjon blog_archive_signup() { $ data = matrise( 'E-post' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => matrise('Subscribed_via' => 'Blog_archive_partition') ); $ samtale = wswp_make_api_call($ data); $ svar = matrise("suksess"=>sant,"Message" => "Bpa_signup"); $ abonnere = Jetpack_Subscriptions::abonnere($ _REQUEST[$ prefix.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // Oppdater abonnenter telle i wp-admin wp_send_json($ svar); avslutte(); } funksjon wswp_make_api_call($ data) { $ curl = curl_init(); curl_setopt_array($ curl, matrise( CURLOPT_HTTPHEADER => matrise('Innholdstype: søknad / json', 'Godta: søknad / 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, )); // Merk at du må angi riktig for app-id og api-nøkkel til de riktige verdiene $ retur = json_decode(curl_exec($ curl), sant); curl_close($ curl); retur $ retur; }
Det er alt. Nå når noen fyller ut dette skjemaet, vil de umiddelbart få en bekreftelses-e-post på Jetpack om at de har abonnert, og de vil motta e-postmeldinger som inneholder artiklene dine så snart de er lagt ut.
I kulissene er de registrert i Intercom med etiketten «Subscribed_Via => bloggarkivpartisjon». Neste gang skal jeg fortelle deg hvordan du også kan sende Thrive Leads-plugin-abonnentene dine til Intercom med données tilleggsinformasjon som lar deg skille dem alle.
Hvis du ikke mestrer nytten av " codeableVars.security Du må vite at den inneholder en " nuncio "WordPress. Normalt ville dette blitt gjort med php-funksjonen " wp_nonce_field () I skjemaet, men skriptet som bare inneholder JavaScript, er nonce-feltet allerede tilgjengelig i JS-funksjonen " wp_localize_script () '.
Det er omtrent alt du trenger å gjøre for denne opplæringen. Still oss spørsmål eller del opplæringen med vennene dine på dine favoritt sosiale nettverk.
