Intégrer la messagerie promotionnelle

Disponibilité des pays

Liste des pays ⬇️

USA

Canada

UK

Aperçu

La messages promotionnelle Affirm vous aide à présenter des options de financement à vos clients, à improviser le taux de conversion et la valeur moyenne des commandes. Ce guide fournit nos options d'intégration pour vous aider à démarrer.

Plateformes de commerce électronique

Si votre site fonctionne sur une plateforme de commerce électronique, la mise en œuvre de la messagerie promotionnelle Affirm est simple. Consultez notre documentation sur les plateformes pour plus d'informations.

Affirm.js

Affirm.js est une bibliothèque Javascript que vous ajoutez à votre site web pour permettre le rendu du contenu promotionnel et assurer une communication transparente entre les balises HTML que vous ajoutez à votre site, comme data-page-type et les serveurs d'Affirm. Suivez les étapes d'intégration ci-dessous pour utiliser Affirm.js.

Étapes d'intégration

1. Placement des messages promotionnels Affirm
2. Ajouter Affirm.js
3. Insérer des balises HTML de messagerie promotionnelle

Étape 1 : Placement de la messagerie promotionnelle Affirm

Directives de placement

Déterminez où vous souhaitez afficher la messagerie promotionnelle d'Affirm sur votre site. Pour des exemples et un contexte supplémentaire, consultez la section Placement stratégique.

Directives de marketing par courriel

Pour des conseils sur les directives de marketing par courriel, consultez notre page de marketing par courriel.

Conformité en matière de marketing

Certains de vos messages peuvent nécessiter l'ajout d'informations de divulgation. Consultez nos guides de conformité en matière de marketing.

Étape 2 : Ajouter Affirm.js

Pour utiliser la messagerie promotionnelle Affirm, vous devez d'abord inclure la bibliothèque Affirm.js dans l'en-tête du modèle de page global de votre site. Cela garantit que la bibliothèque est chargée sur toutes les pages de votre site.

Pour inclure Affirm.js, ajoutez le code d'intégration suivant au tête de votre modèle de page global :

<!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY", // use your live public API key
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js" // NOTE: switch this value to “https://cdn1.affirm.com/js/v2/affirm.js” to point to Affirm production environment
   locale:          "en_US",
   country_code:    "USA",
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){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","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
</script>
<!-- End Affirm →

📘

URL du script -> Environnement de production

Veuillez noter que l’URL indiquée dans l’extrait de code pointe vers notre environnement de test, qui est le mieux adapté pour tester votre intégration. Avant la mise en ligne, n'oubliez pas de définir le script sur la version en direct : https://cdn1.affirm.com/js/v2/affirm.js.

Cliquez ici pour les codes régionaux et nationaux pris en charge.

Une fois que vous aurez inclus le script ci-dessus, une instance définie d'Affirm sera créée sur votre client. Vous aurez accès aux méthodes de l'objet Affirm pour déclencher plusieurs actions.

Étape 3 : Insérer des balises HTML de messagerie promotionnelle

Après avoir ajouté Affirm.js, vous devrez insérer des balises HTML spécifiques sur votre site à l'endroit où vous souhaitez que le message promotionnel s'affiche. Ces balises sont responsables du rendu du message. Consultez notre référence HTML et notre page Composants pour plus de détails. L'exemple suivant inclut : Aussi peu que {paiement}/mois avec [affirm_logo]. En savoir plus.

Veillez à inclure l'attribut data-page-type correspondant à la page où le composant de messagerie promotionnelle est placé. Le data-page-type contrôle le type de page et la configuration de la tarification sur votre site. De plus, vous pouvez personnaliser la messagerie à l'avenir sans travail de développement. Par défaut, la préadmissibilité est activée pour la messagerie promotionnelle sur les pages de produits.

Exemple

Pour montrer comment inclure Affirm.js et les balises HTML sur votre site, l'exemple suivant montre à quoi peut ressembler la page détaillée d'un produit sur un site :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Detail Page</title>
  <link rel="stylesheet" href="styles.css">
  <!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.affirm.com/js/v2/affirm.js",
   locale:          "en_US",
   country_code:    "USA"
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){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","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
</script>
<!-- End Affirm -->
</head>
<body>
  <header>
    <!-- Site Header -->
  </header>
  <main>
    <div class="product-detail">
      <img src="product-image.jpg" alt="Product Image">
      <h1>Product Name</h1>
      <p>Product Description</p>
      <p>Price: $100</p>

      <!-- Add promotional messaging below the product price -->
<div id="prices">
    <div id="buy-button">
      Buy Now
    </div>
    <div id="regular-price">
      $500.00
    </div>
    <p class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>
</div>
    </div>
  </main>
  <footer>
    <!-- Site Footer -->
  </footer>
</body>
</html>