dcodesdevAujourd'hui nous allons parler de LetterSpace !
Ce n'est pas forcément une application dont tout le monde aura besoin, mais pour ceux qui veulent créer une campagne de newsletter, je pense qu'elle pourrait vous intéresser.
Cette application est relativement jeune sur GitHub, 4 jours, par contre le travail déjà accompli est fabuleux. Lors de mon test je n'ai constaté aucun problème. On sent le sérieux derrière.
J'ai fait la demande au dev afin de franciser l'application car elle n'est qu'en anglais pour le moment. Ce n'est pas forcément très gênant car on peut créer son template, mais en cas de désinscription, c'est en anglais :
Niveau simplicité, c'est vraiment bien foutu, il ne faut pas longtemps pour la prise en main.
Intéressé ? Poursuivez la lecture de l'article !
⚡ Caractéristiques
- Gestion de plusieurs lettres d'information.
- Gestion des abonnés.
- Création de campagnes avec analyse.
- Gestion des modèles.
- API REST pour des intégrations faciles.
- Paramètres SMTP configurables.
- Installation et déploiement faciles avec Docker.
- Éditeur d'emails WYSIWYG (WIP).
💾 Installation
Prérequis
Avant de commencer, assurez-vous d’avoir :
Étapes d'Installation
- Créez votre compose.yml dans le dossier ou vous comptez installer LetterSpace :
sudo nano compose.yml- Et collez ça dedans :
services:
db:
image: postgres:17 # Use your preferred Postgres version
restart: always
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: letterspace
volumes:
- postgres_data:/var/lib/postgresql/data
networks:
- app_network
backend:
image: ghcr.io/dcodesdev/letterspace:latest
pull_policy: always
restart: always
depends_on:
- db
ports:
- "5000:5000" # Expose backend on port 5000
environment:
DATABASE_URL: "postgresql://user:password@db:5432/letterspace?schema=public"
JWT_SECRET: your_super_secret_jwt_key
networks:
- app_network
volumes:
postgres_data:
driver: local
networks:
app_network:
driver: bridge- POSTGRES_USER: user => Remplacez user par un nom d'utilisateur différent pour plus de sécurité.
- POSTGRES_PASSWORD: password => Remplacez password par un mot de passe différent pour plus de sécurité.
- DATABASE_URL: "postgresql://user:password@db:5432/letterspace?schema=public" => Remplacez user et password par ceux choisis aux deux étapes précédentes.
- JWT_SECRET: your_super_secret_jwt_key => Changez your_super_secret_jwt_key par une phrase de passe par exemple.
- On va déployer l'application :
docker compose up -d- Rendez-vous sur l'ip:port, suivant l'IP de votre serveur local et du port choisi, 5000 par défaut :
http://ip:5000/ou votre domaine :
https://letterspace.mondomaine.com👤 Création du compte administrateur et de l'organisation
Lorsque vous lancez votre instance LetterSpace pour la première fois, vous devrez non seulement créer votre compte administrateur mais aussi votre organisation.
Remplissez les champs demandés :
- Full Name => Entre soit un pseudo, votre nom & prénom, ...
- Email => Indiquez une adresse mail.
- Password => Indiquez un mot de passe fort.
Cliquez sur Create account pour poursuivre.
Au tour de l'organisation :
- Organization name => Nommez votre organisation.
- Description => Indiquez éventuellement une description.
Cliquez sur Create Organization pour continuer.
Vous serez invité à vous connecter avec vos identifiants, cliquez sur Login pour terminer :
Vous voilà sur votre tableau de bord :
📫 Configurer le serveur mail
Avoir une application de newsletter sans serveur mail relève de la torture.
Si vous avez votre propre service mail, vous avez les informations nécessaires à entrer ci-dessous.
Mais vous pouvez également utiliser les serveurs mail de Google, Outlook, Infomaniak,.. Jetez un œil ici pour avoir les paramètres nécessaires :
zarev
Au niveau de LetterSpace, rendez-vous sur Settings puis SMTP :
Remplissez les information demandées :
- SMTP Host => Indiquez le serveur SMTP.
- Port => Indiquez le port, 587 dans mon cas.
- Encryption => STARTTLS si possible.
- Require Secure Connection => Si possible, oui.
- Username => Entrez l'adresse mail qui va servir à envoyer les mails.
- Password => Entrez le mot de passe de l'adresse mail.
- From Email => Entrez l'adresse mail.
- From Name => Entrez votre nom, entreprise, ...
Cliquez sur Save.
Il est préférable de tester le bon fonctionnement de l'adresse mail. Cliquez sur :
Vous devrez entrer un mail de destination et cliquer sur Sent Test Email :
Si tout va bien, vous verrez ce petit message apparaître :
On vérifie quand même sur la boîte mail, c'est bel et bien fonctionnel :
🔧 Configuration de General
Rendez-vous dans Settings, General :
Remplissez les informations suivants :
- Default From Email => Indiquez l'adresse par défaut à partir de laquelle les e-mails sont expédiés.
- Default From Name => Indiquez votre nom ou le nom de votre société, par exemple.
- Base URL => Indiquez l'URL de votre instance LetterSpace.
Cliquez sur Save pour terminer.
📧 Créer une campagne
Nous voilà arrivé au moment de créer notre première campagne !
Créer une liste
La liste servira a ajouter les personnes que vous voulez atteindre suivant votre campagne. Vous pouvez bien entendu créer plusieurs listes avec des mails différents suivant vos objectifs.
Cliquez sur Lists et ensuite sur Create a List + :
Remplissez ces deux informations :
- List Name => Nommez votre liste, pour l'exemple Liste 1.
- Description => Ajoutez une description.
Cliquez sur Create List pour terminer.
Ajouter des abonnés
Cliquez sur Subscribers et ensuite sur Add a Subscriber + :
Entrez les informations demandées :
- Email => Indiquez l'adresse mail de l'abonné.
- Name => Indiquez son nom.
- Lists => Cliquez sur la liste dans laquelle vous voulez placer l'abonné.
- Email Verified => Cochez Email Verified. Je n'ai pas vraiment compris cette option, qu'elle soit cochée ou non, cela ne change rien. Si je trouve, j'éditerai.
Cliquez sur Add Subscriber pour terminer. Répétez l'opération si nécessaire avec d'autres adresses.
Créer / éditer un template
Cliquez sur Templates :
Vous constaterez qu'il existe déjà un template de base, à vous de le modifier suivant vos envies :
Vous avez l'icône avec l’œil pour prévisualiser le template et à côté l'icône crayon pour l'éditer.
Nous allons l'éditer:
- Name => Nommez votre newsletter.
- Description => Ajoutez une description.
- HTML Content => Créez le contenu en HTML.
J'ai déjà modifié quelques points qui ne demandent qu'à êtres adaptés suivant vos besoins :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<title>Dev Blog Weekly</title>
<div
style="
display: none;
overflow: hidden;
line-height: 1px;
opacity: 0;
max-height: 0;
max-width: 0;
"
></div>
</head>
<body
style="
background-color: rgb(21, 21, 22);
font-family: ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
padding-top: 40px;
padding-bottom: 40px;
"
>
<!--$-->
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="
background-color: rgb(0, 0, 0);
border-radius: 8px;
margin-left: auto;
margin-right: auto;
padding: 24px;
max-width: 600px;
"
>
<tbody>
<tr style="width: 100%">
<td>
<div style="color: rgb(229, 231, 235); font-size: 16px">
{{content}}
</div>
<hr
style="
border-width: 1px;
border-color: rgb(51, 51, 51);
margin-top: 32px;
margin-bottom: 32px;
width: 100%;
border: none;
border-top: 1px solid #eaeaea;
"
/>
<p
style="
font-size: 14px;
color: rgb(153, 153, 153);
margin: 0px;
line-height: 24px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
"
>
belginux © 2025 Tous droits réservés.
</p>
<p
style="
font-size: 14px;
color: rgb(153, 153, 153);
margin: 0px;
line-height: 24px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
"
>
123 Rue des canards roses, Belgique
</p>
<p
style="
font-size: 14px;
color: rgb(153, 153, 153);
margin-top: 8px;
line-height: 24px;
margin-bottom: 16px;
"
>
<a
href="{{unsubscribe_link}}"
style="color: rgb(77, 33, 252); text-decoration-line: none"
target="_blank"
>Se désinscrire</a
>
<!-- -->•<!-- -->
<a
href="#"
style="color: rgb(77, 33, 252); text-decoration-line: none"
target="_blank"
>Update preferences</a
>
</p>
</td>
</tr>
</tbody>
</table>
<!--7--><!--/$-->
</body>
</html>
Cliquez sur Update Template pour mettre à jour les changements.
Créer la campagne
Cliquez sur Campaigns et ensuite sur Create a Campaign + :
Complétez les informations demandées :
- Campaign Title => Nommez votre campagne.
- Description => Ajoutez une description, éventuellement.
Cliquez sur Create Campaign, cela vous dirige ici :
Settings
Il faudra renseigner quelques petites informations :
- Email Subject => Indiquez le sujet du mail.
- Template => Sélectionnez votre template suivant la situation.
- Open Tracking => Si vous voulez savoir qui ouvre le mail.
- Recipients => Cliquez sur la liste souhaitée.
Cliquez sur Save Changes.
Content Editor
Dans cette partie, il faudra ajouter le texte souhaité, l'éditeur n'est pas encore disponible, ça viendra sous peu :
Cliquez sur Save Changes.
Lancer la campagne
Dans la partie Campaigns, cliquez sur la campagne que vous souhaitez lancer :
Terminez en cliquant sur :
Confirmez :
C'est en route ! 🥂
Après quelques instants, dans ma boîte mail :
🏷️ Placeholder Parser Utility
C'est quoi de truc ?
Les espaces réservés sont des balises spéciales que vous pouvez insérer dans vos messages électroniques. Lorsque vous envoyez un courriel, notre système remplace automatiquement ces balises par des informations réelles spécifiques à chaque destinataire, à votre campagne ou à votre organisation. Cela vous permet de personnaliser vos courriels et de les rendre plus pertinents. Par exemple, vous pouvez utiliser un espace réservé pour inclure automatiquement le nom d'un abonné ou le nom de votre dernière campagne.
Concrètement cela ressemble à ça :
| Placeholder | Description | Example |
|---|---|---|
{{subscriber.email}} | The email address of the subscriber. | john.doe@example.com |
{{subscriber.name}} | The name of the subscriber. | John Doe |
{{campaign.name}} | The name/title of the campaign. | Q3 Newsletter |
{{campaign.subject}} | The subject line of the campaign. | Your Weekly Update! |
{{organization.name}} | The name of the organization sending the campaign. | MyCompany Inc. |
{{unsubscribe_link}} | The unique URL for a subscriber to unsubscribe from communications. | https://example.com/unsubscribe?sid=subscriberId&cid=campaignId |
{{current_date}} | The current date. The format can vary (e.g., “YYYY-MM-DD”). | 2023-10-27 |
{{subscriber.metadata.some_key}} | A custom metadata field for the subscriber. Replace some_key with your actual metadata key. | custom_value |
Voici la liste :
LetterSpace Team
