Comment intégrer un formulaire à votre page de confirmation de commande

Vous apprendrez

Apprenez à intégrer un formulaire d'inscription sur votre page de confirmation BigCommerce afin de collecter des informations supplémentaires auprès du client après qu'il ait terminé le processus de page de commande. Ces clients récents sont déjà intéressés par votre marque, la confirmation représente donc une excellente occasion de développer l'engagement avec eux.

Avant de commencer

Assurez-vous que vous avez intégré BigCommerce et que vous avez coché l'option Ajouter automatiquement le JavaScript de Klaviyo sur le site.

Construisez votre formulaire

Vous pouvez créer un formulaire d'inscription et l'intégrer à votre page de confirmation pour poser des questions pertinentes à vos clients après leur passage en caisse. Par exemple, vous pouvez poser des questions pour en savoir plus sur la fréquence d'utilisation de vos produits par un client ou sur les nouveaux produits qu'il pourrait être intéressé par l'achat.

Pour créer votre formulaire d'inscription :

1. Dans Klaviyo, naviguez vers Sign-up forms > Create Sign-up form > Build from scratch.
2. Dans le menu qui s'affiche, donnez un nom à votre formulaire et sélectionnez une liste à laquelle les nouveaux abonnés doivent se soumettre. 
3. Sélectionnez Embed comme type de formulaire.
   
4. Cliquez sur Enregistrer et poursuivez la conception. 
5. Vous accédez alors à l'éditeur de formulaire où vous pouvez modifier les styles suivants :
   • Styles: Modifiez l'apparence de votre formulaire pour qu'il corresponde à votre marque, par exemple les styles de formulaire ou de champ de saisie et le type de police. Vous pouvez également modifier n'importe quel texte en cliquant dessus et en remplaçant la langue par défaut par la vôtre. 
   • Ajouter des blocs: Ici, vous pouvez ajouter du contenu à votre formulaire afin de collecter des informations, comme une zone de texte pour une question ou un champ de date pour un anniversaire. Veillez à définir une propriété de profil pour chaque champ que vous ajoutez et à ne pas submerger les clients avec trop de questions.
   • Ciblage et comportement: Choisissez si vous souhaitez que le formulaire apparaisse sur un ordinateur de bureau, un téléphone portable ou les deux. Gardez votre formulaire réglé sur Afficher à tous les visiteurs ou Ne pas afficher aux profils Klaviyo existants . 
6. Dans la barre de menu, sélectionnez Succès pour modifier la page qui s'affiche après l'envoi du formulaire.
7. Lorsque vous êtes satisfait de la conception de votre formulaire, cliquez sur Publier.
8. Dans la fenêtre modale qui s'affiche, copiez votre code d'intégration afin de pouvoir le coller. 
   
9. Cliquez sur Publier.

Votre formulaire n'apparaîtra pas sur votre site tant que vous n'aurez pas collé le code d'intégration dans le code de votre site.

Vérifiez les paramètres d'acceptation de cette liste afin que l'expérience du client soit transparente. Si la liste est doublement opt-in, vous devrez éditer les pages de confirmation. Toutes les listes Klaviyo sont configurées par défaut en double opt-in.

Ajoutez l'intégration à votre site BigCommerce

1. Accédez à l'interface d'administration de BigCommerce.
2. Allez sur Storefront > Script Manager et cliquez sur Create a Script .
3. Nommez le script et configurez-le comme suit :
   • Emplacement : Tête
   • Description (facultatif) : Décrivez l'objectif du script
   • Pages où le script sera ajouté : Confirmation de commande
   • Type de script : Script
     
4. Supprimez le contenu du script et collez le code suivant pour ajouter klaviyo.js à votre page de confirmation. Notez que vous devez faire cela même si vous avez déjà installé klaviyo.js sur votre site web :
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async="" ></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        }) ;</script>

5. Dans l'extrait ci-dessus, remplacez PUBLIC_API_KEY par la clé publique de votre siteAPI.
6. Dans l'extrait ci-dessus, remplacez FORM_ID par l'ID de votre formulaire. Pour trouver l'ID de votre formulaire, naviguez vers le formulaire intégré dans votre compte Klaviyo. L'ID du formulaire est le code de 6 lettres à la fin de l'URL.
   
7. Lorsque vous avez rempli tous les détails du script, cliquez sur Enregistrer.

Votre formulaire intégré s'affichera désormais au bas de la page lorsque quelqu'un aura passé une commande. En fonction de votre thème, vous pouvez modifier la bordure, le remplissage ou la taille de votre formulaire dans la sectionStyles pour vous assurer qu'il correspond à l'aspect et à la convivialité de votre page de confirmation de commande ; publiez toutes les modifications que vous apportez pour qu'elles soient prises en compte.

Prochaines étapes

Une fois que vous avez commencé à collecter des réponses avec votre formulaire intégré, chaque soumission sera stockée dans le profil du client en tant que propriété personnalisée, disponible pour être utilisée dans les segments, les flux et les modèles d'e-mail.

Sur la base des réponses, vous pouvez orienter l'expérience post-achat. Il se peut que vous souhaitiez adapter votre série de bienvenue en fonction de ces données ou créer des segments pertinents auxquels envoyer des campagnes. Par exemple, imaginons que nous décidions de lancer un nouveau mascara. Étant donné que nous recueillons des données sur l'intérêt pour le produit dans ce formulaire intégré, nous pouvons informer toutes les personnes qui nous ont fait part de leur intérêt pour le mascara dans le communiqué de presse sur le produit.

Ressources complémentaires

• Les formulaires d'inscription
• Comment intégrer un formulaire d'inscription sur votre site web ?