Insertar formularios de suscripción en su sitio web
Products:
Clerk.io te permite alojar suscriptores directamente en la plataforma.
Una gran manera de conseguir nuevos suscriptores es añadir una forma fácil de permitirles suscribirse a boletines de noticias, directamente desde su sitio web.
Su nuevo formulario de suscripción se parecerá a este out-of-the-box:
Incrustar un formulario de suscripción general
Este formulario suscribirá a los visitantes a todos los correos electrónicos enviados desde Clerk.
Simplemente copie el siguiente código e insértelo en el lugar de su tienda donde desee que aparezca:
<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>
El código consta de 3 partes:
- Un bloque HTML que muestra el formulario. Se le puede dar estilo libremente si es necesario.
- Un script que toma la dirección de correo electrónico del visitante y lo añade como suscriptor en Clerk.
- Una sección CSS que da estilo al formulario. Esto también puede ser de estilo libre si es necesario.
Incrustar un formulario de suscripción para una lista específica
Clerk.io también permite trabajar con listas de destinatarios que se pueden utilizar para campañas de correo electrónico específicas como ofertas especiales, intereses de marca únicos, etc.
Para configurar el formulario de registro para una lista específica, necesitas el ID de la lista que puedes encontrar en my.clerk.io > Email > Suscriptores > Listas..
Añade list_id que contiene el ID de tu lista, al script que se encuentra más arriba.
Recuerde el ** coma después de “clerk_input.value”:**
