Intégrer Baback - Shopify headless
Sur une boutique Shopify classique, le portail de retour Baback s'installe tout seul via l'app Shopify. Sur un site headless, il n'y a pas de thème dans lequel s'injecter : il faut ajouter le script vous-même.
L'intégration se fait en deux étapes : charger le script sur vos pages, puis désigner l'élément qui ouvre le portail.
1. Ajouter le script
Ajoutez ce script sur toutes les pages de votre site, en remplaçant VOTRE_SHOP_ID par l'identifiant de votre boutique Shopify :
<script
src="https://cdn1.baback.co/embed/index.js"
data-shop-id="VOTRE_SHOP_ID"
data-base="https://app.baback.co"
data-position="center"
async
></script>
Le script est léger : il n'affiche rien tant que le client n'ouvre pas le portail, et charge le reste à la demande.
Les attributs disponibles
Attribut | Rôle |
|---|---|
| Obligatoire. L'identifiant de votre boutique Shopify. Si vous ne le connaissez pas, demandez-le nous. |
| L'URL du portail. Laissez |
| Position d'ouverture du portail : |
| Optionnel. Pré-remplit la commande, utile sur une page « détail de commande » d'espace client : le client n'a plus à saisir son numéro de commande. |
| Optionnel, |
💡 Chargez le script sur toutes les pages, pas seulement celle qui porte le lien de retour. C'est ce qui permet à un client en cours d'échange de reprendre son parcours après avoir navigué dans votre catalogue.
2. Ouvrir le portail
Ajoutez l'attribut data-baback-return-open sur n'importe quel élément cliquable — un lien de pied de page, un bouton dans l'espace client, une entrée de menu. Le script se charge du reste.
<button data-baback-return-open>Retourner un article</button>
Ou, dans un pied de page :
<a href="#" data-baback-return-open>Portail de retour</a>
Vous pouvez placer autant d'éléments que vous voulez : tous ouvriront le portail.
Ouvrir le portail en JavaScript
Si votre site gère ses interactions en JavaScript (single-page application, composant de menu…), vous pouvez ouvrir le portail directement :
window.baback.open();
// En pré-remplissant une commande précise :
window.baback.open({ orderId: "123456789" });
Cette méthode est disponible dès que le script est chargé.
Vérifier que tout fonctionne
Ouvrez votre site et cliquez sur votre lien de retour : le portail doit s'afficher en surcouche, sans quitter la page.
Saisissez une vraie commande et vérifiez que les articles remontent bien.
Si rien ne se passe, ouvrez la console de votre navigateur : les messages préfixés
[baback]indiquent si le script a bien trouvé sondata-shop-id.
Si vous êtes bloqué, écrivez-nous avec l'URL de la page concernée : on regarde avec vous.