Build Your WordPress Subscribers with Jetpack and Intercom

Jetpack is a great way to run your WordPress subscriptions, and Intercom is a truly awesome way to manage your subscribers and to stay in touch with your audience. Here is how you can build your blog subscriptions with Jetpack and store those email addresses in Intercom.

The marketing team came to me and asked if I could allow our users to subscribe and receive all our blog posts by email, and store their email addresses into Intercom. I immediately thought it is a doddle to add users into Intercom as its API is so easy to use, but of course, Intercom isn’t gonna be able to send out the blog posts as they are posted now is it?

Right away I am thinking use a subscription plugin, hook in and send the email addresses to Intercom via the API. And that is exactly what I did.

We already had Jetpack installed so I simply enabled the Subscriptions module… Hang on! I wish it was that simple: the marketing team wanted the form in a custom location (in the middle of the blog archive page) and so I would have to programmatically add the subscribers into Jetpack as well. Now this was gonna be fun.

The Build Begins… The Form

So first I created the form HTML:

<form id="blog-archive-signup">
<!-- the id is for use in targeting the form via javascript //-->
 <fieldset>
 <legend>Never Miss Our Posts. Get updates in your mailbox as soon as they are posted.
</legend>
 <p id="fields-container">
 <input type="text" name="blog_archive_partition_email" />
 <input type="submit" name="blog_archive_partition_submit" value="SUBSCRIBE" />
 </p>
 </fieldset>
</form&t;

For anyone who may be interested I added the form in that location using the genesis_after_entry hook and checking for the third post with the following code in a function

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

The form is styled like so:

#blog-archive-signup {
 width:100% !important;
 clear:both;
}

#blog-archive-signup {
 @include breakpoint($tablet) {
 background:url("images/bas-bg.png") no-repeat 0 0;
 height:200px;
 }
}

#blog-archive-signup fieldset {
 border:0;
 width:100%;
 padding-left:50px;

}

#blog-archive-signup fieldset {
 @include breakpoint(max-width $tablet) {
 padding-left:0px
 }
}

#blog-archive-signup legend {
 padding-top:20px;
}

#blog-archive-signup #fields-container {
 width:100%
}

#blog-archive-signup input[name*='email'] {
 background:url("images/bas-field.png") no-repeat 0 0;
 padding:0;
 margin:0;
 height:44px;
 border:0;
 width:560px;
 line-height:22px;
 float:left;
}

#blog-archive-signup input[name*='email'] {
 @include breakpoint(max-width $tablet) {
 padding:0;
 margin:0;
 border:0;
 width:50%;
 float:left;
 }
}

#blog-archive-signup input[type='submit'] {
 background:url("images/bas-button.png") no-repeat 0 0;
 padding:0;
 margin:0;
 height:44px;
 border:0;
 width:180px;
 color: #fff;
 text-align:center
}

Adding the Subscribers

Now users filling in that form wouldn’t get very much, they wouldn’t even get that fuzzy-warm feeling you get when receiving a confirmation email asking you to activate your subscription (sic).

So what’s next, grab the submission and add that user as a Jetpack subscriber. I decided to do this using jQuery and wp_ajax — first the jquery.

$("#blog-archive-signup").submit(function(e) {
 e.preventDefault();
 $("#loadingMessage,#failMessage").hide().remove();
 var __button = $('#blog-archive-signup input[type="submit"]').get(0);
 $('#blog-archive-signup input[type="submit"]').after(codeable_spinner);
 var __data = $(this).serialize() + '&secure=' 
+ codeableVars.security + '&action=blog_archive_signup';
 $.post(codeableVars.ajaxurl,__data,function(response) {
 console.log(response);
 if (response.success) {
 $("#codeable_spinner").replaceWith("Success!").delay(5000).fadeOut('slow').remove();
 }
 else {
 $("#codeable_spinner").replaceWith("

“+response.message+”

").delay(5000).fadeOut('slow').remove();
 }
 })
 })

Now we have to save the user into Jetpack and Intercom. So I dug into the code for Jetpack to find out how it added subscribers and found the Jetpack_Subscriptions class and more importantly its static subscribe method which took the email as a parameter. And for Intercom a simple curl request is fine, see the code in wswp_make_api_call. Here it goes:

add_action('wp_ajax_landing_page_signup', 'blog_archive_signup'));
add_action('wp_ajax_nopriv_landing_page_signup', 'blog_archive_signup');

Function blog_archive_signup() {
 $data = array(
 'email' => $_POST['blog_archive_partition_email'],
 'custom_attributes' => array('subscribed_via' => 'blog_archive_partition')
 );

 $call = wswp_make_api_call($data);
 $response = array("success"=>true,"message" => "bpa_signup");
 $subscribe = Jetpack_Subscriptions::subscribe($_REQUEST[$prefix.'_email']);
 delete_transient('wpcom_subscribers_total');
 stats_update_blog();
 //refresh subscribers count in wp-admin
 wp_send_json($response);
 exit();
}

function 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 => false,
 ));
//Note you will need to set the constants for app id and api key to the correct values
 $return = json_decode(curl_exec($curl), true);
 curl_close($curl);
 return $return;
 }

And there you have it. Now when someone fills in that form, they immediately get a confirmation email from Jetpack saying they have subscribed, and they get the email containing the posts as soon as they are published.

Behind the scenes they are saved in Intercom with the tag Subscribed_Via => blog archive partition. Next time I will tell you how you can also send your subscribers from the Thrive Leads plugin to Intercom with some additional data that will make for awesome segmenting.

PS if any of you are wondering about codeableVars.security – it holds a WordPress nonce. Normally this would have been a wp_nonce_field() in the form, but the script containing that javascript is already localized using wp_localize_script() and the nonce is stored into that.