L'intermédiaire

Je commence l’année avec un petit projet que j’avais en tête depuis longtemps. Une librairire JS liée à Mailchimp, et qui implémente un Call To Action qui enregistre vos visiteurs sur Mailchimp. Je vous explique.

La librairie s’implémente comme ceci, en copiant le Javascript ici :

 const tamarinConfig = {
            key: 'dc1bb31a64',
            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 : {
                
                theme: "theme_1",
                titleFont: 'DM Serif Text',
                textFont: 'Lato',
                mainColor: "#272727",
                textColor: "white",
                Example 2 :
                /*
                theme: "theme_2",
                titleFont: 'Birthstone',
                textFont: 'Open Sans',
                mainColor: "pink",
                textColor: "brown"
*/
            }
        }
        tamarin(tamarinConfig)

Comment ça marche ?

Comme les autres librairies ! Vous changez les paramètres pour obtenir le design et le contenu que vous souhaitez afficher. Une fois en place avec les balises <div id= »tamarin »></div>, le formulaire s’affichera.

Style

C’est un peu son seul hic ; j’ai opté pour charger tout Tailwind JS pour designer ensuite le formulaire.
Mais si vous voulez designer vous-même le formulaire, vous pouvez désactiver Tailwind via le fichier JS « tamarin.js » ou ajouter des classes qui engloberaient votre projet pour le styliser à votre sauce.

Idem pour les fontes Google que je vous propose. Il y a en fait 2 styles/thèmes différents pour le moment (theme_1 & theme_2). j’en ai d’autres en cours… Si vous regardez bien, (et c’est à mon sens le plus cool dans ce projet) c’est que vous pouvez charger automatiquement les fontes Google en spécifiant le nom de la fonte à la place des valeurs attribuées (Lato pour le projet « 1 » dans l’exemple). Vous pouvez aussi changer la couleur du titre et du texte.

Le contenu

En fait, le texte et le titre sont le seul contenu éditable, puisque le reste est un formulaire dynamique. Je n’ai pas fait plus. En revanche, vous avez la possibilité de changer le texte de ces éléments ainsi que le texte du bouton par exemple. Le message de validation et le placeholder du champ input est également éditable dans les paramètres de la librairie.

DEV

Via votre compte Mailchimp, allez dans : Profile -> Extra -> Api Keys. Cliquez ensuite sur le bouton « Create a Key » et suivez les étapes. (en lui donnant un nom de votre choix). Copiez-collez dans un endroit sûr votre clé API. Ensuite, Modifiez le fichier « env-production.php » en y insérant votre login, votre clé et votre serveur (us). Le serveur 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.

Améliorations / lacunes

Je ne me suis pas occupé de la sécurité. Mais ça, c’est à vous de vous en occuper. (Publié cela ici est potentiellement une faille de sécurité 😉 ). Pour l’instant, les données que vous devez renseigner pour lier l’outil à Mailchimp, est dans un simple fichier PHP (env.php). À terme, il serait plus rigoureux de transformer ce fichier en un fichier .env et plus sécurisé. En attendant, vous avez déjà de quoi tester l’outil et gagner des inscrits à votre liste Mailchimp !

Pourquoi Tamarin ?

Parce qu’il termine par « in » voyons !

Tout le détail du projet également sur Github : https://github.com/ProjetsMerlin/Tamarin

A très vite ! (et bonne année 2026)