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

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

Apprenez à déclencher l'affichage d'un formulaire contextuel ou volant lorsqu'un visiteur de votre site clique sur un bouton. Pour ce faire, vous devez personnaliser un court extrait de code et le coller dans le code HTML de votre site.

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. 

image.png

Create a Button

Copy the code below and paste it into the HTML of any page where you’d like the button to appear.

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

This button will use the default styles from your site’s template. Your developer or a Klaviyo Partner can customize the button’s appearance further.

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.

image.png

  1. 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 :

image.png

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.

Cet article était-il utile ?