Gérer les composants de messagerie promotionnelle

À propos des composants de messagerie promotionnelle

Vous pouvez choisir parmi trois types de composants pour mettre en avant les offres de financement d'Affirm :

Aussi peu que (APQ)
Modal des produits

For marketing compliance information, see the Marketing section in the Business Resource Hub.

Aussi bas que

As-Low-As (ALA) components are specific HTML tags that render as-low-as promotional messaging on your site. You can add the tags to your site based on where you want to display the promotional messaging. For details, see the HTML Reference.

APQ JSFiddle :

ALA HTML:

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

Modal des produits

A product modal is a pop-up that displays detailed information about a specific product, particularly its pricing details. Product modals are often located on product detail pages since they provide users with comprehensive pricing and product information, helping them with their purchasing decision. Typically, a user can open a product modal by clicking the call-to-action in an As-Low-As promotional message, such as “Learn more.”

Pour des détails sur l'ajout d'une fenêtre modale de produit, consultez la référence HTML.

HTML du modal des produits :

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

<div id="prices">
     <button class="affirm-product-modal" data-page-type="product" data-amount=30000>
           Learn More</button>
</div>

Modale de produit JSFiddle :

Gestion des composants de messagerie promotionnelle

Créer un composant

L’importation affirm.ui.components.create crée crée un composant Affirm en arrière-plan à rendre à la demande sur votre site Web, réduisant ainsi considérablement l'impact du temps de chargement.

📘
Les composants de messagerie promotionnelle aident à réduire la latence et vous offrent plus de flexibilité.

const promoComponent = affirm.ui.components.create(‘promo’, options)

Arguments de méthode

Attribut	Type	Description
type de composant Obligatoire	string	Seulement `promo` est disponible.
options\ required	objet	Voir l'objet Options.

Propriétés des options

Attribut	Type	Description
amount	integer	The loan amount passed to display price specific messaging. The amount must be in cents.
pageType\ required	string	Type de page sur laquelle se trouve la promotion/le message: `product` (par défaut) TBD
affirmLogoType	string	Définit le type de logo Affirm. Par défaut, affiche l'image du logo Affirm : `logo` (par défaut) : logo Affirm standard. `symbol`Affiche le logo Affirm sous forme de symbole. `text` Affiche le logo Affirm en texte brut.
affirmLogoColor	string	Définissez la couleur du logo Affirm : `black` `blue` (par défaut) `white`
Catégorie	string	Identifie la catégorie de produit associée au message pour le suivi analytique (par ex., électronique, mobilier).
marque	string	Identifie la catégorie de marque associée au message pour le suivi analytique (par ex., Samsung, Goodyear).
sku	string	Identifies the SKU associated with the messaging for analytics tracking.
promoId	string	Permet au commerçant de sélectionner un identifiant promotionnel spécifique qu'il souhaite afficher. Cela remplacera le `pageType` fourni.
learnMoreShow	boolean	Afficher ou masquer le lien modal: `true` (par défaut) : Affiche le lien modal. `false`: supprime le lien CTA et les hyperliens vers l'intégralité de la promotion.

Rendu d'un composant

Rendez un composant pour améliorer la latence des messages promotionnels sur votre site Web :

Appelez la fonction de rendu, affirm.ui.components.render("#css-selector"), pour un composant existant à tout moment.
1. La fonction de rendu accepte le sélecteur CSS pour l’élément DOM où vous souhaitez afficher le message promotionnel. Nous recommandons d’utiliser un id pour un seul élément en tant que sélecteur CSS.
2. La fonction de rendu utilise document.querySelector pour localiser l'élément sur la page. Si vous passez une classe, seul le premier élément correspondant est transformé en composant rendu.

Mettre à jour un composant

Vous pouvez mettre à jour un composant pour réduire la latence et accroître la flexibilité de votre site.

Pour les éléments de messages promotionnels, la fonction de mise à jour :

Effectue un autre appel à l'API Promos avec les options mises à jour.
Refait le rendu du message promotionnel s'il est affiché sur la page.

Sujets relatifs

Référence HTML : Messagerie promotionnelle