<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script> 
<div 
 id="store-finder-widget" 
 data-key="{{locator-data-key}}" 
></div>

Pour définir une couleur principale pour l'arrière-plan du widget Locator & Pages, vous devez utiliser l'attribut data-bgprimarycolor. Cela n'affecte que la couleur d'arrière-plan des sections principales du Localisateur.

Cet exemple montre la couleur d'arrière-plan principale en bleu

Delete

data-bgprimarycolor="#0099FF"
data-bgprimarycolor="#0099FF"

Pour définir une couleur secondaire pour l'arrière-plan du widget Locator & Pages, vous devez utiliser l'attribut data-bgsecondarycolor. Cela ne s'appliquera que pour les sections de couleur d'arrière-plan derrière les composants du Localisateur et la section de recherche.

Cet exemple montre la couleur secondaire d'arrière-plan en gris

data-bgsecondarycolor="RGB(120,120,120)"
data-bgsecondarycolor="RGB(120,120,120)"

Delete

Pour définir une couleur d'arrière-plan lors du survol de la souris dans le widget Locator & Pages, vous devez utiliser l'attribut data-listitemhovercolor. Cela n'affecte que l'élément que la souris survol.

Cet exemple montre la couleur d'arrière-plan du survol de la souris en vert

data-listitemhovercolor="#009900"

Delete

Pour définir une couleur de bordure dans le widget Locator & Pages, vous devez utiliser l'attribut data-bordercolor. Cela n'affecte que les bordures de la liste des établissements.

Cet exemple montre la couleur de la bordure en noir

data-bordercolor="RGB(0,0,0)"

Delete

Pour définir une couleur globale pour le texte principal dans le widget Locator & Pages, vous devez utiliser l'attribut data-primarytextcolor. Cela ne concerne que le texte qui n'est pas un lien hypertexte ou un titre.

Cet exemple montre la couleur principale du texte en cyan

data-primarytextcolor="RGB(0,255,255)"
data-primarytextcolor="RGB(0,255,255)"

Delete

Pour définir une couleur globale pour le texte en second plan dans le widget Locator & Pages, vous devez utiliser l'attribut data-secondarytextcolor. Cela ne concerne que les titres.

Cet exemple montre la couleur du texte secondaire en rose

data-secondarytextcolor="#FFC0CB"
data-secondarytextcolor="#FFC0CB"

Delete

Pour définir une couleur globale pour le texte du lien hypertexte dans le widget Locator & Pages, vous devez utiliser l'attribut data-linkcolor. Cela ne concerne que le texte défini comme étant un lien hypertexte, sur lequel l'utilisateur peut cliquer et est ensuite redirigé vers une autre page.

Cet exemple montre la couleur du lien hypertexte en rouge

data-linkcolor="RGB(255,0,0)"

Delete

Pour définir une couleur globale pour les boutons dans le widget Locator & Pages, vous devez utiliser l'attribut data-buttonbgcolor. Cela affecte tous les CTA sur les pages locales ainsi que le bouton de recherche sur la page du Locator.

Cet exemple montre la couleur d'arrière-plan du bouton en rouge

data-buttonbgcolor="RGB(255,0,0)"

Delete

Pour définir une couleur de texte pour les boutons du widget Locator & Pages, vous devez utiliser l'attribut data-buttontextcolor. Cela concerne tous les CTA sur les pages locales ainsi que le bouton de recherche sur la page du Localisateur.

Cet exemple montre la couleur du texte du bouton en noir

data-buttontextcolor="#000000"

Delete

Pour configurer un titre méta pour la page principale du Localisateur, vous devez utiliser l'attribut data-mainpagetitle et l'ajouter au widget sur la page qui contient le Localisateur. Veuillez vous assurer qu'il n'y ai aucune autre balise pour le titre méta sur la page du Localisateur. La présence de plusieurs balises de titre méta pourrait causer des problèmes de référencement. Ceci exclut les titres méta configurés avec data-localpagetitle.

Pour définir une description méta pour la page principale du Localisateur, utilisez l'attribut data-mainpagedescription et ajoutez-le au widget sur votre page. Assurez-vous qu'aucune autre description méta ne soit présente sur la page du Localisateur. Plusieurs descriptions méta pourraient causer des problèmes au niveau de l'indexage dans les moteurs de recherches. Cette règle ne s'applique pas aux descriptions configurées avec l'attribut data-localpagedescription.

Pour configurer un titre méta sur les pages locales du Localisateur, utilisez l'attribut data-localpagetitle et ajoutez-le au widget sur la page du Localisateur. Assurez-vous de n'avoir qu'un seul titre méta sur la page de votre Localisateur. Plusieurs titres méta pourraient causer des problèmes d'indexage dans les moteurs de recherches. Cette règle ne s'applique pas aux titres configurées avec l'attribut data-mainpagetitle.

Des variables peuvent être utilisées pour référencer l'information de vos établissements pour les titres méta des pages locales et les rendre uniques: $name, $address, $zip, $city, $keywords

Pour configurer une description méta sur les pages locales du Localisateur, utilisez l'attribut data-localpagedescription et ajoutez-le au widget sur la page du Localisateur. Assurez-vous d'avoir qu'une seule description méta sur la page de votre Localisateur. Plusieurs descriptions méta pourraient causer des problèmes d'indexage dans les moteurs de recherches. Cette règle ne s'applique pas aux descriptions configurées avec l'attribut data-mainpagedescription.

Des variables peuvent être utilisées pour référencer l'information de vos établissements pour les descriptions méta des pages locales et les rendre uniques: $name, $address, $zip, $city, $keywords

Par défaut, le widget Locator & Pages occupe une largeur prédéterminée sur la page où il est implémenté. Pour faire en sorte que le Locator utilise tout l'espace qui lui est disponible en largeur, ajoutez l'attribut data-showfullwidth et assignez-lui la valeur "true".

Pour afficher les avis de l'établissement sur les pages locales du Localisateur (limité à GBP), utilisez les attributs data-showreviews et data-minimumreviewratingtoshow. Seuls les 5 derniers avis correspondant à la configuration d'évaluation minimale que vous aurez choisie seront affichés.

Pour afficher n'importe quel avis, data-showreviews doit avoir une valeur correspondant à "true".

L'attribut data-minimumreviewratingtoshow peut être utilisé avec data-showreviews pour définir une note minimale pour les avis qui seront affichés (1 à 5).

Si vous avez votre propre clé API Google et voulez l'utiliser pour les sessions Google Maps avec le Locator, utilisez l'attribut data-gapikey. Assignez votre clé API comme valeur à l'attribut: data-gapikey="GOOGLE_API_KEY". Utilisez cet attribut uniquement si vous avez votre propre clé API Google.

Pour définir le centre de la carte pour le Locator, utilisez l'attribut data-mapcentercoordinates et assignez-lui des valeurs en latitude et longitude: data-mapcentercoordinates:"lat:40.4;lng:-3.7".

Le Localisateur utilise les unités de distances métriques. Si vous désirez utiliser les unités de distances impériales, utilisez l'attribut data-imperialunits et assignez-lui une valeur "true".

Le titre par défaut du Localisateur (en haut à droite) est "Store Finder". Pour changer le titre, utilisez l'attribut data-title. Veuillez noter que sa fonctionnalité est différente de celle de l'attribut data-mainpagetitle.

Cet exemple affiche un titre de "This is my Locator title!"

data-title="This is my Locator title!"

Delete

Pour ajouter et afficher un logo dans le coin en haut à gauche du Localisateur, utilisez l'attribut data-logourl. Cet attribut requiert un lien direct vers le fichier de la photo.

Cet exemple affiche le logo Uberall en temps que logo du Localisateur

data-logourl="https://uberall.com/assets/images/logo-hover.svg"

Delete

Par défaut, un en-tête montrant le Logo et le Titre du Localisateur sera affiché. Pour supprimer cette section d'en-tête, utilisez l'attribut data-showheader et définissez-le sur "false" .

Cet exemple montre l'en-tête

data-showheader="true"

Effacer

Cet exemple masque l'en-tête

data-showheader="false"

Effacer

Par défaut, un footer affichant le lien "Afficher tous les emplacements" et le texte de footer du localisateur seront affichés. Pour supprimer cette section du footer, utilisez l'attribut data-showfooter et définissez-le sur "false" . Notez que le texte d'attribution et le logo ne font pas partie du pied de page.

Cet exemple montre le pied de page

data-showfooter="true"

Effacer

Cet exemple masque le footer

data-showfooter="false"

Effacer

Lorsque le footer du localisateur et des pages est affiché, Copyright 2021 uberall s'affiche au milieu de celui-ci. Cela peut être modifié à l'aide de l'attribut data-footertext .

Cet exemple définit le texte du footer sur une valeur différente

data-footertext="Voici un texte de pied de page !"

Effacer

L'Attribution du Locator (Powered by Uberall) s'affiche par défaut. Pour le supprimer, utilisez l'attribut data-showattribution . Définir l'attribut sur "false" masquera l'attribution.

L'en-tête des Pages Locales est une image de la position de l'établissement sur la carte. Pour remplacer cette carte par la photo style paysage de l'établissement, utilisez l'attribut data-locationpageheader. Si l'établissement n'a pas de photo de style paysage, la carte sera utilisée.

Cet exemple affiche la carte comme en-tête

data-locationpageheader="map" (default)

Delete

Cet exemple affiche la photo de style paysage comme en-tête

data-locationpageheader="hero"

Delete

Pour afficher l'adresse complète d'un établissement sur le Localisateur, utilisez l'attribut data-showaddressextra. Cette information est cachée par défaut.

Cet exemple affiche l'information supplémentaire de l'adresse

data-showaddressextra="true"
data-showaddressextra="true"

Delete

Les mots-clés d'un établissement sont affichés par défaut sur les Pages Locales. Pour cacher ces mots-clés, utilisez l'attribut data-showkeywords et assignez-lui une valeur de "false". Les mots-clés sont affichés dans la colonne secondaire.

Cet exemple affiche les mots-clés

data-showkeywords="true" (default)

Delete

Les catégories d'un établissement sont affichées par défaut sur les Pages Locales. Pour cacher ces catégories, utilisez l'attribut data-showcategories et assignez-lui une valeur de "false". Les catégories sont affichées dans la colonne secondaire.

Cet exemple affiche les catégories

data-showcategories="true" (default)

Delete

Les langues de service pour un établissement sont affichées sur les Pages Locales par défaut. Pour les cacher, utilisez l'attribut data-showlanguages et assignez-lui une valeur de "false". Les langues de service sont affichées dans la colonne secondaire.

Cet exemple affiche les langues de service

data-showlanguages="true" (default)

Delete

Par défaut, le site web d'un établissement n'est pas affiché sur les Pages Locales. Pour afficher le site-web d'un établissement, utilisez l'attribut data-showwebsite et assignez-lui une valeur de "true". Le site-web sera affiché dans la colonne principale.

Cet exemple affiche le site-web d'un établissement

data-showwebsite="true"

Delete

Le logo d'un établissement n'est pas affiché par défaut sur les Pages Locales. Pour afficher le logo, utilisez l'attribut data-showlogo. Le logo sera affiché avec les autres photos de l'établissement.

Cet exemple affiche le logo d'un établissement

data-showlogo="true"

Delete

Cet exemple cache le logo d'un établissement

data-showlogo="false" (default)

Delete

Les établissements similaires sont affiché par défaut sur les Pages Locales. Pour cacher les établissements similaires, utilisez l'attribut data-showsimilarlocations et assignez-lui une valeur de "false". Les établissements similaires seront affichés dans la colonne secondaire.

Cet exemple affiche les établissements similaires

data-showsimilarlocations="true" (default)

Delete

Les services offerts aux établissements sont affichés sur les Pages Locales par défaut. Pour cacher ces services, utilisez l'attribut data-showservices et assignez-lui une valeur de "false". Les services sont affichés dans la colonne secondaire.

Cet exemple affiche les services offerts aux établissements

data-showservices="true" (default)

Delete

Les marques offertes par un établissement sont affichées par défaut sur les Pages Locales. Pour cacher les marques, utilizes l'attribut data-showbrands et assignez-lui une valeur de "false". Les marques sont affichées dans la colonne secondaire.

Cet exemple affiche les marques offertes par un établissement

data-showbrands="true" (default)

Delete

Les modes de paiement acceptés par les établissements sont affichés sur les Pages Locale par défaut. Pour cacher les modes de paiement, utilisez l'attribut data-showpaymentmethods et assignez-lui une valeur de "false". Les modes de paiements sont affichés dans la colonne secondaire.

Cet exemple affiche les modes de paiement

data-showpaymentmethods="true" (default)

Delete

Le code postal et la ville des établissements ne sont pas affichés par défaut sur la page principale du Localisateur. Pour afficher le code postal et la ville des établissements, utilisez l'attribut data-showzipcity. Cette information est toujour présente sur les Pages Locales.

Cet exemple affiche le code postal et la ville

data-showzipcity="true"

Delete

Cet exemple n'affiche pas le code postal et la ville

data-showzipcity="false" (default)

Delete

Les pages de réseaux sociaux des établissements sont affichées par défaut sur les Pages Locales. Pour les cacher, utilisez l'attribut data-showsocialprofiles et assignez-lui une valeur de "false". Les pages de réseaux sociaux sont affichées dans la colonne secondaire.

Cet exemple affiche les pages de réseaux sociaux

data-showsocialprofiles="true" (default)

Delete

Les mentions légales d'établissements ne sont pas affichées par défaut sur les Pages Locales. Pour afficher les mentions légales, utilisez l'attribut data-showimprint. Les mentions légales sont affichées dans la colonne secondaire.

Cet exemple affiche les mentions légales

data-showimprint="true"

Delete

Par défaut, le bouton de retour vers la page principale du Localisateur est affichée sur les Pages Locales. Pour cacher le bouton retour, utilisez l'attribut data-showbacklink et assignez-lui une valeur de "false".

Cet exemple affiche le bouton retour

data-showbacklink="true" (default)

Delete

Cet exemple n'affiche pas le bouton retour

data-showbacklink="false"

Delete

La barre de filtres est affichée par défaut sur le Localisateur. Pour cacher cette barre, utilisez l'attribut data-hidefilterbar et assignez-lui une valeur de "true". Même s'il y a des filtres définis et ajoutés au Localisateur, si la barre de filtres n'est pas affichée, les filtres seront aussi cachés.

Cet exemple affiche la barre de filtres

data-hidefilterbar="false" (default)

Delete

Cet exemple cache la barre de filtres

data-hidefilterbar="true"

Delete

Le filtre ouvert maintenant est affiché par défaut sur le Localisateur. Pour cacher ce filtre, utilisez l'attribut data-hideopennowfilter et assignez-lui une valeur de "true".

Cet exemple affiche le filtre "ouvert maintenant"

data-hideopennowfilter="false" (default)

Delete

Cet exemple cache le filtre "ouvert maintenant"

data-hideopennowfilter="true"

Delete

Le seul filtre affiché par défaut sur le Localisateur est le filtre "ouvert maintenant". Pour ajouter et afficher d'autres filtres, utilisez l'attribut data-filters. Il est possible d'avoir les marques, les services et n'importe quel filtre personnalisé.

Cet exemple affiche un filtre pour les services

data-filters="services"

Delete

Cet exemple affiche un filtre pour les services et pour les marques

data-filters="services,brands"

Delete

Cet exemple affiche un filtre pour les services et pour un champ personnalisé

data-filters="services,temperature"

Delete

Pour sélectionner les options de filtre à afficher sur le Localisateur, utilisez l'attribut data-filter-$nom-du-filtre. Cet attribut peut être adapté aux différents filtres déjà définis avec l'attribut data-filters. Les valeur définies avec l'attribut data-filter-$nom-du-filtre seront définis dans l'ordre dans laquelle elles sont ajoutées. Les valeurs omises de l'attribut seront cachées, mais disponibles avec l'URL.

Cet exemple défini l'ordre des valeurs du filtre des services

data-filter-services="Local SEO,Store Finder"

Delete

Cet exemple défini l'ordre des valeurs du filtre des marques

data-filter-brands="Brand1,Brand4,Brand2"

Delete

Pour afficher les "Action Buttons" (itinéraire et appel) sur le Localisateur, utilisez l'attribut data-showactionbuttons et assignez-lui une valeur de "true". Si un établissement n'a pas de numéro de téléphone, le bouton ne sera pas affiché.

Cet exemple affiche les "Action Buttons"

data-showactionbuttons="true"

Delete

Pour configurer la couleur d'un marqueur d'établissement sur la carte, utilisez l'attribut data-locationpincolor.

Cet exemple affiche un marqueur rouge sur la carte

data-locationpincolor="#FF0000"

Delete

Pour configurer la couleur d'un marqueur d'établissement au survol sur la carte, utilisez l'attribut data-locationpinhovercolor.

Cet exemple affiche le marqueur en noir au survol

data-locationpinhovercolor="#000000"

Delete

Pour configurer la couleur d'un rassemblement de marqueurs d'établissements sur la carte, utilisez l'attribut data-clustericoncolor.

Cet exemple affiche le rassemblement de marqueurs en rouge sur la carte

data-clustericoncolor="#FF0000"

Delete

Pour configurer la couleur d'un rassemblement de marqueurs d'établissements au survol sur la carte, utilisez l'attribut data-clustericonhovercolor.

Cet exemple affiche le rassemblement de marqueurs en noir au survol

data-clustericonhovercolor="#000000"

Delete

Pour définir une épingle d'emplacement personnalisée pour le localisateur et les pages, utilisez l'attribut data-locationpinurl . Notez que cela remplacera toute personnalisation des couleurs des épingles de localisation. Une URL directe vers l'image de la broche personnalisée doit être fournie.

Cet exemple définit une épingle personnalisée

data-locationpinurl="https://simpleicons.org/icons/jasmine.svg"

Effacer

Pour définir un cluster de broches d'emplacement personnalisé pour le localisateur et les pages, utilisez l'attribut data-clustericonurl . Notez que cela remplacera toute personnalisation de couleur pour les cluster de broches d'emplacement. Une URL directe vers l'image de la broche personnalisée doit être fournie.

Cet exemple définit un cluster de broches personnalisé

data-clustericonurl="https://simpleicons.org/icons/jasmine.svg"

Effacer

Pour définir une épingle de localisation personnalisée au survol pour le localisateur et les pages, utilisez l'attribut data-locationpinhoverurl . Notez que cela remplacera toute personnalisation des couleurs des épingles de localisation. Une URL directe vers l'image de la broche personnalisée doit être fournie.

Cet exemple définit une épingle personnalisée au survol

data-locationpinhoverurl="https://simpleicons.org/icons/githubsponsors.svg"

Effacer

Pour définir une épingle de localisation personnalisée par entreprise pour le localisateur et les pages, utilisez l'attribut data-locationpinurl-business . Les identifiants d'entreprise doivent être utilisés pour la configuration, pas les identifiants. Notez que cela remplacera toute personnalisation des couleurs des épingles de localisation. Une URL directe vers l'image de l'épingle personnalisée doit être fournie. Les entreprises qui ne font pas partie de l'attribut utiliseront l'épingle d'emplacement par défaut ou celle définie sur mesure.

Cet exemple montre différentes épingles pour deux entreprises différentes

data-locationpinurl-business="1104068=https://simpleicons.org/icons/jasmine.svg,1104069=https://simpleicons.org/icons/githubsponsors.svg"

Effacer

Pour limiter Locator & Pages à un pays spécifique, utilisez l'attribut data-countries . Les pays doivent être fournis sous forme de codes ISO 639-1.

Cet exemple définit les pays sur le Canada et l'Inde

data-countries="ca,in"

Effacer

Cet exemple définit les pays sur le Canada

data-countries="ca"

Effacer

Pour utiliser les identifiants d'emplacement au lieu des identifiants dans les URL des pages locales, utilisez l'attribut data-useidentifier . Cela peut être utile lorsque vous souhaitez utiliser des URL plus significatives.

Cet exemple utilise les identificateurs dans les URL

data-useidentifier="true"

Effacer

Pour demander à l'utilisateur de partager sa position géographique à l'aide de leur navigateur avec le Localisateur, utilisez l'attribut data-askforlocationonload et assignez-lui une valeur de "true".

Cet exemple demande à l'utilisateur de partager sa position géographique au chargement de la page

data-askforlocationonload="true"

Delete

Par défaut, la liste de contenu du "produit" est affichée dans le localisateur et les pages. Pour masquer la liste de contenu du "produit", utilisez l'attribut data-showProductContentList et définissez-le sur "false" . Si elle est affichée, la liste de contenu du "produit" sera dans la colonne principale.

Cet exemple affiche la liste de contenu du produit

data-showProductContentList="true" (par défaut)

Effacer

La liste de contenu menu est affichée par défaut sur les Pages Locales. Pour cacher la liste de contenu menu, utilisez l'attribut data-showMenuContentList et assignez-lui une valeur de "false". La liste de contenu menu est affichée dans la colonne principale.

Cet exemple affiche la liste de contenu menu

L'information "About Us" est affichée afin de présenter la flexibilité de la liste de contenu menu (aussi applicable aux autres liste de contenu)

data-showMenuContentList="true" (default)

Delete

Par défaut, la liste de contenu des "événements" est affichée dans le localisateur et les pages. Pour masquer la liste de contenu des "événements", utilisez l'attribut data-showEventContentList et définissez-le sur "false" . Si elle est affichée, la liste de contenu des événements sera dans la colonne principale.

Cet exemple affiche la liste de contenu des événements

Les informations "Nos valeurs" sont affichées à la place des éléments de menu pour montrer la flexibilité du composant

data-showEventContentList="true" (par défaut)

Effacer

La liste de contenu "personnalisée" est affichée par défaut sur les Pages Locales. Pour cacher la liste de contenu "personnalisée", utilisez l'attribut data-showCustomContentList et assignez-lui une valeur de "false". La liste de contenu personnalisée est affichée dans la colonne principale.

Cet exemple affiche la liste de contenu personnalisée

data-showCustomContentList="true" (default)

Delete

Par défaut, la liste de contenu des "personnes" est affichée dans le localisateur et les pages. Pour masquer la liste de contenu des "personnes", utilisez l'attribut data-showPeopleContentList et définissez-le sur "false" . Si elle est affichée, la liste de contenu des personnes sera dans la colonne secondaire.

Cet exemple affiche la liste de contenu des personnes

data-showPeopleContentList="true" (par défaut)

Effacer

It is possible to re-arrange the displayed components on the Local Pages. Components, can be moved vertically, but not horizontally between columns. Components of the Primary column must stay in that column, the same thing can be said for components of the Secondary column.

To re-order the components of the each column, use the column's respective data-attribute (data-locationpageprimarycolumn & data-locationpagesecondarycolumn) and enumerate the components in the desired order.

The following components are part of the Primary columns of Local Pages:

basic-data, social-post (mobile only), description, products, menu, custom-content-list, events, reviews, imprint, custom-field

The following components are part of the Secondary columns of Local Pages:

social-post, services, payment-options, social-profiles, people, languages, categories, brands, keywords, similar-locations, imprint (mobile only), custom-field

This example shows a re-order of the Primary Column

data-locationpageprimarycolumn="social-post,basic-data,custom-field,description,products,menu,custom-content-list,events,imprint,reviews"

Delete

This example shows a re-order of the Secondary Column

data-locationpagesecondarycolumn="custom-field,people,categories,social-post,services,payment-options,social-profiles,languages,brands,keywords,similar-locations,imprint"

Delete