Tamarin est une bibliothèque JS qui lie un formulaire TailwindCSS customisable à une liste Mailhimp de votre compte. Il est possible de personnaliser les couleurs, les fontes et le contenu de ce formulaire. Pour que tout fonctionne, il faut activer l'API Mailchimp via votre dashbord client et lier votre Audience (list) Maiclhimp à mon code.
Via votre compte Mailchimp, allez dans : Profile -> Extra -> Api Keys.
Cliquez ensuite sur le boutton Create a Key et suivez les étapes. (en lui donnant un nom de votre choix)
Copiez-coller dans un endroit sûr votre clé API.
Modifiez le fichier "env.php" en y insérant votre login, votre clé et votre server (us...). Le server doit être le même que la fin de votre clé API. Dans l'exemple, il s'agit de "us10".
Importez le tout sur un serveur qui sait lire le PHP.
Insérez la bibliothèque Javascript et ses paramètres dans votre page comme ci-dessous. Insérez également la balise "div" d'ont l'ID est "tamarin", où vous le souhaitez dans votre projet.
<body>
...
<div id="tamarin"></div>
...
<script src="tamarin.js"></script>
<script>
const tamarinConfig = {
key: 'ac0fd31a68',
content : {
title: "Inscrivez-vous à notre Newsletter",
description : "Pour rester au courant de nos promos, des annonces et des remises exclusives, n'hésitez pas à vous inscrire avec votre e-mail.",
termsText: "En vous inscrivant, vous acceptez nos conditions d'utilisations. Voir <a class='underline' href='https://google.com' target='_blank'>ici</a>",
textButton: "Envoyer",
placeholderEmail: "Votre email",
thanksMessage: "Merci !",
errorMessage: "Email incorrect ou déjà dans notre base de donnée",
},
style : {
titleFont: 'DM Serif Text', // Birthstone
textFont: 'Lato', // Open Sans
mainColor: "#272727", // pink
textColor: "white" // brown
}
}
tamarin(tamarinConfig)
</script>
</body>
</html>
| Clé | exemple | Paramètre |
|---|---|---|
| key | ac0fd31a68 | (string) il s'agit de votre list Mailchimp. Pour y accéder, rendez-vous dans votre audience et cliquez sur "settings". L'id de la liste se trouve sous la rubrique "Audience ID" |
| content | Propriété possible : title, description, termsText, textButton, placeholderEmail, thanksMessage, errorMessage | (objet) : ici, renseignez tout le contenu textuel de votre formulaire |
| style.theme | "theme_1" ou "theme_2" | Nom du theme |
| style.titleFont | 'DM Serif Text', | Nom de la google font choisie |
| style.textFont | 'Lato', | Nom de la google font choisie |
| style.mainColor | "#272727" | Nom de la couleur choisie (valeurs CSS) |
| style.textColor | "white" | Nom de la couleur choisie (valeurs CSS) |
Taiwind : https://tailwindcss.com/ (la bibliothèque JS insérera cette dépendance)
Je travaille actuellement sur d'autres styles possible.