Jetpack ist eine großartige Lösung zum Erstellen einer Abonnentenliste, und Intercom ist eine Lösung, mit der Sie Abonnenten verwalten und bleiben können Kontakt mit ihnen.
In diesem Tutorial zeigen wir Ihnen, wie Sie Ihre Abonnentenliste mit Jetpack und Intercom erweitern können.
Einige Leute haben mich gefragt, ob es möglich ist, Benutzern das Abonnieren und Empfangen aller ihrer Artikel per E-Mail zu ermöglichen und ihre E-Mail-Adressen in Intercom zu speichern. Ich habe sofort positiv geantwortet, vor allem als API (Programmierschnittstelle) ist einfach zu bedienen.
Daher habe ich mir überlegt, ein Abonnement-Plugin zu verwenden, das die E-Mail-Adressen über die API an Intercom sendet. Und genau das werde ich tun.
Wir hatten Jetpack bereits installiert, Sie müssen also nur das Modul aktivieren. " Abonnements …Allerdings ist es nicht so einfach, was, wenn Sie das anzeigen möchten Formular an einem benutzerdefinierten Ort (benutzerdefinierte Seite zum Beispiel)? Wir zeigen Ihnen auch, wie Sie anpassen können, wo die Formular.
erste Schritte
Wir beginnen mit a Formular Basic :
Verpassen Sie niemals unsere Beiträge. Erhalten Sie Updates in Ihrer Mailbox, sobald sie veröffentlicht werden.
Für alle, die interessiert sein könnten, habe ich das Formular hier mit der Aktion " genesis_after_entry Genesis-Thema, aber wenn Sie nicht Genesis verwenden, können Sie den Filter verwenden " the_content Und Ihren Inhalt mit dem des Artikels verkettet.
In unserem Beispiel zeigen wir das Formular nach dem 3 ane Artikel. Wenn Sie den Filter verwenden, verwenden Sie die Funktionen " ob_start "Und" ob_get_clean Initialisieren des Puffers und Verwenden seines Inhalts.
globale $ post, $ wp_query; if (is_home() && $ wp_query->Beiträge[3]->ID == $ post->ID) { das(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Hier ist eine CSS, das Formular stylen.
# Blog-Archiv-Anmeldungen { Breite:100% ! important; klar:beide; } # Blog-Archiv-Anmeldungen { @include Breakpoint ($ Tablet) { Hintergrund:url ( "images / low-bg.png") no-repeat 0 0; Höhe:200px; } } # Blog-Archiv-Anmeldungen Fieldset { Grenze:0; Breite:100%; padding-links:50px; } # Blog-Archiv-Anmeldungen Fieldset { @include Haltepunkt (max-width $ Tablet) { padding-links:0px } } # Blog-Archiv-Anmeldungen Legende { padding-top:20px; } # Blog-Archiv-Anmeldungen Felder Container # { Breite:100% } # Blog-Archiv-Anmeldungen Eingabe [name * = 'E-Mail'] { Hintergrund:url ( "images / low-field.png") no-repeat 0 0; Polsterung:0; Marge:0; Höhe:44px; Grenze:0; Breite:560px; line-height:22px; schweben:links; } # Blog-Archiv-Anmeldungen Eingabe [name * = 'E-Mail'] { @include Haltepunkt (max-width $ Tablet) { Polsterung:0; Marge:0; Grenze:0; Breite:50%; schweben:links; } } # Blog-Archiv-Anmeldungen input [type = 'submit'] { Hintergrund:url ( "images / low-button.png") no-repeat 0 0; Polsterung:0; Marge:0; Höhe:44px; Grenze:0; Breite:180px; Farbe: #fff; text-align:Zentrum }
So fügen Sie Abonnenten hinzu
Wir werden jetzt Benutzer auf Jetpack registrieren mit " jQuery.ajax ".
$("# Blog-Archiv-Anmeldungen").abschicken(Funktion(e) { e.prevent(); $("LoadingMessage #, # FailMessage").verstecken().entfernen(); jung __button = $('# Blog-Archiv-Anmeldungen input [type = "submit"]').bekommen(0); $('# Blog-Archiv-Anmeldungen input [type = "submit"]').nachdem(codeable_spinner); jung __DATA = $(fehlen uns die Worte.).Serialisierung() + '& Secure =' + codeableVars.Sicherheitdienst + '& action = blog_archive_signup'; $.Post(codeableVars.ajaxurl,__DATA,Funktion(Antwort) { trösten.Log(Antwort); if (Antwort.Erfolg) { $("#codeable_spinner").replaceWith(„Erfolg!“).verzögern(5000).fadeOut(‚Langsam‘).entfernen(); } sonst { $("#codeable_spinner").replaceWith(""+Antwort.Nachricht+"").verzögern(5000).fadeOut(‚Langsam‘).entfernen(); } }) })
Jetzt müssen wir den Benutzer in Jetpack und Intercom speichern. Ich habe mich mit dem Code von Jetpack beschäftigt, um herauszufinden, wie Abonnenten hinzugefügt werden, und habe die Klasse „Jetpack_Subscriptions“ und die statische Methode gefunden, die E-Mail als Parameter akzeptiert. Und für Intercom genügt eine einfache CURL-Anfrage.
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 = Array( ‚E-Mail‘ => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => Array('Subscribed_via' => 'Blog_archive_partition') ); $ Anruf = wswp_make_api_call($ Data); $ response = Array(„Erfolg“=>was immer dies auch sein sollte.,"Message" => "Bpa_signup"); $ abonnieren = Jetpack_Subscriptions::Abonnieren($ _REQUEST[$ prefix.‚_Bestellinformationen‘]); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // Aktualisieren Abonnenten zählen in wp-admin wp_send_json($ response); wunsch(); } Funktion wswp_make_api_call($ Data) { $ curl = curl_init(); curl_setopt_array($ curl, Array( CURLOPT_HTTPHEADER => Array('Content-Type: application / json', 'Accept: 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 => falsch, )); // Beachten Sie die Konstante für App-ID und api Schlüssel für die richtigen Werte gesetzt werden müssen $ Zurück = json_decode(curl_exec($ curl), was immer dies auch sein sollte.); curl_close($ curl); Rückkehr $ Zurück; }
Das ist alles. Wenn jemand dieses Formular ausfüllt, erhält er sofort eine Bestätigungs-E-Mail auf Jetpack, die besagt, dass er sich angemeldet hat, und er erhält E-Mails mit Ihren Artikeln, sobald diese veröffentlicht werden.
Hinter den Kulissen werden sie in Intercom mit dem Label „Subscribed_Via => Blog Archive Partition“ registriert. Beim nächsten Mal erzähle ich dir, wie du deine Thrive Leads Plugin-Abonnenten auch mit zu Intercom schicken kannst Daten zusätzliche Informationen, die es Ihnen ermöglichen, sie alle zu unterscheiden.
Wenn Sie den Nutzen von " codeableVars.security Sie müssen wissen, dass es eine enthält " Nuntius WordPress. Normalerweise wäre dies mit der PHP-Funktion gemacht worden. " wp_nonce_field () In dem Formular, aber dem Skript, das nur JavaScript enthält, ist das Nonce-Feld bereits in der JS-Funktion verfügbar. wp_localize_script () ".
Das ist ungefähr alles, was Sie für dieses Tutorial tun müssen. Sie können uns gerne Fragen stellen oder das Tutorial in Ihren bevorzugten sozialen Netzwerken mit Ihren Freunden teilen.
