Documentation — Vectail | Recherche IA e-commerce

1 Installation

Deux méthodes sont disponibles pour intégrer Vectail à votre site. Choisissez celle qui correspond le mieux à votre configuration.

              HTML
              <!-- Vectail Search Widget -->
<script src="https://cdn.vectail.com/widget.js"
        data-api-key="VOTRE_CLÉ_API"
        async></script>
            

Collez ce snippet juste avant la balise </body> de votre site. Remplacez VOTRE_CLÉ_API par la clé fournie dans votre dashboard.

              GTM — Custom HTML Tag
              <script src="https://cdn.vectail.com/widget.js"
        data-api-key="VOTRE_CLÉ_API"
        async></script>
            

Étapes :

Ouvrez Google Tag Manager et sélectionnez votre conteneur
Créez un nouveau tag de type HTML personnalisé
Collez le code ci-dessus dans le champ HTML
Choisissez le déclencheur All Pages — Page View
Enregistrez, puis publiez votre conteneur

2 Configuration du dashboard

Une fois le widget installé, connectez-vous à votre dashboard pour configurer votre boutique.

Connexion

Rendez-vous sur votre espace Vectail et connectez-vous avec vos identifiants. Vous accédez directement à votre tableau de bord.

Ajout du flux produits

Vectail synchronise automatiquement votre catalogue produits. Selon votre plateforme :

Shopify — La synchronisation est automatique dès l'installation de l'app
WooCommerce — Connectez votre site via l'URL de votre flux produits (WooCommerce REST API)
PrestaShop — Exportez votre catalogue via le module webservice ou fournissez l'URL de votre flux XML
Magento — Utilisez l'intégration API REST native de Magento 2
Autre CMS — Fournissez un flux produits au format CSV, JSON ou XML

Paramètres de base

Dans l'onglet Paramètres, vous pouvez configurer :

La langue de recherche par défaut
Le nombre de résultats affichés
Les champs de produits à indexer (titre, description, catégorie, SKU…)
Les filtres disponibles (prix, catégorie, marque, disponibilité…)
Les règles de merchandising (boost de produits, synonymes, redirections)

3 Personnalisation CSS

Le widget Vectail s'adapte à l'identité visuelle de votre site. Vous pouvez personnaliser son apparence via des variables CSS.

            CSS
            /* Personnalisation du widget Vectail */
.vectail-widget {
  --vt-primary: #558ef7;      /* Couleur principale */
  --vt-radius: 10px;          /* Rayon des bordures */
  --vt-font: 'DM Sans';       /* Police */
  --vt-bg: #ffffff;           /* Fond du widget */
  --vt-text: #0f172a;         /* Couleur du texte */
  --vt-shadow: 0 12px 40px rgba(0,0,0,.1);
}
          

Ajoutez ces variables dans votre feuille de styles pour surcharger les valeurs par défaut. Vous pouvez également cibler des éléments spécifiques du widget :

.vectail-input — Champ de recherche
.vectail-results — Conteneur des résultats
.vectail-product-card — Carte produit individuelle
.vectail-filters — Panneau de filtres
.vectail-autocomplete — Suggestions d'autocomplétion

Guide de démarrage rapide