Comment déclencher sur Klavyio une fenêtre pop-up ou un formulaire volant lorsqu'on clique sur un bouton ?

Avant de commencer

Avant de commencer, créez votre formulaire d'inscription. Votre type de formulaire doit être défini sur Popup ou Flyout. Les formulaires intégrés ne peuvent pas être déclenchés lorsqu'un bouton est cliqué.

Dans la section Targeting & Behaviors de votre formulaire, sélectionnez Only show on custom trigger sous Display Timing. 

Créer un Bouton

Copiez le code ci-dessous et collez-le dans le code HTML de la page à laquelle vous souhaitez que le bouton apparaisse.

<button class="klaviyo_form_trigger">Click here</button>

Ce bouton utilisera les styles par défaut du modèle de votre site. Votre développeur ou un partenaire Klaviyo peut personnaliser davantage l'apparence du bouton.

Notez que si vous ajoutez plusieurs formulaires déclenchés par des boutons distincts sur votre site, vous devrez utiliser un nom de classe unique pour chaque bouton (par exemple, klaviyo_form_trigger1, klaviyo_form_trigger2).

Ajouter un Snippet JavaScript personnalisé à votre site

1. Ouvrez votre formulaire d'inscription dans l'éditeur Klaviyo et visualisez l'URL de la page. Copiez le code de six caractères à la fin de l'URL ; il s'agit de l'ID de votre formulaire.

2. Dans l'extrait de code ci-dessous, remplacez FORM_ID par l'ID de votre formulaire.

3.Collez l'extrait de code mis à jour directement sous le code du bouton que vous avez ajouté à votre site à la dernière étape.

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		var _klOnsite = window._klOnsite || []; 
		_klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

Voici un exemple du code complet (le code du bouton plus le code de déclenchement du formulaire) dans un éditeur de page Shopify :

Si vous avez modifié la classe du bouton à la dernière étape (c'est-à-dire que vous avez remplacé klaviyo_form_trigger par un autre texte), veillez à mettre à jour ce code avec le texte que vous avez utilisé.

Testez votre bouton

Une fois que vous avez enregistré toutes les modifications apportées au code de votre site, visitez votre site et cliquez sur votre nouveau bouton. Le formulaire d'inscription s'affiche alors.