Passer au contenu principal

Ajouter le widget Olvio à vos pages produit

Ajoutez le bloc Olvio à un modèle de produit dans l'éditeur de thème Shopify pour afficher le widget sur vos pages produit.

Ajouter le widget Olvio à vos pages produit

Le widget Olvio est un bloc que vous ajoutez à votre modèle de produit dans l'éditeur de thème Shopify. Sur vos pages produit, il affiche votre Nom de l'expert, votre Question d'accroche, des questions suggérées et un champ de question, et le panneau de chat s'ouvre lorsqu'un client envoie une question. Vous n'avez pas besoin de modifier le code de votre thème.

Avant de commencer

  • Votre thème doit être un thème Online Store 2.0. Si Olvio détecte un ancien thème Online Store 1.0, le Tableau de bord affiche la bannière Votre thème n'est pas compatible avec le widget Olvio. Consultez Online Store 1.0 non pris en charge — que faire.

  • Le widget n'apparaît sur votre boutique en ligne que lorsque vous êtes abonné à un plan, y compris pendant votre essai gratuit.

  • Connectez votre clé API Anthropic. Sans clé, le bloc affiche toujours son Nom de l'expert, sa Question d'accroche et son champ de question, mais aucune question suggérée, et l'envoi d'un message affiche un message d'erreur (en français : Désolé, une erreur est survenue. Veuillez réessayer.). Consultez Connecter votre clé API Anthropic (Claude).

Ajouter le bloc depuis le guide de configuration

  1. Ouvrez Olvio dans votre interface administrateur Shopify. Sur le Tableau de bord, repérez la carte Préparez Olvio pour votre premier client.

  2. À l'étape Ajoutez le bloc Olvio à votre page produit, cliquez sur Ouvrir l'éditeur de thème. L'éditeur de thème Shopify s'ouvre dans un nouvel onglet sur un modèle de produit, avec le bloc Olvio ajouté dans une nouvelle section Applications pour que vous puissiez le prévisualiser.

  3. Faites glisser la section à l'endroit de la page où vous voulez que le widget apparaisse.

  4. Cliquez sur Enregistrer pour l'ajouter à votre thème. Le bloc n'apparaît sur votre boutique en ligne que si ce thème est votre thème publié.

La carte disparaît une fois toutes les étapes terminées. Si vous avez cliqué sur Masquer sur la carte, elle ne revient pas : ajoutez alors le bloc manuellement comme décrit ci-dessous. Consultez Votre guide de configuration : préparez Olvio pour votre premier client.

Ajouter le bloc manuellement

  1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne.

  2. Repérez votre thème publié, puis cliquez sur Modifier le thème. Si vous ajoutez le bloc à un autre thème, il n'apparaît sur votre boutique en ligne qu'une fois ce thème publié.

  3. Ouvrez le menu des pages en haut de l'éditeur (il affiche Page d'accueil) et sélectionnez le modèle de produit que vous souhaitez modifier.

  4. Dans la barre latérale, cliquez sur Ajouter une section, ou sur Ajouter un bloc dans la section où vous voulez placer le widget.

  5. Dans le menu déroulant, à la section Applications, sélectionnez Olvio — Product page.

  6. Si nécessaire, faites glisser le bloc à la bonne position, puis cliquez sur Enregistrer.

Le bloc Olvio n'est disponible que sur les modèles de produit. Les modifications apportées à un modèle s'appliquent à tous les produits qui l'utilisent : si certains de vos produits utilisent un autre modèle de produit (choisi dans le paramètre Modèle de thème du produit), ajoutez également le bloc à ce modèle.

Si le bloc ne figure pas dans la liste, consultez Impossible de trouver le bloc Olvio dans l'éditeur de thème.

Remplacer les couleurs ou la taille de police pour un modèle (facultatif)

Par défaut, le widget utilise les couleurs et la taille de police définies sur la page Apparence d'Olvio. Pour les modifier sur un seul modèle, sélectionnez le bloc Olvio dans l'éditeur de thème et utilisez ses paramètres :

  • Use custom colors for this block : lorsque cette case est cochée, le widget utilise les couleurs Accent, Accent foreground, Background, Surface, Border, Text et Muted text définies dans le bloc.

  • Use custom font size for this block : lorsque cette case est cochée, le widget utilise la taille Base font size du bloc, de 12 à 20 px (14 px par défaut).

Ces remplacements s'appliquent à tous les produits qui utilisent le modèle, ainsi qu'au panneau de chat qui s'ouvre depuis le widget. La police, le rayon des coins, l'avatar et le CSS personnalisé proviennent toujours de la page Apparence. Consultez Personnaliser les couleurs du widget.

Vérifier que le widget est en ligne

Ouvrez une page produit sur votre boutique en ligne : le widget apparaît à l'endroit où vous avez placé le bloc. La première fois que le widget se charge sur un produit actif qu'Olvio a déjà importé, le guide de configuration marque cette étape comme terminée (si d'autres étapes restent à faire, son bouton devient Voir les conversations). Cette étape peut aussi être cochée pendant que vous prévisualisez le bloc dans l'éditeur de thème : vérifiez donc une page produit sur votre boutique en ligne en direct pour confirmer que le bloc est enregistré, car un simple aperçu ne le publie pas. Pour essayer une conversation complète, consultez Tester Olvio sur votre boutique en ligne.

Si vous avez coché Masquer le widget sur les langues qu’Olvio ne couvre pas dans la carte Langues de l'onglet Avancé de la page Apparence, le widget n'apparaît pas lorsqu'un client parcourt votre boutique dans une langue que le widget ne couvre pas. Lorsque la case est décochée, le widget s'affiche quand même sur ces pages : ses questions suggérées sont dans votre langue principale, et le chat commence dans cette langue. Sur une page dans une langue qu'Olvio ne prend pas en charge, les questions suggérées sont plutôt en anglais, et le chat commence en anglais, si votre widget propose l'anglais. Sous la case à cocher, Olvio liste les langues publiées par votre boutique que le widget ne couvre pas. Si le widget couvre toutes les langues publiées par votre boutique, la case est grisée. L'éditeur de thème affiche toujours le bloc, quelle que soit la langue prévisualisée. Consultez Multilingue : choisir les langues couvertes par votre widget.

Si le widget n'apparaît toujours pas, consultez Le widget n'apparaît pas sur ma boutique en ligne.

Utiliser Olvio Advisor (Growth et Scale)

Le bloc de page produit est distinct d'Olvio Advisor. Si votre boutique est sur le plan Growth ou Scale et que vous utilisez des liens Advisor, activez aussi l'intégration d'application Olvio Advisor dans votre thème publié : dans l'éditeur de thème, cliquez sur l'icône Intégrations d'applications, activez Olvio Advisor, puis cliquez sur Enregistrer. Les liens Advisor ont besoin de cette intégration : une fois qu'elle est activée, un lien ouvre Advisor sur n'importe quelle page de votre boutique, sauf dans les langues masquées par Masquer le widget sur les langues qu’Olvio ne couvre pas. Consultez Activer Olvio Advisor et ajouter des liens Advisor à votre boutique.

Avez-vous trouvé la réponse à votre question ?