Suivez notre guide simple ci-dessous pour installer MatBrain™ sur votre site web en quelques minutes.

Script n° 1 :

<!– MatBrain Widget Container –>
<div id= »matbrain-widget »></div>

Script n° 2 :

<!– MatBrain Widget Script –><script>
(function() {
var script = document.createElement(« script »);
script.src = « https://www.coba.com/tools/matbrain/matbrain-widget.js »;
script.onload = function() {
MatBrainWidget.init({
container: « #matbrain-widget »,
domain: window.location.origin,
// Path to CSV file containing SKU, URL, and Image mappings
csvPath: ‘https://www.example.xyz/media/sku-list.csv’,
// Additional configuration options
theme: « default »,
language: « en »,
debug: false
});
};
document.head.appendChild(script);
})();
</script>

Étape 1 : Modification du modèle de liste SKU MatBrain™

Dans le cadre de la configuration de MatBrain™, les utilisateurs doivent modifier le modèle de liste SKU MatBrain™ (téléchargeable ci-dessous) afin qu’il corresponde aux produits qu’ils vendent actuellement.l.

Télécharger le modèle de liste SKU

Veuillez examiner le modèle et :

  • Supprimer toutes les lignes correspondant à des produits que le distributeur ne vend pas.
  • Mettre à jour la colonne URL avec les URL des pages correspondantes pour chaque produit sur le site web du distributeur. Le modèle contient actuellement des exemples de liens.
  • update the image links to urls of images from the distributer website. The template currently has example links.

Veuillez conserver les références SKU, car elles servent de référence à notre système pour déterminer les résultats. Les autres colonnes peuvent être modifiées.

Une fois le modèle CSV mis à jour, l’utilisateur doit télécharger le fichier CSV à un emplacement accessible par l’outil MatBrain™. Il peut s’agir de plusieurs emplacements, notamment :

  • La médiathèque du site web
  • Un système de gestion des ressources numériques (DAM)
  • Ajouté au répertoire du site web via SFTP/FTP

Une fois le fichier CSV téléchargé, notez l’URL du fichier CSV, car elle sera nécessaire à l’étape deux.

Étape 2 : ajout du snippet (à l’aide du CMS et de Google Tag Manager)

En haut de cette page, vous trouverez deux snippets de code qui devront être ajoutés à la page Web du site Web du distributeur.

Les deux extraits de code doivent être présents sur la même page Web pour que l’intégration MatBrain™ fonctionne.

Si le site Web le permet, les deux codes peuvent être ajoutés dans un champ Rich Text Editor ou WYSIWYG (What you see is what you get). Veuillez ajouter les deux codes dans la section « Texte » ou « Source » du champ qui permet la modification du code HTML. Vous trouverez des exemples ci-dessous :

Si le site Web n’autorise pas les balises <script> dans les champs de texte, le deuxième script peut être placé dans Google Tag Manager et déclenché sur la page Web contenant le premier script. Il fonctionnera alors avec le premier script de la page.

Vous pouvez utiliser une balise HTML personnalisée et copier-coller le deuxième extrait de code dans une nouvelle balise. Le déclencheur doit être configuré pour s’activer sur la même page Web que le premier extrait de code MatBrain™. Veuillez consulter la capture d’écran ci-dessous :

Étape 2 : ajout du snippet (développement front-end)

Les deux snippets de code doivent être présents sur la même page pour que l’intégration MatBrain™ fonctionne correctement.

Le snippet peut être ajouté à un fichier .js séparé et inclus dans le modèle, ou simplement ajouté au modèle lui-même au-dessus de la balise </body>.

Étape 3 : modification du deuxième extrait

Pour finaliser MatBrain™, veuillez copier l’emplacement du fichier CSV de l’étape 1 et l’ajouter au deuxième script. L’emplacement doit remplacer le texte « https://www.coba.com/tools/matbrain/dummy-data.csv ». Veuillez vous assurer qu’un ‘ est ajouté avant et après le lien.

Étape 3 : (Facultatif) modification de la langue

L’intégration MatBrain™ est disponible en plusieurs langues. Si vous souhaitez modifier la langue, remplacez « en » par l’une des options suivantes afin de déterminer la langue dans laquelle MatBrain™ s’affichera.

« en » = Anglais

« fr » = Français

« es » = Espagnol

« de » = Allemand

« it » = Italien

« pl » = Polonais

« sl » = Slovaque

« pt » = Portugais