Scriptorium · VII

Ajoute un bouton d'achat à ton site Framer

Conçois la page dans Framer et vends avec le bouton. Un collage dans les paramètres du site et un composant Embed sur le canevas, et la conception reste exactement la tienne.

Ajoute la balise de script, une fois

Dans les paramètres du site, ouvre le code personnalisé et colle la balise de script dans la section qui se charge dans la tête. Publie pour que cela prenne effet.

<script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
  crossorigin="anonymous"
  defer></script>

Nomme le produit dans ton tableau de bord

Ouvre ton projet, bascule vers l'onglet Produits, et ajoute le produit : une référence que tu choisis, un nom, un prix, une devise. À partir d'ici, le tableau de bord écrit les deux blocs sur cette page avec ton ID de projet réel. Ce que tu vois ci-dessous est la forme.

Place le bouton là où tu vends

Dépose un composant Embed sur la page, choisis HTML, et colle le bouton. Dessine le cadre à peu près à la taille du bouton avant de publier.

<coin-moebius-buy
  project-id="proj_YOUR_ID_HERE"
  product-id="t-shirt-medium"
  label="Buy a t-shirt">
</coin-moebius-buy>

Publie. Le bouton s'affiche avec la page, et le sélecteur de paiement charge la première fois qu'un acheteur clique. Chaque produit supplémentaire est le même bloc avec une référence et une étiquette différentes.

Attention à ceux-ci

Le code personnalisé veut un site payant

Framer exécute du code personnalisé et des intégrations sur des plans de site payants. Sur un site gratuit, la page publiée ne montrera pas le bouton.

Les intégrations se dimensionnent au cadre, pas au contenu

Un cadre laissé à zéro hauteur masque complètement le bouton. Donne à l'Embed une taille explicite et la mise en page se maintient pendant que la page charge.

Sur la liste vérifiée

L'intégration HTML de Framer est l'une des surfaces que la documentation liste comme confirmée fonctionnelle.

Prêt quand ta page l'est

Gratuit couvre 150 transactions par mois. Pas de carte pour s'inscrire.