Assistance de AddressComplete

Guide d’installation

Configuration simple Créer et clé API Configuration API avancée

Guide de configuration d’AdresseComplète

Ce guide offre des directives étape par étape sur la configuration d’AdresseComplète. Il fournit aussi des conseils pour obtenir des résultats optimaux et des options avancées.

Préalables: Vous devez savoir comment accéder au code de source de votre site Web et avoir la permission de le modifier.

①

À partir du site Web d’AdresseComplète, sélectionnez Essai gratuit.
Si vous avez déjà un compte, vous pouvez vous inscrire ici et sélectionner le bouton Créer une nouvelle installation pour commencer une nouvelle installation.

②

Entrez l’URL de la page Web à partir de laquelle vous voulez configurer AdresseComplète.
Conseil: Si votre page utilise le protocole SSL, vous devez vous assurer de sélectionner le protocole HTTPS à partir du menu déroulant.

③

Copiez le fragment de codes fourni et collez-le dans le code de source de votre page Web.
Important: Collez le code dans l’en-tête de votre page.
Nota: Si vous souhaitez qu’AdresseComplète s’affiche dans une boîte de texte distincte de vos champs d’adresse, vous devez ajouter un champ supplémentaire à votre formulaire, puis définir le texte en signet pour ce champ :

④

Une fois que vous aurez sauvegardé les modifications apportées à votre site Web et téléchargé votre page, sélectionnez « J’ai collé et téléchargé mon code. »

⑤

AdresseComplète vérifiera votre page Web pour veiller à ce que le code ait été copié correctement. Un code de vérification s’affichera à l’écran. Prenez-le en note, car vous pourriez avoir à le fournir plus tard.
Nota: S’il faut ouvrir une session pour accéder à votre page, il sera impossible de vérifier votre code, mais vous pourrez quand même passer à la prochaine étape.

⑥

Accédez à votre page Web à partir d’un navigateur Web. (Si la page est déjà ouverte, vous aurez peut-être à l’actualiser.)

⑦

Commencez à saisir une adresse. Vous devriez voir des suggestions d’adresses proposées par AdresseComplète à mesure que vous tapez Si tel est le cas, l’installation est réussie Voilà, vous avez terminé!
Nota: Si vous souhaitez qu’AdresseComplète s’affiche dans une boîte de texte distincte de vos champs d’adresse, vous n’avez qu’à faire correspondre vos champs supplémentaires au champ réservé aux adresses formatées. Si cela n’est pas fait, le système vous demandera de faire correspondre manuellement vos champs d’adresse à nos valeurs d’adresse, tel qu’il est illustré ci-dessous.

Options avancées: TPour configurer un champ de manière à ce qu’il génère des résultats sans déclencher une recherche, décochez l’option de recherche dans le menu des paramètres supplémentaires. Cette option est utile si vous souhaitez qu’AdresseComplète s’affiche dans un champ de recherche distinct.

Pour ajouter les indicateurs Unités multiples ou Commercial/Résidentiel, cliquez sur l’icône « D’ajouter un nouveau champ ». Sélectionnez le champ que vous voulez et saisissez manuellement la valeur à cartographier.
Remarque: pour ajouter de nouvelles valeurs avec succès, vous devrez ajouter des accolades ouvrante et fermante { } avant et après le nom du champ.

⑧

Une fois que vous avez terminé la mise en correspondance des champs d’AdresseComplète et des champs de votre formulaire, sélectionnez Terminé, puis actualisez votre page pour finir l’installation.

Si l’application ne fonctionne toujours pas après l’installation, allez à votre tableau de bord et sélectionnez votre installation.

Vous pourrez accéder à la page des paramètres de votre installation :

Sélectionnez l’onglet Avancé, puis activez Mode de configuration. Encore une fois, prenez le code de vérification en note.

Nous vous recommandons de configurer les paramètres suivants :

Nom
Donnez à l’installation un nom qui vous aidera, ainsi que toute personne qui utilisera votre compte, à déterminer facilement où elle est utilisée.
Limite quotidienne
Chaque installation peut être réglée afin d’autoriser seulement un certain nombre de recherches par jour, jusqu’à une limite maximale d’utilisation. Si vous avez une idée du nombre de recherches que cette installation utilisera en une journée, vous pouvez utiliser ce paramètre pour vous assurer qu’il n’y a pas d’excès pour votre compte.
Adresses URL valides
Vous pouvez empêcher d’autres personnes d’utiliser votre installation sur d’autres sites Web en entrant toutes les adresses URL qui sont utilisées pour accéder à votre site Web. Ces adresses peuvent être aussi précises qu’il est nécessaire, p. ex. www.monsite.comou www.monsite.ca/masection/mapage.htm.
Limiteur d’adresses IP
La limite de recherche peut être encore plus restreinte en limitant le nombre de recherches offertes par jour pour une adresse IP quelconque. Vous pouvez aussi prévoir des exceptions à cette règle qui ne seront pas limitées, par exemple l’adresse IP de votre bureau peut être exclue du limiteur d’adresses IP.
Veuillez noter que, même si bon nombre des visiteurs de votre site Web auront une adresse IP unique, il est possible que certains utilisateurs saisissent une adresse IP qui aurait été attribuée antérieurement à un autre visiteur. Cela peut être le cas pour les utilisateurs de certains fournisseurs de services Internet, mais plus souvent pour les utilisateurs commerciaux dont l’affluence sur Internet est acheminée par une seule connexion.

Conseils pour une intégration réussie

Installez la fonction AdresseComplète en tant que nouveau champ au lieu de l’intégrer dans des champs de formulaire existants; cela la rend plus facile à comprendre et à utiliser pour les utilisateurs.
Positionnez le menu déroulant des pays de votre formulaire d’adresse au-dessous des champs d’adresse et non au-dessus. De cette façon, AdresseComplète peut définir automatiquement le pays et cela permet d’éviter aux utilisateurs d’avoir à sélectionner le pays à deux reprises.
Assurez-vous de bien définir la taille des champs d’adresse en fonction des renseignements qui y seront inscrits.
Prenez en considération les différents formats d’adresse et les différentes conventions de désignation si vous faites affaire avec des clients à l’échelle internationale.
Si vous demandez une adresse de facturation et une adresse d’expédition, n’oubliez pas d’intégrer la fonction AdresseComplète aux deux adresses.

Configuration et création de la clé API

Pour créer votre clé API :

①

Ouvrez une session sur le site Web d’AdresseComplète.

②

À partir du tableau de bord, cliquez sur Créez une nouvelle installation.

③

Sélectionnez Sautez l’étape de la configuration et créez une clé API avancée.

④

Entrez un nom pour votre clé API. Il s’agit du nom qui s’affichera lorsque vous accéderez à vos intégrations/clés dans votre tableau de bord.

⑤

Vous passerez à un écran détaillé consacré à la clé récemment créée. Faites défiler l’écran jusqu’au champ Clé API pour récupérer votre clé. Si vous le souhaitez, vous pouvez également modifier d’autres paramètres de la clé, comme les adresses URL et IP valides, la fonction de limiteur d’adresses IP et la limite quotidienne.

⑥

Naviguez jusqu’au site Web principal d’AdresseComplète, puis sélectionnez l’option Soutien.

⑦

À partir du menu de gauche, sélectionnez API pour accéder à l’information dont vous avez besoin pour créer une demande faite au service Web d’AdresseComplète.

Configuration API avancée

Pour obtenir des options de configuration plus avancées, utilisez la configuration API au lieu de l’assistant d’installation. Cela peut être utile pour mettre en œuvre des caractéristiques précises d’AdresseComplète en ce qui concerne la sélection des adresses.

Selon la présentation de formulaire ci-dessous :

<div class="input-line"><label for="chercher">Chercher</label>
<input id="chercher" type="text" autofocus="" placeholder="Chercher" /></div>
<div class="input-line"><label for="ligne1">Ligne 1</label>
<input id="ligne1" type="text" placeholder="Ligne 1" /></div>
<div class="input-line"><label for="ligne2">Ligne 2</label>
<input id="ligne2" type="text" placeholder="Ligne 2" /></div>
<div class="input-line"><label for="ville">Ville</label>
<input id="ville" type="text" placeholder="Ville" /></div>
<div class="input-line"><label for="province">Province</label>
<input id="province" type="text" placeholder="Province" /></div>
<div class="input-line"><label for="code-postal">Code Postal</label>
<input id="code-postal" type="text" placeholder="Code Postal" /></div>
<div class="input-line"><label for="pays">Pays</label>
<input id="pays" type="text" placeholder="Pays" /></div>
<div class="input-line"><label for="ac_um">Unités multiples</label>
<input id="ac_um" type="text" placeholder="Unités multiples" /></div>
<div class="input-line"><label for="ac_ilrc">Commercial/Résidentiel </label>
<input id="ac_ilrc" type="text" placeholder="Commercial/Résidentiel" /></div>

Une configuration API type pourrait ressembler à ceci :

<script type="text/javascript">  
        var fields = [   
            { element: "chercher", field: "chercher", mode: pca.fieldMode.SEARCH }, 
    
            { element: "ligne1", field: "ligne1", mode: pca.fieldMode.POPULATE },   
            { element: "ligne2", field: "ligne2", mode: pca.fieldMode.POPULATE },   
            { element: "ville", field: "ville", mode: pca.fieldMode.POPULATE },   
            { element: "province", field: "province", mode: pca.fieldMode.POPULATE },   
            { element: "code-postal", field: "code-postal" },   
            { element: "pays", field: "pays", mode: pca.fieldMode.COUNTRY }, 
    
            { element: "ac_um", field: "{AcMu}", mode: pca.fieldMode.POPULATE },   
            { element: "ac_ilrc", field: "{AcIlrc}", mode: pca.fieldMode.POPULATE }  
        ],  
        options = {   
            key: "AA11-AA11-AA11-AA11"  
        },  
        control = new pca.Address(fields, options); 
    </script>

Voici les sections de cette configuration :

fields
La section où sont définis les champs d’AdresseComplète : « element » sert à définir l’identifiant de l’élément que vous voulez utiliser; « field » sert à définir le champ d’AdresseComplète que vous voulez associer à cet élément et « mode » vous permet de sélectionner le mode d’opération du champ.
options
C’est ici que vous définissez les options de commande d’AdresseComplète.
control
C’est ici que l’occurrence d’entité d’AdresseComplète est mise en œuvre à l’aide de pca.Address(fields, options)

Options

key ^{(obligatoire)}
Il s’agit de la clé qui permet d’authentifier la demande. Celle-ci peut être copiée à partir de l’exemple de codes d’installation d’AdresseComplète.
name
Référence pour le contrôle, utilisé comme identification pour fournir le soutien ARIA.
populate
La valeur par défaut est « vrai ». Utilisé pour activer ou désactiver le contenu de tous les champs.
onlyInputs
La valeur par défaut est « faux ». Seuls les champs de saisie seront remplis.
autoSearch
La valeur par défaut est « faux ». La recherche sera déclenchée selon les points d’intérêt des champs.
prompt
La valeur par défaut est « faux ». Affiche un message demandant à l’utilisateur de donner plus de détails.
promptDelay
La valeur par défaut est « 0 ». Temps (en millisecondes) avant que le contrôle demande à l’utilisateur de donner plus de détails.
setCursor
La valeur par défaut est « faux ». Met à jour le champ de saisie avec le texte de la recherche en cours.
minSearch
La valeur par défaut est « 1 ». La recherche sera déclenchée selon les points d’intérêt des champs.
maxItems
La valeur par défaut est « 0 ». Nombre maximal d’éléments à présenter (0 = désactivé).
manualEntry
La valeur par défaut est « faux ». Si aucun résultat n’est trouvé, il est possible de cliquer sur le message pour désactiver la fonction de contrôle.
disableTime
La valeur par défaut est « 60000 ». Temps (en millisecondes) pour désactiver la fonction de contrôle aux fins de saisie manuelle.
suppressAutocomplete
La valeur par défaut est « vrai ». Supprime la fonction implicite de saisie semi-automatique du navigateur pour les champs de recherche.
setCountryByIP
La valeur par défaut est « faux ». Définit automatiquement le pays selon l’adresse IP de l’utilisateur.
culture
Fixe la culture pour les étiquettes, p. ex. « en-us », « fr-ca ».
languagePreference
Langue de préférence pour l’adresse sélectionnée, p. ex. « eng », « fra ».

Modes des champs

pca.fieldMode.DEFAULT
Il s’agit du mode par défaut qui combine les commandes des modes des champs SEARCH et POPULATE.
pca.fieldMode.POPULATE
Ce mode définit l’élément du champ d’AdresseComplète lorsque l’utilisateur sélectionne une adresse. L’utilisation de ce champ ne déclenche pas une recherche par AdresseComplète.
pca.fieldMode.COUNTRY
Ce mode fournit un sélecteur de pays et peut être utilisé pour définir le pays dans lequel AdresseComplète effectuera sa recherche.
pca.fieldMode.SEARCH
Cette commande définit le champ en tant que champ de recherche d’AdresseComplète. La saisie dans ce champ déclenche une recherche par l’entremise d’une commande d’AdresseComplète.
pca.fieldMode.NONE
Ce champ sera ignoré.
pca.fieldMode.PRESERVE
Cette commande permet de verrouiller un champ de sorte qu’il ne peut être modifié par AdresseComplète.

Options avancées d’AdresseComplète

Déclencher une activité lorsqu’une adresse est trouvée

Vous pouvez faire en sorte qu’une activité soit déclenchée quand AdresseComplète trouve une adresse, p. ex. l’affichage d’un message de réussite. Pour ce faire, insérez le code suivant dans l’en-tête de votre page, puis ajoutez l’activité dans la section pertinente du code.

<script type="text/javascript">   
    addressComplete.listen('load', function(control) {          
        control.listen("populate", function (address) {              
            //add custom code here          
        });      
    }); 
</script>

Accéder au contenu d’une réponse de recherche d’une adresse

Vous pouvez accéder au contenu des réponses d’une demande d’AdresseComplète, puis le modifier si vous devez utiliser les divers éléments de l’adresse. Insérez le code ci-dessous dans votre page, puis modifiez-le pour accéder à la

<script type="text/javascript">   
    addressComplete.listen('load', function(control) {              
        control.listen("populate", function (address) {                  
            document.getElementById("line1").value = address.Line1;              
        });          
    });  
</script>

AdresseComplète modifie ou étend le formulaire

Pour certaines présentations et mises en page, AdresseComplète peut étendre des éléments de votre formulaire, surtout les éléments très courts. Pour éviter que cela se produise, insérez la commande d’AdresseComplète dans des balises DIV dont la largeur définie est la même que celle de vos champs. Cela peut être effectué en utilisant un code semblable à celui de l’exemple suivant :

<script type="text/javascript">      
    addressComplete.listen('ready', function() {          
        addressComplete.setWidth(300);          
        addressComplete.setHeight(300);      
    }); 
</script>

Modifier la couleur et la taille de la police du menu déroulant

Vous pouvez modifier la couleur et la taille de la police des caractères du menu déroulant de recherche d’AdresseComplète en ajoutant le code ci-dessous à l’en-tête de votre page :

<style type="text/css">
    .pca .pcatext {<br />        font: 15px Verdana;<br />        color: #4682b4;<br />    }<br /></style>

Activer et désactiver une commande de façon dynamique

Il se peut que vous vouliez que la recherche d’AdresseComplète ne s’active qu’à des moments précis sur certaines pages plutôt que d’être toujours active. Utilisez le code ci-dessous pour activer ou désactiver la commande.

<script type="text/javascript">     
    addressComplete.listen('ready', function() {          
        addressComplete.enable();          
        addressComplete.disable();      
    }); 
</script>

Définir le pays de façon dynamique

Il se peut que vous vouliez définir le pays de la commande d’AdresseComplète de façon dynamique en fonction des sélections de l’utilisateur ou de la page sur laquelle se trouve l’utilisateur. Cela remplace la fonction par défaut qui définit le pays selon l’adresse IP de l’utilisateur. Utilisez le code ci-dessous.

<script type="text/javascript">      
    addressComplete.listen('ready', function() {          
        addressComplete.setCountry("France");      
    }); 
</script>

Définir des lieux pour lesquels la livraison n’est pas offerte

S’il y a des régions pour lesquelles la livraison n’est pas offerte, vous pouvez faire en sorte que cette information soit communiquée à vos clients lorsqu’ils cherchent leur adresse. Le code ci-dessous montre comment y parvenir en recherchant une province dans les réponses fournies à partir de la recherche d’adresse et grâce à l’affichage d’un message d’erreur lorsque les résultats d’une recherche d’adresse présentent une adresse dans une province précise. Cette fonction peut être adaptée à d’autres éléments d’adresse, tels que des villes ou des codes postaux.

<script type="text/javascript"> 
    addressComplete.listen('load', function(control) {      
        control.listen("populate", function (address) {          
            if ( address.ProvinceCode == "ON" ||  address.ProvinceCode == "QC") { 
                //EXAMPLE – do not deliver to ON or QC              
                alert("Sorry we do not deliver to this address");          
            }      
        });  
    });
</script>

Options de paramètres de contrôle supplémentaires

Vous pouvez remplacer les options de contrôle supplémentaires afin de modifier son style de manière plus approfondie.

<script type="text/javascript">      
    addressComplete.listen('options', function(options) {          
        options.bar = options.bar || {};          
        options.bar.showCountry = false;          
        options.bar.showLogo = true;          
        options.bar.logoLink = false;      
    });  
</script>

Réglage de la langue du contrôle

Vous pouvez régler la langue de l’interface utilisateur de contrôle en tout temps pour l’adapter à la culture de la langue de la page en cours.

<script type="text/javascript">       
    addressComplete.listen('ready', function() {          
        addressComplete.setCulture("fr-CA");      
    });  
</script>

Changer le texte des messages dans le contrôle

Vous pouvez définir le contenu des messages affichés pour les utilisateurs.

<script type="text/javascript">           
    pca.messages.en.DIDYOUMEAN = "Did you mean:";          
    pca.messages.en.NORESULTS = "No results found";          
    pca.messages.en.KEEPTYPING = "Keep typing your address to display more results";          
    pca.messages.en.RETRIEVEERROR = "Record could not be retrieved";          
    pca.messages.en.SERVICEERROR = "Service Error:";          
    pca.messages.en.COUNTRYSELECT = "Select Country";          
    pca.messages.en.NOLOCATION = "Sorry, we could not get your location";          
    pca.messages.en.NOCOUNTRY = "Sorry, we could not find this country";  
</script>