Déclencheurs personnalisés dans Omnisend vous permettent d'afficher des formulaires pop-up ou flyout uniquement lorsqu'une action spécifique se produit sur votre site web, comme un clic sur un bouton ou un événement personnalisé.
Au lieu de s'appuyer sur des délais d'attente ou la profondeur de défilement, vous contrôlez le moment exact où votre formulaire apparaît, capturant des leads au moment le plus pertinent du parcours du client (e).
Avant de commencer
Les déclencheurs personnalisés remplacent tous les paramètres d'affichage et de ciblage. Le formulaire n'apparaîtra que lorsque votre code personnalisé le déclenchera, indépendamment du délai, du pourcentage de défilement, de l'intention de sortie, du ciblage d'URL ou des filtres d'audience.
Pour ajouter un ciblage conditionnel (par exemple, afficher uniquement sur des pages spécifiques ou pour des utilisateurs connectés), vous aurez besoin de JavaScript personnalisé de votre côté.
Formulaires pris en charge : Formulaires Pop-up et formulaires Flyout sans Onglet d'accroche.
Formulaires non pris en charge : Formulaires de Landing Page et formulaires intégrés.
Qu'est-ce qu'un Déclencheur Personnalisé ?
Un Déclencheur Personnalisé affiche un formulaire lorsqu'une action prédéfinie se produit sur votre site, comme :
Clics sur les boutons (par exemple, “Rejoignez notre liste de diffusion,” “Obtenez une réduction”)
Événements JavaScript personnalisés (par exemple, achèvement de quiz, interaction avec un jeu)
Actions de fermeture du panier (par exemple, afficher un formulaire lorsque un client ferme le panier)
Les déclencheurs personnalisés vous permettent de montrer des formulaires au bon moment, lorsque votre visiteur est le plus engagé. Que ce soit après un quiz, un jeu ou un clic sur un bouton, vous pouvez créer des expériences hautement interactives qui semblent personnelles et opportunes.
Exemple de Code de Déclencheur Personnalisé
window.omnisend = window.omnisend || [];
window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);
L'ID de formulaire unique (658c3b55768232c9e85d0453 dans cet exemple) est automatiquement généré lorsque le formulaire est créé dans Omnisend. Il n'est pas nécessaire de le remplacer manuellement, car chaque formulaire aura son propre identifiant unique.
Processus de configuration
Étape 1. Vérifiez que le snippet JavaScript d'Omnisend est installé
Avant que les déclencheurs personnalisés ne fonctionnent, le snippet JavaScript principal d'Omnisend doit être installé sur votre site web. Le code du déclencheur personnalisé dépend de cet extrait pour charger et afficher les formulaires.
BigCommerce & WooCommerce - Le snippet Omnisend est ajouté automatiquement lorsque vous connectez votre boutique. Aucune configuration manuelle n'est nécessaire.
Shopify: Allez à Shopify Admin → Boutique en ligne → Thèmes → Cliquez Modifier le thème sur votre thème actif → Dans la barre latérale gauche, cliquezIntégrations d'applications → Trouvez Omnisend et activez-le ACTIVER (bleu) → Cliquez Enregistrer.
Plateformes de commerce électronique personnalisées : Ajoutez le snippet JavaScript manuellement à la
section ou avant la fermeturetag. Obtenez le snippet depuisParamètres de la Boutique → Intégrations dans votre compte Omnisend.
Étape 2. Créez votre formulaire
Commencez par concevoir votre pop-up ou formulaire coulissant (flyout) dans Omnisend. Une fois créé, accédez à la section Paramètres de comportement de l'éditeur de formulaire.
Étape 3. Définir l'Affichage sur 'Déclencheur Personnalisé'
Dans Paramètres de Comportement → Affichage, sélectionnez l'option Déclencheur Personnalisé. Cela signifie que le formulaire n'apparaîtra que lorsque le déclencheur personnalisé sera activé sur votre site web.
Remarque : Une fois que vous avez sélectionné Déclencheur personnalisé, toutes les autres options d'affichage (délai, profondeur de défilement, intention de sortie, ciblage d'URL, filtres d'audience) sont désactivées.
Étape 4. Copier le Code du Déclencheur
Dans la section Déclencheur Personnalisé, copiez l'extrait de code généré par Omnisend.
Code d'exemple :
window.omnisend = window.omnisend || []; window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);
Remarque : L'ID de formulaire (658c3b55768232c9e85d0453) est unique à votre formulaire et généré automatiquement.
Étape 5. Insérer le Code du Déclencheur sur Votre Site Web
Placez le code sur votre site web dans l'élément ou l'événement où vous souhaitez que le formulaire apparaisse. Cela pourrait être un clic sur un bouton, un chargement de page ou toute autre action personnalisée.
Où placer le code ?
Code du bouton ou du lien : Ajoutez où vous souhaitez que le déclencheur cliquable apparaisse (en-tête, page produit, article de blog, pied de page).
Fonction JavaScript (
openOmnisendForm()) :Ajoutez une fois par page dans l'un de ces emplacements.Fichier de pied de page du thème ;
widget HTML ou bloc HTML personnalisé;
En ligne après le bouton (dans les balises ).
Cas d'utilisation pour les déclencheurs personnalisés dans Omnisend
Formulaires déclenchés par un bouton
Déclencher un formulaire lorsqu'un utilisateur clique sur un bouton. Utile pour :
Processus d'inscription – le bouton "Rejoindre notre liste de diffusion" affiche un formulaire d'inscription.
Offres de réduction – Le bouton "Obtenir une réduction" affiche un formulaire de promotion avec un code de réduction.
Déblocages de contenu – Offrez des eBooks, des webinaires ou des articles exclusifs derrière un formulaire.
Notifications de De nouveau en stock
Déclenchez un formulaire lorsque les clients cliquent sur un produit en rupture de stock. Cela leur permet de s'inscrire pour des alertes de réapprovisionnement, capturant des prospects et créant de l'anticipation.
Remarque : Vous devez créer le code du bouton vous-même – Omnisend fournit le code de déclencheur, pas le HTML du bouton.
Quiz ou jeux interactifs
Montrez un formulaire après qu'un utilisateur ait complété un quiz ou interagi avec un jeu. Par exemple :
Collecter des adresses Email pour l'inscription au concours après une question de quiz.
Offrez des réductions spéciales après la participation à un jeu.
Exemple : Ajouter un bouton "S'abonner maintenant" dans Shopify
Suivez ces étapes pour ajouter un bouton Abonnez-vous maintenant à votre boutique Shopify qui ouvre un formulaire Omnisend.
⚠️ Si vous n'êtes pas familier avec la personnalisation des thèmes Shopify, travaillez avec un développeur pour mettre en œuvre ces changements en toute sécurité.
Étape 1. Accédez à Shopify Admin.
Connectez-vous à votre panneau d'administration Shopify. Dans le menu de gauche, cliquez sur Boutique en ligne → Thèmes.
Étape 2. Modifiez votre thème.
Dans la section Thèmes, trouvez votre thème actif, puis cliquez sur Actions → Modifier le code.
Étape 3. Trouvez la page ou la section désirée
Décidez où vous souhaitez placer le bouton. Cela pourrait être sur votre page d'accueil, une page produit spécifique ou le pied de page.
Recherchez le fichier Liquid correspondant. Les options courantes incluent :
index.liquid pour la page d'accueil.product.liquid pour les pages produit.footer.liquid pour l'ajouter au pied de page du site.
Étape 4. Insérez le code du bouton
Dans le fichier Liquid que vous avez choisi, trouvez l'endroit exact où vous souhaitez ajouter le bouton. Par exemple, dans le fichier
index.liquidouproduct.liquid.Copiez et collez le code fourni par Omnisend dans votre formulaire popup/flyout.
Cela créera un bouton 'S'abonner maintenant' qui ouvre le formulaire Omnisend lorsqu'il est cliqué.
Remarque : Vous devez créer le code du bouton vous-même – Omnisend fournit le code de déclencheur, pas le HTML du bouton.
Étape 5. Enregistrez vos modifications et testez le bouton
Une fois le code inséré, cliquez sur Enregistrer dans le coin supérieur droit de l'éditeur.
Visitez votre boutique Shopify et allez à la page où vous avez ajouté le bouton.
Cliquez sur le bouton 'S'abonner maintenant' pour vous assurer qu'il ouvre le formulaire Omnisend.
Tests et dépannage
Tester le Déclencheur de Formulaire. Après avoir intégré le code, visitez votre boutique et effectuez l'action de déclenchement (par exemple, cliquez sur le bouton) pour vous assurer que le formulaire s'affiche correctement.
Vérifiez les journaux de la console – Si le formulaire n'apparaît pas, ouvrez la console de votre navigateur (clic droit → Inspecter) et vérifiez les erreurs.
Si vous voyez
omnisend is not defined, vérifiez que le snippet JavaScript d'Omnisend est installé (Étape 1).Si vous voyez
openForm is not a function, vérifiez que l'ID du formulaire est correct et que le formulaire est publié.
FAQ
Pourquoi mon formulaire de déclencheur personnalisé n'apparaît-il pas après avoir ajouté le code ?
Tout d'abord, vérifiez que :
Votre formulaire est activé dans Omnisend (Formulaires → Sélectionnez le formulaire → Activez).
Le snippet JavaScript Omnisend est installé sur votre site (pour Shopify, activez l'intégration de l'application Omnisend sous Thèmes → Intégrations d'applications).
Vous avez collé le code dans un tag ou un gestionnaire
onclick, pas dans le champ URL d'un bouton.Testez dans une fenêtre incognito pour exclure le cache du navigateur ou les bloqueurs de consentement de cookies.
Le formulaire fonctionnait avant, mais maintenant il a cessé d'apparaître. Que s'est-il passé ?
Si votre déclencheur personnalisé fonctionnait et s'est soudainement arrêté, vérifiez :
Bloqueurs de consentement de cookies : Si vous avez récemment ajouté une bannière de consentement de cookies, elle peut bloquer le script Omnisend jusqu'à ce que les visiteurs acceptent les cookies. Testez en mode incognito après avoir accepté tous les cookies.
Statut du formulaire : Vérifiez que le formulaire est toujours Activé dans Omnisend (Formulaires → Votre formulaire → Vérifiez le commutateur en haut)
Mises à jour du thème : Si vous avez mis à jour votre thème Shopify, le code peut avoir été supprimé. Réajoutez-le à vos fichiers de thème.
Erreurs de la console du navigateur : Clic droit → Inspecter et vérifiez l'onglet Console pour les erreurs JavaScript qui pourraient bloquer le formulaire.
Si vous rencontrez des difficultés avec cela ou toute autre fonctionnalité d'Omnisend, n'hésitez pas à nous contacter à [email protected] ou via le chat dans l'application. Nous sommes là 24/7 pour vous !