Créer un bouton dans les emails Convertkit

Comment mettre un bouton d'appel à l'action dans les emails avec Converkit, Seva.

Si tu utilises Convertkit, c'est probablement que tu partages mon opinion là-dessus : pas besoin d'avoir des templates d'email hyper fancy pour faire le boulot. D'ailleurs quand on s'écrit des emails entre personnes dans la vraie vie, on ne ponctue pas chacun de nos paragraphes d'images et de liens en tout genre. C'est pour ça que j'aime Convertkit. C'est un autorépondeur simple à prendre en main, efficace et qui fait le travail.

 
ajouter bouton email convertkit

Et au-delà de notre volonté de faire en sorte que nos emails soient lus, ce qui nous importe encore plus est que l'essentiel soit vu !

Les boutons d'appel à l'action tiennent une grande place dans les stratégies web et c'est bien naturel d'avoir envie d'utiliser cette fonctionnalité au sein de nos emails. 

 

Oui mais voila, le «problème» avec l'interface email de Converkit, c'est que ce n'est pas possible de faire ça ! Du moins c'est ce que je pensais jusqu'à ce que je réalise qu'il était possible de personnaliser son template d'email par défaut, en touchant un peu au code HTML. 

Si tu me connais, tu sais déjà que les poils de mes bras se sont hérissés tellement je déteste ça et que je fuis le codage comme la peste (c'est par pour rien que j'ai quitté WordPress pour Squarespace). Bref, comme quand on veut vraiment quelque chose, on fait le nécessaire pour que cela se produise, j'ai bien été obligée de retrousser mes manches et dépasser mon aversion naturelle pour le code.

C'est très rapidement que j'ai trouvé comment faire (à vrai dire le support en ligne de Convertkit a un tutoriel qui explique la marche à suivre), mais comme tout le monde ne parle pas anglais, je me suis dit «Allez sois sympa, fait tourner l'info !» et en prime je vais même te montrer comment faire en vidéo pour que tu saches exactement où cliquer une étape après l'autre.

 

Par défaut, Convertkit offre trois templates d'email : Text only, Classic et Modern. Si le premier a pour particularité de ne proposer aucune fioriture (seulement du texte), les templates Classic et Modern permette de pouvoir rendre les emails plus travaillés avec une police d'écriture différente, la possibilité de mettre des citations et d'introduire le «fameux» bouton d'appel à l'action.

Dans les deux cas, le bouton est gris.

Si cela te convient, tout ce dont tu as besoin est d'ajouter une petite ligne de code dans ton éditeur de texte pour transformer ta phrase en bouton d'action.

 

1. Créer un bouton d'appel à l'action.

 

Pour cela, place ton curseur à l'endroit du texte ou tu souhaites mettre ton bouton.

Passe ton email en affichage HTML

mode html.png

Retrouve le curseur de ta souris (il clignotera exactement là où tu as indiqué que tu voulais mettre ton bouton, donc ne bouge plus !).

trouver curseur mode html convertkit

Copie et colle à cet emplacement le code suivant :  

<a href="convertkit.com" class="button">Mon bouton !</a>

Créer bouton email CK code.png

Remplace l'élément convertkit.com par l'adresse URL où tu souhaites rediriger les personnes qui cliquent (veille bien à laisser ton adresse URL entre les guillemets)

ex <a href="blogtrepreneure.com" class="button">Mon bouton !</a>

Puis remplace la phrase «Mon bouton !» par l'intitulé de ton choix. Ce sera la phrase qui apparaitra sur le bouton.

modifier code html.png

 

Repasse ton éditeur de texte, en mode normal (en cliquant à nouveau sur l'onglet HTML) et tu trouveras ta phrase soulignée comme un lien hypertexte. C'est totalement normal. Il te suffira de faire une prévisualisation du mail pour voir se transformer ton lien en bouton.

Créer bouton email CK3.png
Créer bouton email CK4.png
 

2. Personnaliser le bouton d'appel à l'action

 

Si tu souhaites changer la couleur du bouton (parce que gris, c'est pas terrible !). Il va te falloir pour cela créer ton propre template d'emails.

Pour se faire, rendez-vous dans «Account Settings» et «Emails template».

Cliques sur «Modern template» et copie l'intégralité du code.


Reviens sur la page principale de templates et cliques sur «New email template».

créer template email convertkit.png

Colle le code sur la page vierge et rendez-vous dans la section suivante :

.button {
      border: none;
      background: #777; <------ couleur du bouton
      color: #fff; <------ couleur de la police d'écriture
      padding: 10px;
      display: inline-block;
      margin: 10px 0px;
      font-family: Helvetica, Arial, sans-serif;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
  }
  
  .button:hover {
    color: #fff; 
    background: #666;
  }

 

Il ne te reste plus qu'à remplacer les codes couleurs background et color par les couleurs de ton choix.

Créer bouton email CK5.png

Sauvegarde en cliquant sur Save.
 

Il ne te reste plus qu'à définir ce template comme modèle par défaut pour qu'il soit appliqué à chacun des mails que tu rédiges.

screenshot-app.convertkit.com-2018.08.16-09-30-57.png
 

Pour faire apparaitre le bouton dans le corps de tes emails, il te suffira d'appliquer l'étape 1 en collant la ligne de code annotée.

 

 

VIENS EN PARLER AVEC LA COMMUNAUTÉ :