Créer un PopUp avec JetPopup de Crocoblock et Elementor

Salut les gars,

Dans cette vidéo, nous verrons comment nous pouvons créer un Popup avec le plugin Premium JetPopup d'Elementor et Crocoblock pour votre site web.

Dans cet autre article j'explique Comment créer un Popup avec Elementor Pro.

Jetpopup est un plugin de paiement que vous pouvez acheter pour 22 $ séparément:

ou si vous accédez à l'adhésion Crocoblock, vous avez tout pour 130 $.

J'aime la philosophie de Crocoblock car au lieu de faire un plugin énorme et lourd, il divise les fonctionnalités en petits plugins et chacun d'eux fait un plugin séparé. Cela me semble très correct.

Une fois le plugin installé, un nouvel élément apparaîtra dans le menu WordPress appelé JetPopup.

Dans mon cas, les plugins JetPopup, JetEngine et JetElementos For Elementor sont installés.

Si nous voulons JetPopup -> Bibliothèque prédéfinie on retrouve une énorme bibliothèque de Popups prédéfinis :

Comme nous le voyons dans l'image précédente, nous pouvons trouver le popup qui correspond le mieux à nos besoins grâce aux filtres dont il dispose.

De plus, dans chaque popup, il nous indique de quels plugins il aurait besoin pour son fonctionnement. Dans celui de l'image, ce serait le plugin Jet Elements.

Installer un modèle de popup

Il n'y a pas de mystère, on clique sur installer dans le template qui nous plait.

Une fois installé, il nous amène à une page Elementor avec le modèle ajouté

Maintenant, nous pouvons ajouter, modifier et supprimer des éléments comme nous le ferions sur n'importe quelle page avec Elementor.

Paramètres contextuels

Les propres options du Popup, telles que les effets d'entrée ou de sortie et à quelle heure afficher le popup, nous les avons dans les paramètres, situés en bas à gauche :

Et quand on clique on trouve toutes ces options :

Animation: C'est l'effet qu'aura la popup en entrant

Ouvrir l'événement: Quand on veut que le Popup apparaisse

On peut faire apparaître le Popup après x secondes de chargement de la page, après un temps d'inactivité, lors du défilement de la page d'un %, lors de la sortie de la page, d'une certaine date, d'une certaine heure et lors d'un clic sur un élément du web.

Conditions d'affichage C'est ici que nous indiquons où sur le Web nous voulons qu'il apparaisse :

Nous pouvons vous dire sur quelles pages nous voulons l'inclure ou de quelles pages nous voulons l'exclure.

Une fois notre popup publiée, elle apparaîtra sur notre site 😉

Faire sauter la Popup en cliquant sur un lien

Une option que j'aime particulièrement est de faire apparaître une fenêtre contextuelle lorsqu'un lien ou un bouton est cliqué.

J'aime particulièrement le fait que nous puissions faire en sorte qu'un Popup saute un lien dans une page qui n'a pas besoin d'être créé avec Popup. J'aime beaucoup ça.

Ajouter un identifiant au bouton

La première chose que nous devons faire est d'ajouter un ID ou une classe au bouton que nous voulons être le déclencheur de popup :

Maintenant que nous avons l'identifiant du bouton, nous revenons au Popup que nous sommes en train de créer.

Si vous vous souvenez, ci-dessus, nous avons vu que parmi les événements que nous pouvons choisir pour déclencher le popup est Cliquez sur le sélecteur personnalisé

Si tout s'est bien passé, la fenêtre contextuelle sautera maintenant lorsque quelqu'un cliquera sur le bouton que nous avons configuré.

Envoyez des prospects à notre outil de marketing par e-mail avec Webhooks

JetPopup a une intégration directe avec Mailchimp. L'intégration se fait rapidement et facilement via la clé API.

Dans le menu Crocoblock -> Paramètres JetPlugins -> Intégrations, nous pouvons le connecter :

Mais comment le ferions-nous avec un autre outil qui n'était pas Mailchimp ?

Nous remercions Crochets Web .

J'adore les Webhooks car ils nous permettent de connecter des outils même s'il n'y a pas d'intégration directe avec eux.

Dans mon exemple, je vais l'intégrer avec Recharger, mais cela se ferait à peu près de la même manière avec n'importe quel outil qui accepte les webhooks.

Moteur d'avion nous permet de créer des formulaires et nous permet également d'ajouter webhooks donc c'est juste ce qu'il nous faut 😉

Une fois JetEngine installé, nous pouvons trouver des formulaires :

Nous créons un formulaire avec les champs dont nous avons besoin, dans mon cas

Dans le cadre de Paramètres des champs nous ajoutons les champs dont nous avons besoin dans notre formulaire.

La partie importante, là où la magie opère, est dans Paramètres des actions/notifications post-envoi, c'est-à-dire ce qui se passe une fois le formulaire rempli.

Nous devons cliquer sur Ajouter une notification et ajouter une notification du type Appel au Webhook

D'où obtenons-nous l'URL Webhook ?

Nous devons obtenir ces informations de l'outil que nous voulons connecter, dans notre cas nous voulons envoyer les prospects à Encharge.

Au sein d'Encharge, lorsque nous créons un Flow et ajouter un formulaire. On retrouve l'URL du Webhook qu'il faut ajouter dans JetEngine :

Une fois le formulaire configuré, nous n'avons plus qu'à l'ajouter à notre popup JetPopup :

Nous avons enregistré notre popup et maintenant chaque fois que quelqu'un ajoute ses données, il ira directement à Encharge grâce aux Webhooks.

Ne me dites pas que ce n'est pas merveilleux ? 😉

A bientôt dans le prochain tuto