Intégrations · Votre formulaire
L'autocomplétion des adresses dans votre formulaire, en trois fichiers.
Aucun plugin, aucune plateforme : un fichier JavaScript qui se relie aux champs que vous avez déjà, un proxy prêt pour votre serveur qui garde le token en sécurité, trois lignes pour les connecter. Le visiteur écrit, la voie se complète, code postal, ville et province se remplissent tout seuls ; une adresse écrite à la main est vérifiée quand elle quitte le champ. Suggestions issues des registres de 26 pays.
Ce qu'il y a dans le kit
- ra-suggerisci.js·le widget : aucune dépendance, le même fichier que les plugins WooCommerce et PrestaShop ; il suggère pendant la saisie et, à la sélection, distribue l'adresse vérifiée dans les champs
- ra-proxy.php·le proxy : garde le token sur le serveur, n'accepte que votre domaine, limite par visiteur, transmet la requête à RadarAddress ; si le token manque ou si le crédit est épuisé, il répond avec une liste vide et le formulaire continue
- esempio.html·un formulaire complet — pays, adresse, code postal, ville, province — qui fonctionne dès que le token est dans le proxy : on le copie et on l'adapte
- README·les options du widget, le contrat du proxy pour qui n'utilise pas PHP, ce que ça consomme
Comment ça marche, en trois étapes
Créez le compte et le token
Le compte est gratuit, il ne demande pas de carte et il comprend chaque mois un quota d'opérations : le token se crée en un clic et les étapes sont expliquées là.
Mettez le proxy sur le serveur
Copiez ra-proxy.php sur le même domaine que le formulaire et écrivez le token à la ligne indiquée (mieux encore : dans un fichier hors du dossier web, lu depuis là). Rien d'autre à configurer.
Reliez le widget aux champs
Incluez ra-suggerisci.js dans la page et indiquez les sélecteurs de vos champs : adresse, code postal, ville, province et, s'il y en a un, le pays. Le widget fait le reste.
<script src="ra-suggerisci.js"></script>
<script>
RASuggerisci.attacca({
url: '/ra-proxy.php', // le proxy sur votre serveur, jamais l'API
campi: { indirizzo: '#indirizzo', cap: '#cap', localita: '#citta',
provincia: '#provincia', nazione_iso2: '#nazione' }, // le pays est facultatif
lingua: 'fr'
});
</script>
campi accepte n'importe quel sélecteur CSS. Les options en plus : onSeleziona reçoit la fiche vérifiée (adresse normalisée, résultat, coordonnées quand elles existent), scriviCampo pour les formulaires React et Vue, correggiAlBlur pour décider si les adresses écrites à la main sont aussi vérifiées, headers pour un token CSRF vers le proxy. Tout est dans le README du kit ; le contrat de l'API est dans la documentation.
Prérequis : n'importe quelle page web et, pour le proxy du kit, PHP 8.0 ou une version ultérieure avec cURL ; sinon, soixante lignes dans votre langage. Le widget est publié sous licence Academic Free License 3.0.
Ce qui se passe dans le formulaire
- Pendant la saisie·après deux lettres, le widget propose les voies, avec le nom complet et la commune ; les lettres suivantes filtrent ce qu'il a déjà reçu, sans appeler le serveur à chaque touche ; un code postal et une ville déjà remplis resserrent la recherche
- À la sélection·l'adresse vérifiée entre dans les champs sous la forme correcte — voie en entier, numéro, le bon code postal même dans les grandes villes à zones postales, ville et province — et une vérification de contact est comptée ; les numéros de la voie se complètent sans autre débit
- Écrite à la main·qui ignore la liste et écrit tout par lui-même est vérifié quand il quitte le champ : si l'adresse est reconnue, les champs se corrigent ; sinon, elle reste telle quelle. Rien ne bloque jamais l'envoi
- À l'étranger·avec le pays indiqué, les suggestions viennent du registre de ce pays et le visiteur écrit comme on écrit là-bas, même tout dans un seul champ ; l'attribution du registre se trouve en bas de la liste
Questions fréquentes
Pourquoi un proxy ? Ne puis-je pas appeler l'API depuis la page ?
Le token API donne accès à votre crédit : dans la page, n'importe qui pourrait le lire. Le widget ne parle qu'à une adresse de votre propre site ; là, un fichier de soixante lignes ajoute le token et transmet la requête. Le proxy PHP du kit est prêt : on le copie, on y écrit le token, et c'est tout.
Mon site n'est pas en PHP.
Le proxy est la référence, pas une obligation : il reçoit le JSON du navigateur, ajoute l'en-tête Authorization avec le token, transmet la requête à /api/v1/suggest et renvoie la réponse. Il se réécrit dans n'importe quel langage en quelques minutes ; le README décrit le contrat.
Est-ce que ça fonctionne avec React, Vue, Angular ?
Oui : le widget se relie aux champs avec n'importe quel sélecteur CSS. Les formulaires contrôlés veulent que la valeur soit écrite avec le setter natif : c'est à cela que sert l'option scriviCampo, celle qu'utilise le plugin WooCommerce sur le passage en caisse par blocs.
Qu'est-ce que ça consomme ?
Taper est gratuit. Une vérification de contact est comptée quand le visiteur sélectionne une adresse dans la liste (ou quand une adresse écrite à la main est vérifiée à la sortie du champ, si vous laissez correggiAlBlur activé) : une par adresse, pas par touche. Chaque mois, les 50 premières sont gratuites ; au-delà, les packs et abonnements de la page des tarifs.
Et si le crédit s'épuise, ou si RadarAddress ne répond pas ?
Le widget reste silencieux et le formulaire fonctionne comme toujours : aucun message au visiteur, aucun envoi bloqué. Le proxy renvoie une liste vide sur 401, 402 et sur toute erreur réseau.
Est-ce que ça marche à l'étranger ?
Pour tous les pays en service : il suffit d'un champ avec le code ISO du pays (une liste déroulante avec IT, DE, FR… ou un champ caché) indiqué dans nazione_iso2. Le visiteur écrit comme on écrit dans son pays, même tout dans un seul champ ; le popup affiche l'attribution du registre.
Puis-je changer l'aspect du popup ?
Le widget apporte ses propres styles, sans fichier CSS : les variables --ra-sugg-bg, --ra-sugg-bordo et --ra-sugg-hover sur votre page changent les couleurs ; la classe est .ra-sugg-pop pour le reste.
Historique des versions
- 1.0.0 — première version du kit : widget, proxy PHP avec limites et contrôle de l'origine, formulaire d'exemple, README.
Les autres intégrations : WooCommerce, PrestaShop, AcyMailing, Convert Forms et Community Builder. La liste.