Comment ajouter un formulaire Klaviyo à votre site BigCommerce

Vous apprendrez

Apprenez à ajouter un formulaire Klaviyo à votre site BigCommerce, ce qui nécessite de créer le formulaire dans Klaviyo, puis de coller son code d'intégration dans les fichiers de votre site à l'endroit où vous souhaitez qu'il apparaisse (par exemple, dans le pied de page).

Ce guide montre comment remplacer le formulaire d'inscription par défaut BigCommerce par un formulaire intégré Klaviyo.

Avant de commencer

Avant de créer un formulaire d'inscription dans Klaviyo, vous devez d'abord vous intégrer à BigCommerce, puis activer la fonctionnalité de formulaire d'inscription (également appelée "onsite tracking"). Si vous avez coché la case Ajouter automatiquement Klaviyo onsite JavaScript lors de l'intégration avec BigCommerce, vous êtes prêt. 

Si ce n'est pas le cas :

1. Dans Klaviyo, sélectionnez le nom de votre organisation dans le coin inférieur gauche, puis sélectionnez Integrations. 
2. Cliquez sur BigCommerce.
3. Cochez l'option Ajouter automatiquement le javascript de Klaviyo onsite.
4. Cliquez sur Enregistrer.

L'exemple de cet article utilise le thème Cornerstone par défaut de BigCommerce. Gardez à l'esprit que votre thème peut être différent, de même que les noms de certains fichiers ou l'emplacement des extraits de code.

Ajouter le code d'intégration du formulaire à votre site

Tout d'abord, créez et publiez un formulaire intégré dans Klaviyo. Cette section présente les étapes suivantes pour coller le code d'intégration de votre formulaire sur votre site BigCommerce afin qu'il s'affiche et synchronise les données correctement.

1. Si vous ne l'avez pas encore fait, copiez le code d'intégration de votre formulaire d'intégration. Vous pouvez accéder au code d'intégration du formulaire en ouvrant le formulaire dans l'éditeur et en cliquant sur la section Ciblage du comportement & .
   
2. Naviguez vers votre site web et localisez le formulaire d'inscription par défaut BigCommerce. Si vous utilisez un thème Cornerstone, il se trouve dans le pied de page du site.
   
   • Si vous ne voyez pas de formulaire par défaut sur votre site web :
     • Ouvrez votre tableau de bord WooCommerce.
     • Naviguez vers Marketing > Email Marketing
     • Cochez la case Autoriser les abonnements à newsletter . Cette option vous permet de recueillir le consentement des visiteurs à l'envoi d'un courrier électronique sur votre site web et d'ajouter une case "S'inscrire" par défaut sur votre site BigCommerce. Si cette case est déjà cochée et que vous ne voyez toujours pas de formulaire par défaut, il se peut que votre thème n'en comprenne pas.
3. Ouvrez votre tableau de bord BigCommerce, puis naviguez vers Storefront > Themes.
4. Dans la section Thème actuel, cliquez sur le menu déroulant Avancé, puis choisissez Modifier les fichiers du thème.
   
   • Si vous utilisez un thème par défaut, vous ne pourrez pas sélectionner cette option. Au lieu de cela :
     
     • Cliquez sur Faire une copie, donnez-lui un nom, puis sélectionnez Enregistrer une copie. 
     • Une fois qu'il a été ajouté à la section Thèmes, sélectionnez les 3 points, puis choisissez Modifier les fichiers de thème. Notez que les modifications que vous apportez ne s'appliquent qu'au thème que vous modifiez et que vous devez appliquer le thème à votre site web pour que les changements soient pris en compte.
5. Dans la barre latérale gauche, ouvrez le fichier correspondant à l'endroit où le formulaire par défaut est apparu sur votre site. Si le formulaire par défaut se trouvait dans le pied de page, comme dans l'exemple, naviguez vers le modèle > composants > common, et cliquez sur le fichier footer.html.
6. Utilisez le raccourci de recherche (Commande+F sur Mac ou Contrôle+F sur Windows) pour rechercher le mot "newsletter" dans le fichier de pied de page.
   
7. Dans le code qui se trouve en dessous, trouvez la référence au formulaire. Dans l'exemple, le formulaire est référencé dans un chemin d'accès différent : {{> components/common/subscription-form}}.
   
8. Dans la barre latérale gauche, suivez le chemin du fichier référencé dans le code (dans cet exemple, sélectionnez les composants > common > subscription-form). C'est à partir d'ici que vous verrez les composants du formulaire par défaut.
   • Comme l'en-tête et la langue du formulaire par défaut correspondent au reste des styles de notre site, nous ne remplacerons que l'entrée du formulaire. Dans le code source, vous pouvez voir que l'entrée du formulaire par défaut est contenue dans l'élément <form>.
9. Mettez en surbrillance tout ce qui se trouve entre la balise <form> d'ouverture et de fermeture, puis collez le code d'intégration que vous avez copié à partir de Klaviyo pour remplacer le texte mis en surbrillance. 
   
10. Cliquez sur Enregistrer et appliquer le fichier pour appliquer ces modifications à votre site web.
    • Si le bouton indique seulement Enregistrer le fichier, c'est que le fichier que vous venez de modifier n'est pas encore votre Thème actuel. Vous devrez cliquer sur Enregistrer le fichier, puis faire défiler vers le haut et sélectionner Edit Theme Files > Save > Use as Active Theme dans le coin supérieur droit pour appliquer le thème à votre site web. 

Une fois que vous avez collé le code d'intégration, enregistré et appliqué les modifications sur BigCommerce, retournez sur votre site web et actualisez la page. Votre formulaire Klaviyo s'affichera sur votre site et commencera à ajouter de nouveaux abonnés à la liste Klaviyo liée au formulaire. 

Si votre formulaire ne s'affiche pas, consultez la rubrique Dépannage des formulaires intégrés.

Prochaines étapes

Ensuite, créez une série de bienvenue flux pour avoir un impact immédiat sur votre nouvel abonné.

Ressources complémentaires

• Comment créer une série d'emails de bienvenue
• Comment désactiver les emails de notification envoyés par BigCommerce ?