company logo

Centre de documentation

Aller sur Chariow
Toutes les collectionsCréateursMarketingSnapSnap: Intégrer un widget d'achat directement sur votre site

Snap: Intégrer un widget d'achat directement sur votre site

Le widget "Snap" de Chariow vous permet de transformer n'importe quelle page web en point de vente, offrant à vos clients une expérience d'achat directe et sans redirection.

Odile ASSOGBA·7 octobre 2026

Snap est une fonctionnalité puissante conçue pour maximiser vos conversions en éliminant la friction causée par les redirections externes. En intégrant un simple morceau de code sur votre site (ou une plateforme tierce), vous affichez un bouton d'achat directement lié à un produit Chariow.

Ce widget permet à vos visiteurs d'ajouter le produit à leur panier et de finaliser la transaction sans jamais quitter la page qu'ils consultent, qu'il s'agisse d'un article de blog, d'une page de destination, ou de toute autre section de votre site.

Pour y accéder dans votre interface Chariow, naviguez vers le menu latéral et cliquez sur Marketing, puis sélectionnez Snap.

Étapes : Générer et personnaliser votre widget Snap

La création d'un widget Snap se fait en quelques étapes simples dans votre tableau de bord Chariow :

1. Démarrer la création

  1. Dans le menu Marketing > Snap, cliquez sur le bouton Générer mon snap.

  2. La page de personnalisation s'ouvre, vous permettant de configurer l'apparence et le contenu de votre widget.

2. Personnalisation du widget

Vous avez plusieurs options pour définir l'apparence et le comportement de votre widget :

  • Sélectionner un produit : Choisissez le produit de votre catalogue Chariow que vous souhaitez associer à ce widget. C'est l'étape la plus importante, car elle lie le bouton à l'inventaire et au prix appropriés.

  • Style du widget : Définissez l'affichage du widget sur votre page. Les options courantes incluent :

    • Tap : Un bouton d'achat simple.

    • Frame: Un bloc plus visible incluant le nom du produit.

    • Showcase: Un widget flottant ou pop-up.

  • Style de bordure : Choisissez entre un style 'Arrondi' pour des coins adoucis ou 'Carré' pour des angles vifs.

  • Couleur du widget : Définissez la couleur principale du bouton pour l'adapter à la charte graphique de votre site web.

  • Texte du bouton : Personnalisez le texte affiché sur le bouton d'action (ex. : "Acheter maintenant", "Télécharger", "Ajouter au panier"). Ce champ est facultatif.

  • Animation du bouton d'achat : Ajoutez une animation subtile pour attirer l'attention de l'utilisateur sur le bouton.

3. Copier le code d'intégration

Une fois que vous êtes satisfait de l'aperçu du widget, procédez comme suit :

  1. Cliquez sur le bouton “Obtenir le code” pour finaliser la personnalisation et accéder à la page 'Code du widget'.

  2. Cliquez sur 'Copier le code'.

  3. Le code HTML complet de votre widget est maintenant copié dans votre presse-papiers. Il se présente sous la forme d'un bloc de code <div id="chariow-widget" ...>.

Procédure : Intégration sur votre site

Le code du widget doit être inséré dans l'éditeur HTML de la page de votre site web où vous souhaitez qu'il apparaisse.

Règle d'intégration : Collez le code copié à l'endroit exact dans le corps (<body>) de votre page web où vous souhaitez voir le bouton d'achat.

Pour des instructions détaillées spécifiques à certaines plateformes courantes, veuillez consulter les articles suivants :

  • Snap : Intégration sur WordPress

  • Snap : Intégration sur Systeme.io

  • Snap : Intégration sur tout autre site web (HTML/CMS)

Conseils pour une utilisation optimale de Snap

  • Clarté du bouton : Assurez-vous que le 'Nom du bouton' est clair et incite à l'action. Utilisez un verbe d'action pour maximiser l'efficacité.

  • Emplacement stratégique : Placez le widget là où le visiteur est le plus susceptible de prendre une décision d'achat (par exemple, après une description de produit détaillée ou un témoignage).

  • Cohérence visuelle : Utilisez la 'Couleur du widget' pour qu'il se démarque, tout en restant harmonieux avec la palette de couleurs de votre site.


Besoin d'aide ? Contactez notre support via le chat ou à [email protected]

Cette réponse vous a-t-elle aidé ?
😞
😐
😁