O Jetpack é uma ótima solução para criar uma lista de assinantes, e o Intercom é uma solução que permite gerenciar assinantes e ficar por dentro Contacto com eles.
Neste tutorial, mostraremos como aumentar sua lista de assinantes com o Jetpack e o Intercom.
Algumas pessoas vieram me perguntar se é possível permitir que os usuários assinem e recebam todos os seus artigos por email e armazenem seus endereços de email no Intercom. Eu imediatamente respondi positivamente, principalmente porque a API (Application Programming Interface) é fácil de usar.
Pensei em usar um plugin de assinatura, que enviaria os endereços de e-mail para a Intercom por meio da API. E é exatamente isso que vou fazer.
Já tínhamos o Jetpack instalado, então tudo que você precisa é ativar o módulo " Assinaturas …No entanto, não é tão simples assim, e se você quiser exibir o formulário em um local personalizado (página personalizada, por exemplo)? Também mostraremos como personalizar onde o formulário.
primeiros passos
Vamos começar com um formulário básico:
Nunca perca nossas postagens. Receba atualizações em sua caixa de correio assim que forem publicadas.
Para quem possa estar interessado, adicionei o formulário aqui usando a ação " genesis_after_entry Tema do Genesis, mas se você não estiver usando o Genesis, poderá usar o filtro " the_content E concatenou seu conteúdo com o do artigo.
Em nosso exemplo, exibiremos o formulário após o 3e artigo. Se você usar o filtro, use as funções " ob_start "E" ob_get_clean Para inicializar o buffer e usar seu conteúdo.
global $ post, $ wp_query; if (is_home() && $ wp_query->posts[3]->ID == $ post->ID) { incluir(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Aqui está uma CSS para estilizar o formulário.
# Blog-archive-inscrição { largura:100% ! Importante; remover filtragem:ambos; } # Blog-archive-inscrição { breakpoint @include ($ Tablet) { fundo:url ( "imagens / baixo bg.png") sem repetir 0 0; altura:200px; } } # Blog-archive-inscrição fieldset { fronteira:0; largura:100%; padding-left:50px; } # Blog-archive-inscrição fieldset { breakpoint @include (max-width $ Tablet) { padding-left:0px } } # Blog-archive-inscrição lenda { padding-top:20px; } # Campos Blog-archive-inscrição Container # { largura:100% } # Entrada Blog-archive-inscrição [nome * = 'email'] { fundo:url ( "imagens / baixo field.png") sem repetir 0 0; acolchoamento:0; margem:0; altura:44px; fronteira:0; largura:560px; altura da linha:22px; flutuar:esquerda; } # Entrada Blog-archive-inscrição [nome * = 'email'] { breakpoint @include (max-width $ Tablet) { acolchoamento:0; margem:0; fronteira:0; largura:50%; flutuar:esquerda; } } input # Blog-archive-inscrição [type = 'submit'] { fundo:url ( "imagens / baixo button.png") sem repetir 0 0; acolchoamento:0; margem:0; altura:44px; fronteira:0; largura:180px; cor: #fff; text-align:centro }
Como adicionar assinantes
Agora, registraremos os usuários no Jetpack usando " jQuery.ajax ".
$("# Blog-archive-inscrição").enviar(função(e) { e.preventDefault(); $("LoadingMessage # # failMessage").esconder().remover(); var __button = $('# Blog-archive-inscrição input [type = "submit"]').ter(0); $('# Blog-archive-inscrição input [type = "submit"]').depois de(codeable_spinner); var __DATA = $(isto).seriar() + '& seguro =' + codeableVars.segurança + '& action = blog_archive_signup'; $.postar(codeableVars.ajaxurl,__DATA,função(resposta) { consolá.log(resposta); if (resposta.sucesso) { $("#codeable_spinner").replaceWith("Sucesso!").atraso(5000).fadeOut('Lento').remover(); } outro { $("#codeable_spinner").replaceWith(""+resposta.mensagem+"").atraso(5000).fadeOut('Lento').remover(); } }) })
Agora precisamos salvar o usuário no Jetpack e no Intercom. Pesquisei no código do Jetpack para descobrir como ele adiciona assinantes e encontrei a classe "Jetpack_Subscriptions" e o método estático que recebe o email como parâmetro. E para o Intercom uma simples solicitação CURL será suficiente.
add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); função blog_archive_signup() { R $ dados = ordem( 'E-mail' => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => ordem('Subscribed_via' => 'Blog_archive_partition') ); $ chamada = wswp_make_api_call(R $ dados); $ response = ordem("Sucesso"=>verdadeiro,"Mensagem" => "Bpa_signup"); $ subscrever = Jetpack_Subscriptions::Inscreva-se($ _REQUEST[$ prefix.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // Assinantes de atualização contar em wp-admin wp_send_json($ response); saída(); } função wswp_make_api_call(R $ dados) { $ onda = curl_init(); curl_setopt_array($ onda, ordem( CURLOPT_HTTPHEADER => ordem('Content-Type: application / json', 'Aceitar: 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(R $ dados), CURLOPT_HEADER => falso, )); // Note que você precisará definir a constante para id aplicativo e chave de API para os valores adequados $ Retornar = json_decode(curl_exec($ onda), verdadeiro); curl_close($ onda); retorno $ Retornar; }
Isso é tudo. Agora, quando alguém preenche esse formulário, recebe imediatamente um e-mail de confirmação no Jetpack dizendo que se inscreveu e receberá e-mails com seus artigos assim que forem postados.
Nos bastidores, eles são registrados no Intercom com o rótulo “Subscribe_Via => partição de arquivo do blog”. Da próxima vez, direi como você também pode enviar seus assinantes do plug-in Thrive Leads para o Intercom com dados informações adicionais que lhe permitirão distingui-los todos.
Se você não dominar a utilidade de " codeableVars.security Você deve saber que ele contém um " nonce WordPress. Normalmente, isso teria sido feito com a função php " Wp_nonce_field () No formulário, mas o script que contém apenas JavaScript, o campo nonce já está disponível na função JS " wp_localize_script () ".
É tudo o que há para fazer neste tutorial. Sinta-se à vontade para nos fazer perguntas ou compartilhar o tutorial com seus amigos em suas redes sociais favoritas.
