Contenu
- Démarrage rapide
- Ajouter Affirm.js
- Créer des composants de messagerie promotionnelle
-
Ajouter un code pour gérer les changements de prix
- Directives de marketing
Faites connaître les options de paiement flexibles d'Affirm à chaque étape du parcours d'achat— ce qui augmente la conversion et la valeur moyenne des commandes pour votre entreprise.
Démarrage Rapide
La messagerie de paiement mensuelle et les fenêtres modales montrent aux clients comment ils peuvent utiliser Affirm pour financer leurs achats. Notre messagerie promotionnelle vous permet de:
- Afficher dynamiquement les informations de tarification des paiements mensuels
- Offrir une pré-admissibilité ou une fenêtre modale en savoir plus
Ce guide examinera la messagerie promotionnelle d'Affirm et expliquera comment l'ajouter à votre site. Une fois que vous déterminez l'endroit où vous souhaitez que la messagerie de paiement au fil du temps Affirm apparaisse sur votre site Web, il y a trois étapes à suivre pour la rendre et s'assurer qu'elle fonctionne correctement.
Affirm propose également un guide d'intégration globale destiné aux commerçants qui souhaitent opérer internationalement. Le guide comprend une procédure étape pas étape pour activer cette configuration.
L'intégration globale prend actuellement en charge les États-Unis et le Canada, avec des pays supplémentaires à venir.
Ajouter Affirm.js
Ajoutez le code d'intégration "Affirm.js" à l'en-tête de votre modèle de page global si vous ne l'avez pas déjà fait. Cela communiquera avec Affirm pour aider à calculer le message « À partir de X/mois » en fonction des offres de financement sur votre site Web.
<!-- Affirm -->
<script>
_affirm_config= {
public_api_key:"YOUR_PUBLIC_KEY",
script:"https://cdn1.affirm.com/js/v2/affirm.js"
};
(function(l,g,m,e,a,f,b){vard,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[460],k=fonction(a,b,c){return fonction(){a[b]._.push([c,arguments])}};c[e]=k(c,e," set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b=" set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=[" get"," token"," url",134" items"];a<b.length;a++)d[b[a]]=function(){};h.async= ! 0;h.src=g[f];n.parentNode.insertBefore(h,n) ;deleteg[f];d(g);l[m]=c})(window,_affirm_config," affirm"," checkout"," ui"," script"," ready") ;
</script>
<!-- Terminer Affirm -->
Créer des composants de messagerie promotionnelle
Ajoutez l'élément HTML «affirm-as-low-as» où vous souhaitez afficher un composant de messagerie promotionnelle Affirm. Cela affichera le message À partir de x $/mois sur la page Web.
Les attributs d'élément, tels que "data-page-type", déterminent le composant qui s'affiche. Nous vous recommandons généralement d'ajouter la messagerie promotionnelle à vos pages de catégorie, de produit, de panier et de paiement.
Consultez notre référence HTML pour en savoir plus sur la création d'éléments marketing.
Ajouter un code pour gérer les changements de prix
Le prix affiché sur vos pages de produit ou de panier peut changer en raison des variantes de produit, des changements de quantité, etc. Si votre messagerie promotionnelle Affirm s'affiche avant la mise à jour des prix, le message sera inexact. Pour maintenir la messagerie à jour, implémentez cette fonction d’actualisation dans votre fonction de rappel de changement de prix:
affirm.ui.refresh();
Rechargement de page
Si le prix du produit ou la messagerie promotionnelle Affirm s'affiche après le chargement de la page, ou si vous avez inclus la fonction d'actualisation ci-dessus statiquement sur la page, enveloppez-la dans la fonction de rappel affirm.ui.ready(). Cela garantit que la page n'appelle pas la fonction d'actualisation avant "Affirm.js" ne s'initialise.
affirm.ui.ready(function(){
affirm.ui.refresh();
});
Mise à jour du prix
Lorsque le prix est mis à jour sur votre page, appelez la fonction d'actualisation dans la même fonction de rappel qui gère votre événement de changement de prix. Ajoutez des ID d'élément aux composants de messagerie promotionnelle pour faciliter l'accès et la modification de leurs attributs. Notez que nous utilisons des exemples de noms d'ID ci-dessous.
//Add to an existing callback that fires when the price updates
priceUpdateEventHandler(){
changePriceHandler(newPrice);
}
functionupdateAffirmmPromos(newPrice){
//Update the wrapper elements' attributes in the DOM
document.getElementById('affirmProductModal').setAttribute('data-amount',newPrice);
document.getElementById('affirmLearnMore').setAttribute('data-amount',newPrice);
//Call affirm.ui.refresh to re-render the promotional messaging componenets
affirm.ui.refresh();
}
Détecter la fermeture modale
Lorsqu'une fenêtre modale est fermée (non-prequal), vous pouvez détecter cet événement en utilisant le code suivant:
affirm.events.on('learnMore:close',function(){console.log('fired')});
Si le script ci-dessus ne fonctionne pas, utilisez le même code mais remplacez « learnMore » par « prequal », comme illustré ci-dessous:
affirm.events.on('prequal:close',function(){console.log('fired')});
Exemples
Consultez les exemples suivants pour savoir comment ajouter des composants de messagerie promotionnelle à votre site:
Pour ajouter une messagerie de paiement mensuelle et une fenêtre modale de produit à votre page de produit:
<pclass="affirm-as-low-as"data-page-type="product"data-amount="your_price_variable"></p>
Assurez-vous d'utiliser la variable de prix ou le montant de votre page en cents CAD (par ex., $100 = 10000) pour "data-amount".
Pour ajouter une messagerie de paiement mensuel et une fenêtre modale de produit à votre page de panier:
<pclass="affirm-as-low-as"data-page-type="cart"data-amount="your_price_variable"></p>
Assurez-vous d’utiliser la variable de prix de votre page ou le montant du prix en cents CAD (par exemple, $100 = 10000) pour «data-amount».
Pour ajouter une fenêtre modale de site à un lien texte sur votre page d'accueil:
<aclass="affirm-site-modal"data-page-type="page d'accueil">En savoir plus</a>
Pour ajouter une fenêtre modale de site au lien bannière:
<a class= "affirm-site-modal" data-page-type= "banner" ><imgsrc="https://cdn-assets.affirm.com/images/banners/300x50.png"></a>
Dans chaque code HTML, assurez-vous d'inclure l’attribut «data-page-type» correspondant à la page où ce composant de messagerie promotionnelle est placé. L'attribut «data-page-type» vous permet de personnaliser la messagerie à l'avenir sans travail de développement. Par défaut, la messagerie promotionnelle sur les pages de produits a une préqualification activée, mais vous pouvez travailler avec votre responsable de la réussite client pour modifier cela et configurer des personnalisations supplémentaires.
Directives De Marketing
En suivant nos Guides de marketing pour les commerçants, vous vous assurerez que votre messagerie et vos communications sont conformes et maintiendront la qualité de la marque Affirm. Ces guides incluent:
- Spécifications de la marque (taille du logo, couleur)
- Directives de messagerie de la page d'accueil (mise en page et messages approuvés)
- Directives de messagerie relatives aux produits, aux catégories, aux panier et la page de paiement
- Aperçu des modales éducatives (appelés modales En savoir plus dans le document des directives)
- Directives de marketing par courriel (mise en page et messagerie approuvée)
- Directives de marketing des médias sociaux
Tout votre contenu marketing lié à Affirm doit être disponible pour tous vos clients.