Incorporare i moduli di iscrizione nel sito web

Scoprite come consentire ai visitatori di iscriversi all’email marketing di Clerk.io direttamente dal vostro sito web.
Products:

Clerk.io consente di ospitare gli abbonati direttamente nella piattaforma.

Un ottimo modo per ottenere nuovi iscritti è quello di aggiungere un modo semplice per farli iscrivere alle newsletter, direttamente dal vostro sito web.

Il vostro nuovo modulo di iscrizione avrà un aspetto simile a questo:

Incorporazione di un modulo di iscrizione generale

Questo modulo farà iscrivere i visitatori a tutte le e-mail inviate da Clerk.

È sufficiente copiare il codice di incorporamento sottostante e inserirlo nel proprio negozio web dove si desidera che venga visualizzato:

<div class="clerk-sign-up">
   <h2 class="clerk-sign-up-headline">Sign up now!</h2>
   <div class="clerk-sign-up-subtitle">Get personal offers and stay up-to-date with trends.</div>
   <div class="clerk-input-wrapper">
      <input type="text" id="clerk-add-subscriber-input" placeholder="Enter your email"></input>
      <button id="clerk-add-subscriber-btn" onclick="add_subscriber()">Subscribe</button>
   </div>
   <div id="clerk-subscribe-message"></div>
</div>

<script>
   function add_subscriber(){
      var clerk_btn = document.getElementById("clerk-add-subscriber-btn");
      var clerk_input = document.getElementById("clerk-add-subscriber-input");
      var clerk_message = document.getElementById("clerk-subscribe-message");
      Clerk("call","subscriber/subscribe", {
         email: clerk_input.value
      },
      function(response){
         clerk_message.style.color = "#008001";
         clerk_message.innerText = "You are now subscribed!";
         clerk_btn.innerText = "Subscribed!";
         clerk_btn.style.opacity = "0.5";
         clerk_btn.disabled = true;
      },
      function(response) {
         clerk_message.style.color = "#EE360E";
         clerk_message.innerText = "Could not subscribe. Please try again.";
      }
   )};
</script>
<style>
   #clerk-add-subscriber-input {
      height: 28px;
      width: 50%;
      padding: 0px 0px 0px 6px;
      border: 1px solid #D3D3D3;
   }

   #clerk-add-subscriber-btn {
      height:  30px;
      width: auto;
      background-color: #008001;
      border:  1px solid #008001;
      color: white;
      cursor: pointer;
   }

   #clerk-subscribe-message {
      height: 20px;
      margin: auto;
      text-align: center;
   }

   .clerk-sign-up {
      width: 50%;
      padding: 60px 0px 60px 0px;
      max-width: 800px;
      min-width: 500px;
      margin: 40px auto 40px auto;
      background-color: #FEFAF4;
   }

   .clerk-sign-up-headline {
      margin: 0px 14px 14px 14px;
      text-align:  center;
   }

   .clerk-sign-up-subtitle {
      margin: 14px 14px 28px 14px;
      text-align: center;
      color: #808080;
   }

   .clerk-input-wrapper {
      margin: 10px auto 10px auto;
      text-align: center;
   }

   .clerk-input-label {
      margin:  5px 0px 5px 0px;
   }
</style>

Il codice contiene 3 parti:

  • Un blocco HTML che mostra il modulo. Se necessario, questo blocco può essere personalizzato.
  • Uno script che prende l’indirizzo e-mail dei visitatori e li aggiunge come abbonati a Clerk.
  • Una sezione CSS che stilizza il modulo. Anche questo elemento può essere personalizzato, se necessario.

Incorporare un modulo di iscrizione per una lista specifica

Clerk.io permette anche di lavorare con liste di destinatari che possono essere utilizzate per campagne email specifiche, come offerte speciali, interessi unici del marchio, ecc.

Per configurare il modulo di iscrizione per una lista specifica, è necessario l’ID della lista che si trova in my.clerk.io > Email > Sottoscrittori > Liste.

Aggiungere list_id, contenente l’ID della propria lista, allo script di cui sopra.

Ricordare il comma dopo “clerk_input.value”: