Comment créer un pop-up avec GetResponse ?

Vous souhaitez créer un POP-UP pour votre site internet / blog ? Si vous utilisez WordPress (ou un autre CMS), vous allez devoir utiliser une extension qui fera le connecteur entre votre site et le logiciel d’email marketing que vous utilisez. Une autre solution existe, je vais partager avec vous comment créer un pop-up avec GetResponse.

Vous vous demandez peut-être, c’est quoi GetResponse ? C’est un outil d’email marketing, j’en ai déjà parlé plusieurs fois. D’ailleurs, j’ai réalisé une vidéo sur la création d’un autorépondeur avec cet outil.

Je vous invite à découvrir cette vidéo si vous voulez en savoir un peu plus sur le sujet. Dans cet article, je vais me focaliser uniquement sur la création d’un pop-up et la liaison de ce dernier avec une liste d’email.  Je ne vais pas recréer une liste puisque j’ai déjà créé mes listes de démonstration dans la vidéo que je vous ai indiquée précédemment. Vous pouvez consulter cette dernière.

Vous découvririez comment créer une liste si vous voulez créer une liste, mais il n’y a rien d’exceptionnel. Dans cet article, l’objectif sera donc complémentaire à cette vidéo. Pourquoi ? Tout simplement pour créer un pop-up avec GetResponse qui va ensuite s’afficher sur le site internet / blog que l’on souhaite. A travers ce pop-up, l’objectif c’est quoi ? C’est de récupérer des emails directement.

Je m’abonne à la chaîne YouTube

Sommaire de l’article :

1. Comment créer un POP-UP avec GetResponse ?
1.1. Personnaliser le pop-up dans GetResponse
1.2. Le bouton est un élément important pour un pop-up
2. Créer un pop-up dans GetResponse et le relier à une liste
2.1. Créer un pop-up avec GetResponse avec de l’A / B testing
2.2. Modifier l’agencement et créer le pop-up
3. Publier le pop-up sur son site internet / blog
3.1. Le pop-up fonctionne-t-il ?
3.2. Test de l’inscription à ma liste

1. Comment créer un POP-UP avec GetResponse ?

Alors, pour créer un pop-up avec GetResponse, il faut accéder à l’onglet « formulaire ». Dans ce dernier, vous trouvez un bouton « créer un formulaire ». Il suffit de cliquer dessus pour accéder à un catalogue de formulaire déjà créé.

Dans celui-ci, on peut par choisir un formulaire (que l’on peut modifier) ou partir de zéro. Dans l’exemple, je vais partir d’un formulaire que j’ai choisi à chaque fois (dans d’autres articles). Comme vous pouvez le voir, il y a différents choix, vous pouvez prendre celui qui vous intéresse.

J’ai envie de dire, peu importe, le choix, de toute façon vous allez pouvoir largement le personnaliser. Dans un premier temps, vous choisissez un formulaire et ensuite on peut commencer à personnaliser ce dernier.

1.1. Personnaliser le pop-up dans GetResponse

Dans le formulaire (qui n’est pas encore un pop-up), on peut enlever les éléments qui ne nous intéressent pas. Par exemple, en fond, j’ai actuellement une image, je peux l’enlever en sélectionnant le formulaire et en allant dans « Style ».

On peut appliquer de nombreux réglages pour améliorer son pop-up sur le plan esthétique. Je vais changer la couleur de fond en noir. Vous voyez à travers le style, on peut à peu près tout changer, vous pouvez rajouter si vous voulez des éléments, du texte, des champs à ajouter. Pour segmenter votre liste par la suite, ça peut être intéressant. Mais il faut noter que moins on a d’éléments plus on aura un taux de conversion qui sera important. Moins on demande de renseignements, plus le taux est bon. Pourquoi ? Car on demande moins d’effort au visiteur.

Continuons à personnaliser le pop-up. On peut également choisir le style de mon champ « email », ici, je vais le mettre en blanc, on va passer en couleur, donc le caractère générique et la valeur renseignée, ça on va le laisser et on va également mettre en noir.

1.2. Le bouton est un élément important pour un pop-up

Je vais changer le bouton. On commence par la couleur du texte, je vais le mettre en blanc. J’enlève l’italique qui est par défaut et on va indiquer « Inscrivez-vous » comme CTA (appel à l’action) pour inciter à s’inscrire.

On peut changer la couleur lorsque le bouton sera survolé. C’est le moment où nos visiteurs vont passer leur souris sur le bouton, pour le faire ressortir. Je modifie donc la couleur, je la passe en grise. Désormais, quand la personne va passer la souris dessus, on va mettre en gris clair et ensuite on peut mettre un petit encadré en blanc pour faire ressortir le bouton.

Pour créer un pop-up dans GetResponse qui soit plus interactif, on peut rajouter du texte dans le pop-up. Par exemple, on va dire « inscrivez-vous pour découvrir des astuces exclusives ». On peut ensuite le positionner, on pourrait le mettre au centre, on peut modifier la forme, on peut mettre en blanc, vous comprenez qu’on peut presque tout personnaliser. On pourrait le mettre dans un format différent, ce n’est pas très beau, c’est vraiment pour vous montrer comment ça fonctionne. On peut augmenter la taille, ça va être un peu gros, je pense que vous avez compris l’idée.

2. Créer un pop-up dans GetResponse et le relier à une liste

Désormais, on peut relier le pop-up avec une liste GetResponse. Pour cela, on se rend dans les paramètres. Pour cela, on va choisir une liste parmi celles existantes. Comme vous le remarquez, il y a ma liste par défaut qui s’affiche. Pour l’exemple, je vais la laisser, mais vous pouvez choisir une autre liste à laquelle votre pop-up va être relié.

Maintenant, lorsqu’une personne va ajouter son email, cet email va être ajouté sur la liste que vous aurez prédéfinie dans « choisir une liste ». Vous allez pouvoir activer l’inscription confirmée (ou non).

L’inscription confirmée c’est une validation par le visiteur de son email. Cela veut dire que lorsque la personne va ajouter son email, vous, vous allez automatiquement envoyer un email.

Vous n’avez rien à faire, c’est automatique, GetResponse envoie un email et la personne doit confirmer ce email pour être vraiment inscrite sur votre liste, si elle ne confirme pas, elle ne sera pas inscrite.

J’en parle justement sur la vidéo concernant la création d’un autorépondeur avec GetResponse, si cela vous intéresse. Pour simplifier cette démonstration, je vais désactiver l’option.

2.1. Créer un pop-up avec GetResponse avec de l’A / B testing

Une fonction qui est vraiment sympa avec GetResponse, c’est la possibilité d’ajouter des variantes, c’est-à-dire que vous allez pouvoir faire de l’A / B testing. Créer un pop-up dans GetResponse avec cette fonction est vraiment un plus. Vous pouvez ainsi vérifier les versions qui fonctionnent le mieux.

Vous vous demandez peut-être l’ A / B testing c’est quoi ? On teste simplement une version et on modifie un élément dans une version B. Par exemple ici, je pourrais dans la version B modifier la couleur du bouton en rouge et voir si cela à un impact.

Vous voyez, variante A, variante B. Et ensuite, il suffit de voir si ça a un impact sur le taux de conversion et c’est le logiciel qui va calculer pour moi. GetResponse fait le calcul et me donne les informations.

Il va me dire celui qui a un meilleur résultat entre les deux, c’est une solution qui est assez intéressante pour améliorer ces taux de conversion. Vous faites des tests et ça peut être un vrai plus.

2.2. Modifier l’agencement et créer le pop-up

Pour le moment, ce qu’on a créé en réalité, c’est un formulaire. Maintenant, il faut créer un pop-up avec GetRepsonse. Mais comment faire ? On va simplement reprendre le formulaire et le basculer en mode pop-up.

Une fois que le style de votre pop-up est prêt et ce dernier relié à la bonne liste, il est temps de le passer mode pop-up. Pour cela, on sélectionne le formulaire. Il faut aller dans « agencement » et il faut choisir la propriété d’affichage.

Je vais mettre en « pop-up », alors c’est « pop-over ». Ensuite, vous devez choisir où vous allez le positionner : à droite, à gauche, par exemple en bas à gauche, en bas à droite… À partir de quel délai ce dernier va s’afficher, 1 seconde, 2 secondes, 10 secondes… Va-t-il apparaître avec un effet ? En le faisant glisser, en le faisant vibrer, en l’agrandissant…

Vous allez pouvoir choisir un grand nombre de paramètres. Vous avez également un fond qui peut être transparent, clair, foncé… Dans l’exemple, je  vais créer un pop-up avec GetResponse et lui attribuer un fond foncé. Je vais le positionner en plein centre et je vais lui mettre un effet. Disons que pour la démo, on va le faire vibrer et on va le faire s’afficher après une seule seconde. Pour résumer, il va s’afficher tout de suite, et on l’affichera toujours.

3. Publier le pop-up sur son site internet / blog

Comme vous avez pu le remarquer depuis le début de cet article,  on a quand même beaucoup d’options intéressantes. C’est un outil qui est sympa et assez facile à utiliser. Désormais, pour finir de créer un pop-up dans GetResponse, je vais sauvegarder et publier.

Je vais sélectionner le code qui a été généré automatiquement pour l’outil d’email marketing. Ce code, il faut que je l’insère sur mon site / blog. Dans mon exemple, j’utilise WordPress, mais vous pouvez utiliser d’autres CMS, c’est très similaire.

Dans WordPress, si vous avez un thème qui permet l’insertion de code, ce que je vous invite à faire c’est de le mettre dans ce qu’on appelle le bas de page, dans le footer. Vous avez dans certains thèmes la possibilité d’insérer directement le code. Vous avez une option pour l’insertion de code, généralement on vous laisse la possibilité de l’insérer dans l’entête ou dans le footer. Première chose à vérifier, c’est si vous avez ces options dans votre thème.

L’idéal, c’est de le mettre dans son thème, mais on peut également le mettre ailleurs. Mon thème ne permet pas l’insertion, donc je vais le mettre dans un widget de la barre latérale. Ce n’est pas top de le positionner à cet endroit, mais cela suffira pour la démo. Je vais ajouter un widget « html personnalisé » et je vais positionner le code dedans.

Je colle mon code dans un widget « html personnalisé », c’est simplement pour montrer que cela fonctionne. Mais je vous invite vraiment à le mettre dans votre thème, si vous avez  un thème qui permet d’ajouter ce code. Vous l’ajouter directement dans les champs qui sont prévus à cet effet.

3.1. Le pop-up fonctionne-t-il ?

Maintenant, je vais aller sur ma boutique pour vérifier que le pop-up GetResponse fonctionne. Lorsque je me connecte sur le site, il le charge en mode formulaire, donc j’ai dû me tromper lors de la création du pop-up.

On va vérifier en retournant dans GetResponse, on constate que je me suis trompé dans « l’agencement ». Comme on peut le voir, il me l’a laissé en mode encastré, donc j’ai dû oublier de valider précédemment. C’est bien pour l’exemple.

Je vais le basculer dans le mode souhaitez, donc en pop-up. Je remets les paramètres voulus. Je vais mettre le fond en foncé, le pop-up en position centrée, 1 seconde de délai et je vais mettre l’apparition vibrée.  Je vais cette fois-ci sauvegarder et enregistrer, j’avais du mal validé.

Je n’ai pas besoin de reprendre le code, normalement, il doit toujours être bon et je vais aller sur l’article. En l’actualisant, vous voyez cette fois-ci, là c’est bon, il se met bien en pop-up, il a bougé légèrement, avec un fond qui est donc un petit peu foncé. Je dois laisser mon email ou alors bien sûr la personne peut cacher la fenêtre si elle ne souhaite pas s’inscrire.

3.2. Test de l’inscription à ma liste

Je vais m’inscrire avec un email. Maintenant, je vais aller vérifier que cela s’est bien ajouté directement dans ma liste GetResponse. Et si je regarde, j’ai bien un nouvel inscrit dans ma liste. Il se trouve ici, donc mon pop-up a fonctionné. Désormais, vous savez comment créer un pop-up avec GetResponse et vous avez pu voir que c’était relativement simple et c’est vraiment un outil qui est très efficace.