Einbetten von Anmeldeformularen auf Ihrer Website

Sehen Sie, wie Sie es Besuchern ermöglichen, Ihr Clerk.io E-Mail-Marketing direkt von Ihrer Website aus zu abonnieren

Products:

Clerk.io ermöglicht es Ihnen, Abonnenten direkt auf der Plattform zu hosten.

Eine großartige Möglichkeit, neue Abonnenten zu gewinnen, ist eine einfache Möglichkeit, sie direkt von Ihrer Website aus für Newsletter anmelden zu lassen.

Ihr neues Anmeldeformular sieht dann so aus:

Einbettung eines allgemeinen Anmeldeformulars

Mit diesem Formular melden sich Besucher für alle von Clerk verschickten E-Mails an.

Kopieren Sie einfach den untenstehenden Einbettungscode und fügen Sie ihn an der gewünschten Stelle in Ihrem Webshop ein:

<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>

Der Code besteht aus 3 Teilen:

Einen HTML-Block, der das Formular anzeigt. Dieser kann bei Bedarf frei gestaltet werden.
Ein Skript, das die E-Mail-Adresse des Besuchers aufnimmt und ihn als Abonnenten in Clerk einträgt.
Ein CSS-Abschnitt, der das Formular formatiert. Auch dieser kann bei Bedarf frei gestaltet werden.

Einbetten eines Anmeldeformulars für eine bestimmte Liste

Clerk.io ermöglicht es Ihnen auch, mit Empfängerlisten zu arbeiten, die für spezifische E-Mail-Kampagnen verwendet werden können, z. B. für Sonderangebote, einzigartige Markeninteressen usw.

Um das Anmeldeformular für eine bestimmte Liste zu konfigurieren, benötigen Sie die Listen-ID, die Sie unter my.clerk.io > E-Mail > Abonnenten > Listen finden können.

Fügen Sie list_id, das die ID Ihrer Liste enthält, in das oben genannte Skript ein.

Denken Sie an das Komma nach “clerk_input.value”: