Build your subscriber list with Jetpack and Intercom

Jetpack is a great solution for building a list of subscribers, and Intercom is a solution that will allow you to manage subscribers and stay in contact with them.

In this tutorial, we will show you how to increase your subscriber list with Jetpack and Intercom.

Some people came to ask me if it is possible to allow users to subscribe and receive all their articles by e-mail, and store their e-mail addresses in Intercom. I immediately responded positively, especially as the API (Application Programming Interface) is easy to use.

So I thought about using a subscription plugin, which will send the email addresses to Intercom through the API. And that's exactly what I will do.

We already had Jetpack installed, so all you need is to activate the module " Subscriptions …However, it's not that simple, what if you want to display the online form in a custom location (custom page for example)? We'll also show you how to customize where the online form.

First steps

We will start with a online form basic :

Never Miss Our Posts. Get updates in your mailbox as soon as they are posted.

For anyone who may be interested, I've added the form here using the action " genesis_after_entry Genesis theme, but if you're not using Genesis, you can use the filter " the_content And concatenated your content to that of the article.

In our example, we will display the form after the 3^e article. If you use the filter, use the functions " ob_start "And" ob_get_clean To initialize the buffer and use its contents.

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

Here is a CSS code for styling the form.

# Blog-archive-signup { width:Present in several = 100% !important; clear:both; } 
# Blog-archive-signup { @include breakpoint ($ tablet) { background:url ( "images / low-bg.png") No-repeat 0 0; height:200px; } } 
# Blog-archive-signup fieldset { border:0; width:Present in several = 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:Present in several = 100% } 
# Blog-archive-signup input [name * = 'email'] { background:url ( "images / low-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:Present in several = 50%; float:left; } } 
# Blog-archive-signup input [type = 'submit'] { background:url ( "images / low-button.png") No-repeat 0 0; padding:0; margin:0; height:44px; border:0; width:180px; color: #fff; text-align:center }

How to add subscribers

We will now register users on Jetpack using " jQuery.ajax ».

$("# 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) { consul.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 need to save the user in Jetpack and Intercom. I dug into Jetpack's code to find out how it adds subscribers and found the "Jetpack_Subscriptions" class and static method that takes email as a parameter. And for Intercom a simple CURL request will suffice.

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( 'E-mail' => $ _ 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.'_E-mail']); 
  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  
  $ return = json_decode(curl_exec($ curl), true); 
  curl_close($ curl); 
  return $ return; 
}

That's all. Now when someone fills out that form, they immediately get a confirmation email on Jetpack saying they've subscribed, and they'll get emails containing your articles as soon as they are posted.

Behind the scenes, they are registered in Intercom with the label “Subscribed_Via => blog archive partition”. Next time I will tell you how you can also send your Thrive Leads plugin subscribers to Intercom with data additional information that will allow you to distinguish them all.

If you do not master the usefulness of " codeableVars.security You must know that it contains a " nuncio WordPress. Normally, this would have been done with the php function " wp_nonce_field () In the form, but the script containing only JavaScript, the nonce field is already available in the JS function " wp_localize_script () ».

That's about all there is to do for this tutorial. Feel free to ask us questions or share the tutorial with your friends on your favorite social networks.