Integrate Promotional Messaging

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. Affirm Promotional Messaging Placement
2. Ajouter Affirm.js
3. Insert Promotional Messaging HTML Tags

Step 1: Affirm Promotional Messaging Placement

Placement Guidelines

Determine where you would like the Affirm Promotional Messaging to display on your site. For examples and additional context, please review our Strategic Placement section.

Email Marketing Guidelines

For more guidance around email marketing guidelines, please refer to our Email Marketing page.

Step 2: Add 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 →

📘

Script URL -> Production Environment

Please note that the URL listed in the code snippet points to our sandbox script, which is best suited for testing your integration. Before going live, remember to set the script to the live version: 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.

Step 3: Insert Promotional Messaging HTML Tags

After adding Affirm.js, you’ll need to insert specific HTML tags on your site where you want the promotional messaging to display. These tags are responsible for rendering the messaging. See our HTML reference and Components page for more details. The following example includes: As low as {payment}/mo with [affirm_logo]. Learn more.

Be sure to include the data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type controls the page type and pricing configuration on your site. Additionally, you can customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled.

Exemple

To demonstrate how to include Affirm.js and the HTML tags on your site, the following example shows what a site's product detail page may look like:

<!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>