Installer le score Mavilà sur votre site

Cette page s'adresse à la personne qui gère votre site. Si ce n'est pas vous, transmettez-lui simplement le lien de cette page. L'installation du score Mavilà est simple et rapide.

Le code à intégrer

Le score Mavilà s'intègre une seule fois, directement dans le « template d'annonce » de votre site. Concrètement, ce template fonctionne comme un modèle commun à toutes vos annonces : la mise en page reste la même, tandis que les informations propres à chaque bien (photos, prix, description, etc.) sont automatiquement mises à jour d'une annonce à l'autre. Une fois le code Mavilà ajouté à ce modèle, vous n'avez plus rien à faire. Le score s'affiche automatiquement sur toutes vos annonces, aussi bien celles déjà en ligne que toutes celles que vous publierez par la suite. Et surtout, chaque annonce affiche automatiquement le score correspondant au quartier du bien concerné.

Placez le code à intégrer à l'endroit du template où le score doit apparaître (par exemple sous la description du bien) :

<div data-mavila-widget
  data-api-key="[votre clé d'accès Mavilà]"
  data-address="[variable de l'adresse des biens]"></div>
<script src="https://api.mavila.fr/widget/v1/mavila-widget.js" defer></script>

Le bloc occupe toute la largeur de l'emplacement qui l'accueille et adapte sa présentation à cette largeur : en dessous de 680 pixels (sur mobile notamment), le détail du score s'affiche sur une seule colonne au lieu de deux. Sa largeur minimum est de 250 pixels pour assurer une bonne lisibilité.

Les paramètres à renseigner

• data-api-key : votre clé d'accès Mavilà, reçue par e-mail à votre inscription (objet « Votre clé d'accès Mavilà »). Elle est liée au nom de domaine de votre site : le score ne s'affiche que sur votre site en ligne, pas en local.
• data-address : la variable de votre template qui contient l'adresse du bien. Comme pour le prix ou la surface, votre site la remplace automatiquement par l'adresse de chaque annonce : chaque bien affiche ainsi le score de son propre quartier. Pour un résultat le plus fiable possible, utilisez l'adresse complète (numéro, rue, code postal et ville).

<div data-mavila-widget
  data-api-key="Xk3v9QbT2mLp7WzR4nHc8YdF6sJa1Ue5GoBr0NtKiVq"
  data-address="{{ annonce.adresse }}"></div>
<script src="https://api.mavila.fr/widget/v1/mavila-widget.js" defer></script>

Avec des coordonnées GPS plutôt qu'une adresse

Si votre site fonctionne avec les coordonnées GPS des biens plutôt que l'adresse, remplacez data-address par data-lat et data-lon :

<div data-mavila-widget
  data-api-key="[votre clé d'accès Mavilà]"
  data-lat="[variable de la latitude des biens]"
  data-lon="[variable de la longitude des biens]"></div>
<script src="https://api.mavila.fr/widget/v1/mavila-widget.js" defer></script>

• data-lat : la variable de votre template qui contient la latitude du bien, en degrés décimaux avec un point (par exemple 48.8559).
• data-lon : la variable de votre template qui contient la longitude du bien, en degrés décimaux avec un point (par exemple 2.3580).

<div data-mavila-widget
  data-api-key="Xk3v9QbT2mLp7WzR4nHc8YdF6sJa1Ue5GoBr0NtKiVq"
  data-lat="{{ annonce.latitude }}"
  data-lon="{{ annonce.longitude }}"></div>
<script src="https://api.mavila.fr/widget/v1/mavila-widget.js" defer></script>

Personnaliser l'apparence

Vérifier l'installation

1. 1

   Ouvrez une de vos annonces sur votre site en ligne

   À l'endroit prévu, le bloc Mavilà affiche le score de sécurité du quartier. Si ce n'est pas le cas, référez-vous à la section Messages et codes d'erreur.

2. 2

   Ouvrez une annonce située dans un autre quartier

   Le bloc doit afficher le score de ce nouveau quartier. Si toutes vos annonces affichent exactement le même score, l'adresse n'est probablement pas transmise automatiquement. Vérifiez alors que data-address contient bien la variable de l'adresse du bien (ou data-lat et data-lon celles de ses coordonnées GPS), et non une valeur écrite en dur.

3. 3

   Surveillez vos e-mails

   Si vous êtes en période d'essai, vous recevez l'e-mail « Votre essai gratuit Mavilà a démarré ! » dans les 10 minutes qui suivent le premier affichage du score : vos 30 jours d'essai commencent à ce moment-là, pas avant.

Sur un site de test ou en local

Le score ne s'y affiche pas : votre clé ne fonctionne que sur le nom de domaine de votre site en ligne. Vous pouvez tout de même vérifier une partie de l'installation. Le bloc Mavilà doit apparaître avec le message « Service temporairement indisponible », et la console du navigateur doit indiquer une erreur 403 (voir ci-dessous). C'est bon signe : le code est au bon endroit et votre clé est reconnue. Seule l'adresse ne peut être vérifiée qu'une fois le code publié sur votre site en ligne.

Messages et codes d'erreur

À la place du score, vous pouvez voir :

• « Score indisponible » : ce n'est pas une erreur. Le quartier compte trop peu d'habitants ou de logements pour calculer un score fiable. Il n'y a rien à corriger.
• « Service temporairement indisponible » : le score n'a pas pu être chargé. La cause exacte est indiquée dans la console du navigateur, par un message commençant par [Mavilà Widget]. Pour l'ouvrir : clic droit sur la page (sur Mac : Ctrl + clic), « Inspecter », puis onglet « Console ». Sur Safari, activez d'abord les outils de développement dans Réglages > Avancés > « Afficher les fonctionnalités pour les développeurs web ».
• Rien du tout : le code n'est pas présent sur la page, ou pas au bon endroit. Si votre site affiche les annonces sans recharger la page (par exemple une annonce qui s'ouvre par-dessus la liste des biens), placez la ligne <script> du code dans la partie commune à toutes les pages de votre site plutôt que dans le contenu de l'annonce : ajoutée en cours de navigation, le navigateur ne l'exécute pas. Le score s'affiche ensuite automatiquement à chaque annonce ouverte.

Voici les messages que vous pouvez trouver dans la console, et comment les corriger :

Le problème persiste ? Écrivez-nous à contact@mavila.fr en indiquant l'adresse de votre site et le message affiché dans la console.

Retirer le score de votre site

Si vous ne poursuivez pas après votre essai gratuit, ou si vous résiliez votre abonnement, pensez à retirer le code Mavilà de votre template d'annonce. Sinon, le bloc Mavilà reste affiché sur vos annonces avec le message « Service temporairement indisponible ».

En cas de résiliation, le score reste affiché jusqu'à la fin du mois déjà payé : c'est à ce moment-là que vous pouvez retirer le code.