Comment ajouter un formulaire intégré Klaviyo à votre site BigCommerce
Objectif de cet article
Découvrez comment ajouter un formulaire intégré 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 ex., le pied de page).
Ce guide explique comment remplacer le formulaire d’inscription par défaut de BigCommerce par un formulaire intégré Klaviyo.
Avant de commencer
Avant de créer un formulaire intégré dans Klaviyo, vous devez d’abord intégrer BigCommerce, puis activer la fonctionnalité de formulaire d’inscription (également appelée « onsite tracking »). Si vous avez coché le paramètre Ajouter automatiquement le code JavaScript sur site de Klaviyo lorsque vous avez intégré BigCommerce, tout est prêt.
Sinon :
- Dans Klaviyo, sélectionnez l’onglet Intégrations.
- Cliquez sur BigCommerce.
- Cochez le paramètre Ajouter automatiquement le javascript sur site Klaviyo.
- 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 différer, tout comme les noms de certains fichiers ou l’emplacement des extraits de code.
Ajouter le code intégré du formulaire à votre site
Tout d’abord, créez et publiez un formulaire intégré dans Klaviyo. Cette section vous présentera les étapes suivantes pour coller le code d’intégration de votre formulaire sur votre site BigCommerce afin qu’il s’affiche et synchronise correctement les données.
- Si ce n’est pas déjà fait, copiez le code d’intégration de votre formulaire intégré. Vous pouvez accéder au code d’intégration du formulaire en ouvrant le formulaire dans l’éditeur et en cliquant dans la section Ciblage et comportement.
- Accédez à votre site web et localisez le formulaire d’inscription BigCommerce par défaut. 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 BigCommerce.
- Accédez à Marketing > Marketing par e-mail
- Cochez la case intitulée Autoriser les abonnements à la newsletter. Cela vous permet de recueillir le consentement à l’e-mail des visiteurs sur votre site Web et ajoute également une zone d’inscription à l’e-mail 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 inclue pas.
- Ouvrez votre tableau de bord BigCommerce, puis accédez à Storefront > Themes.
- 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. À la place :
- Cliquez sur Faire une copie, nommez-la, puis sélectionnez Enregistrer une copie.
- Une fois qu’il est ajouté à la section Thèmes, sélectionnez les 3 points, puis choisissez Modifier les fichiers de thème. Notez que toutes les modifications que vous effectuez ne s’appliqueront qu’au thème que vous modifiez, et vous devrez appliquer le thème à votre site web pour voir les changements se refléter.
- Dans la barre latérale gauche, ouvrez le fichier correspondant à l’emplacement 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, accédez à modèles > composants > common, puis cliquez sur le fichier footer.html.
- Utilisez le raccourci de recherche (Command+F sur Mac ou Control+F sur Windows) pour rechercher le mot « newsletter » dans le fichier de pied de page.
- Dans le code situé en dessous, trouvez la référence au formulaire. Dans l’exemple, le formulaire est référencé dans un chemin d’accès de fichier différent : {{> components/common/subscription-form}}.
- Dans la barre latérale gauche, suivez le chemin d’accès au fichier référencé dans le code (dans cet exemple, sélectionnez components > common > subscription-form). À partir de là, vous verrez les composants réels du formulaire par défaut.
- Comme l’en-tête et la langue du formulaire par défaut correspondent aux styles du reste de notre site, nous allons uniquement remplacer le champ de saisie du formulaire. Dans le code source, vous pouvez voir que le champ de saisie du formulaire par défaut est contenu dans l’élément <form>.
- Surlignez tout ce qui se trouve entre les balises <form> d’ouverture et de fermeture, puis collez le code d’intégration que vous avez copié depuis Klaviyo pour remplacer le texte surligné.
- Cliquez sur Enregistrer et appliquer le fichier pour appliquer ces modifications à votre site web.
- Si le bouton indique uniquement Enregistrer le fichier, 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 Modifier les fichiers de thème > Enregistrer > Utiliser comme thème actif en haut à droite pour appliquer le thème à votre site web.
Une fois que vous avez collé le code d’intégration, enregistré et appliqué les modifications dans BigCommerce, revenez sur votre site web et actualisez la page. Votre formulaire d’intégration Klaviyo s’affichera sur votre site et commencera à ajouter de nouveaux abonnés à la liste Klaviyo associée au formulaire.
Si vous ne voyez pas votre formulaire, consultez la résolution des problèmes liés aux formulaires intégrés.
Prochaines étapes
Ensuite, créez un flux de série de bienvenue pour avoir un impact immédiat sur vos nouveaux abonnés.