AccueilCommencerSolutionsPlateformesIntégrations globales
Docs

Integrate Promotional Messaging

Découvrez la manière d'intégrer la messagerie promotionnelle à votre site.

Suggérer des modifications

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. Ajouter Affirm.js
  2. Insérer des balises HTML de messagerie promotionnelle

Étape 1 : 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",
   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 -->

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 2 : 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 pour en savoir plus. 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. En 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"
 };
 (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>

Mis à jour 3 months ago