Intégrer un widget sous REACT

Intégrer un Widget Itinéraires sous REACT

Introduction

Ce tutoriel technique vous permettra d’intégrer votre Widget Itinéraires dans un environnement « React Habitat » (https://github.com/DeloitteDigitalAPAC/react-habitat).

Cas A – Version PHP (recommandé)

Récupérez le code d’insertion PHP depuis votre interface de gestion de widgets, il devrait ressembler à ça :

<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Rien de plus à faire.

Cas B – Version JavaScript (composant React)

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets.
  2. Commençons par créer le composant React qui va être inséré dans la page :
    Cirkwi.jsx (où XXX est l’identifiant du widget)
import React from 'react';

class Cirkwi extends React.Component {
    render() {
        mbLoadModule({ id: XXX, locale: "fr" });
        return (
            <div>
                <div id="mb-module-XXX"></div>
            </div>
        );
    }
}

export default Cirkwi;
  1. Votre composant est maintenant créé, il faut alors le déclarer dans le containerBuilder.
containerBuilder.registerAsync(() => System.import('./components/Cirkwi')).as('RCirkwi');
  1. Dans votre code PHP, juste avant de charger votre composant, insérez la balise Javascript contenant le script nécessaire au bon fonctionnement du widget.
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
[...]
<div data-component="RCirkwi"></div>
[...]

N’oubliez pas de « build » votre projet ! Une fois ceci fait, le composant est correctement installé.

Applications – Template Mobile : configuration

Applications – Template Mobile : configuration

Si vous avez souscrit au Template Mobile, vous avez la possibilité de modifier le contenu ainsi que la page d’accueil de votre application directement depuis Pro.cirkwi.com

Filtrage

Comme pour n’importe quel Widget Itinéraires, vous pouvez ajouter des jeux de données et les filtrer. Le contenu de l’application se met à jour automatiquement. Plus d’infos sur le filtrage d’un widget en cliquant ici.

Personnalisation de la page d’accueil de l’application

Mise en page

Vous pouvez :

  • activer ou désactiver votre page d’accueil,
  • lui ajouter un logo,
  • lui ajouter un texte descriptif.

Gestion des dalles

Choisissez le nombre de dalles (circuits ou points d’intérêt POIs) à afficher sur votre page d’accueil :

  • Lorsque l’utilisateur est géolocalisé : les circuits les plus proches lui seront proposés.
  • Lorsque l’utilisateur n’est pas géolocalisé : les circuits par défaut que vous aurez définis seront proposés.

Astuce : vous pouvez déplacer l’ordre des circuits par défaut grâce à un glisser / déposer.

Couleurs

Vous pouvez également définir une couleur par défaut pour les autres objets.

Astuce : vous pouvez déplacer l’ordre des couleurs grâce à un glisser / déposer.

N’oubliez pas de sauvegarder une fois que vous avez terminé votre personnalisation :)

Une autre langue pour mon widget

Une autre langue pour mon Widget Itinéraires

Vous avez la possibilité d’afficher le contenu de votre Widget Itinéraires dans différentes langues :

  1. Si vous avez déjà configuré votre widget pas besoin d’en refaire un ! Si cela n’est pas encore fait, configurez votre widget de manière classique (voir le tutoriel)
  2. Lorsque vous éditez votre widget, dans la partie « Code d’insertion », choisissez la langue que vous souhaitez afficher dans le menu déroulant.
Choix de la langue - Multilingue
  1. Le code d’insertion se met à jour avec la nouvelle langue et vous pouvez le copier/coller dans votre éditeur. Les codes précédents avec les autres langues restent valables !
  2. Pour plus langues, le planificateur et le widget itinéraire possèdent tous les deux les traductions nécessaires pour les langues. Pour automatiquement faire la bascule d’une langue à l’autre en suivant le système de votre site, la solution la plus propre est de manipuler le code d’intégration (même fonctionnement pour le planificateur ou le widget itinéraire) :

JavaScript : 

[...]mbLoadModule({"id":"XXXX","locale":"fr",
          "params": {"mb_itinerary-view-sidebar": "true"}, "session":
          true});[...]
  • « locale » à remplacer dynamiquement par « en » pour l’anglais, « nl » pour le néerlandais, « de » pour l’allemand

PHP : 

<?php
        $code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXXX[...]
         true});[...]
  • Remplacer dynamiquement par « en » pour l’anglais, « nl » pour le néerlandais, « de » pour l’allemand

Bon à savoir

Notez qu'il ne s'agit pas de la traduction automatique de vos circuits et POIs : pour que le widget fasse apparaitre vos contenus traduits vous devez renseigner ces traductions lors de l'encodage.

Aide : Pour récupérer l'information de langue sur un WordPress :

PHP :

<?php
$current_lang = get_locale();

$language = substr($locale, 0, 2); // Récupère les deux premiers caractères du code de langue pour correspondre au format Cirkwi
         true});[...]

JavaScript : 

function my_enqueue_scripts() {
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Utilise wp_localize_script pour passer la langue courante à ton script :

function my_localize_script() {
    $current_lang = get_locale();
    wp_localize_script('my-script', 'MyScriptParams', array(
        'currentLang' => $current_lang,
    ));
}
add_action('wp_enqueue_scripts', 'my_localize_script');

Dans ton fichier JavaScript, récupère la langue courante :

jQuery(document).ready(function($) {
    var currentLang = MyScriptParams.currentLang;
    console.log("La langue courante est : " + currentLang);
    // Utilise currentLang selon tes besoins
});
         true});[...]

Générez des PDF personnalisés pour tous vos objets touristiques

Gestion d'itinéraires

Générez des PDF personnalisés pour tous vos objets touristiques

Grâce à notre partenariat avec Edit Your Self, société spécialisée dans la mise en page automatique de documents, nous vous proposons de personnaliser les PDF générés automatiquement pour vos itinéraires. Plusieurs formules et options sont à votre disposition.

Licence PDF Premium

Possibilité de personnaliser certains éléments de la version gratuite

  • Couleur principale et couleurs des trames POI/info parcours
  • Police de caractères des titres et des descriptifs
  • Ajout d’une couverture avec :
    • Photo thématique
    • Titre du parcours
    • Votre dénomination
    • URL de votre site
  • Remplacement du logo Cirkwi par votre Logo

Set-up de démarrage : 300€ HT

Set-up de démarrage : 300 € HT
Licence pour les offices de tourisme : Coût de la licence calculée en fonction du nombre de bureaux d’accueil :

  • 400 €/an HT pour le bureau principal
  • 150 €/an HT par BIT (Bureau d’information touristique) supplémentaire

Pour les autres types de structures (comité départementaux ou régionaux, structures nationales publiques ou privées,…) contactez-nous, nous définirons le montant de votre licence ensemble en fonction de vos besoins.

Des PDF sur-mesure à votre image

Afin de répondre à vos besoins spécifiques, des gabarits personnalisés sur-mesure peuvent être développés afin de générer des PDF qui répondent à vos besoins.
Grâce à notre partenariat avec Edit Your Self, la génération de PDF ne se limite plus uniquement à vos itinéraires, nous pouvons aussi générer n’importe quel document (catalogue d’hébergements, annuaires de prestataires, etc…) sur base des données présentes dans Cirkwi, quel qu’en soit la source (connexion d’un flux xml, création manuelle, importation d’un fichier…)
N’hésitez pas à nous envoyer vos projets afin de définir vos besoins ensemble et d’établir un devis en fonction de ceux-ci.

Option fonds de carte IGN*

L’utilisation de fonds de carte IGN France sur les PDF est une option disponible dans les versions gratuites, premium ou sur-mesure des PDF. Les droits et les limites d’utilisation de ces fonds de carte IGN sont décrits tout en bas de cette page.
Les PDF contenant des fonds de cartes IGN sont stockées de manière spécifique et une licence dédiée à cet aspect est facturée en fonction du nombre de PDF différents générés.
Jusqu’à 10 Fiches différentes : 100 € /an (HT)
Jusqu’à 30 Fiches différentes : 200 €/an (HT)
Jusqu’à 100 Fiches différentes : 400 €/an (HT)
Au-dessus de 100 PDF : Nous consulter

* Actuellement, cette option est uniquement disponible pour les cartes de l’IGN en France, n’hésitez pas à nous contacter pour intégrer n’importe qu’elle autre fond de carte spécifique

Découvrez notre tutoriel pour configurez vos PDF

Droits d’utilisation des fonds de carte IGN

Pour tous les offices de tourisme français, l’ajout de fonds de carte IGN France sur des fichiers PDF est soumise au respect des règles suivantes :

  • Diffusion numérique :
    Utilisation gratuite si il n’y a pas de distribution en version papier de la fiche et que celle-ci n’est utilisée que sur votre site web.
    • Les droits pour la distribution numérique de vos PDF avec fonds IGN sur votre site (via vos Widgets Itinéraires Cirkwi ou un lien de téléchargement direct du PDF sur votre site web) sont gérés au travers de votre clé IGN numérique propre.
    • Tous les autres sites diffuseurs n’ont par contre pas le droit d’utiliser les PDF avec ces fonds de carte IGN (Cirkwi.com, tout autre site contenant les Widgets Itinéraires ou vos sites partenaires). Les PDF de vos itinéraires sur le réseau de diffusion Cirkwi continueront donc d’utiliser un fond de carte gratuit.
  • Diffusion papier :
    Si vous imprimez des PDF avec des fonds de carte IGN, et les distribuez gratuitement dans votre office du tourisme, vous pourriez devoir payer des droits de reproduction à l’IGN qui sont calculés selon diverse variables. Si vous ne dépassez pas les 10 000 dm² (quotas pouvant être librement modifiés par IGN), les droits de reproduction sont gratuits.

Les informations relatives aux droits de reproduction sont disponibles sur cette page : https://geoservices.ign.fr/cgu-licences

Créer un widget sur le Mode Hébergements

Créer un widget avec le mode simplifié

Un outil spécialement pensé pour vous, propriétaires de gites, campings, hôtels, chambres d’hôtes… pour créer votre carte touristique interactive et compléter facilement la page « activités » ou « à proximité » de votre site internet.

En 3 étapes simples

  1. Paramétrez votre widget.
  2. Choisissez la licence gratuite, la licence premium ou utilisez un code promo.
  3. Et intégrez-le sur votre site en quelques clics.

Paramétrage

Filtrer géographiquement

Renseignez l’adresse complète de votre établissement ou un lieu connu (ex : la tour eiffel) et cliquez sur la bonne adresse dans les propositions d’adresses proposées dans le menu déroulant.

Ajustez le périmètre géographique autour de l’adresse que vous venez de renseigner. Seuls les objets inclus dans ce périmètre seront affichés sur votre site.

Couleurs et mise en page

Personnalisez votre mise en page. Vous avez le choix entre une carte seule, une carte avec une liste ou une liste seule. La couleur modifie les boutons, les liens et d’autres éléments clés du widget. Nous vous conseillons de renseigner simplement la couleur dominante de votre site internet.

Sélectionner les données

Sélectionnez les types de données que vous souhaitez afficher sur votre site internet. Les données proposées ici sont exclusivement celles proposées par les acteurs publics du tourisme (Offices de tourisme, CDT, CRT, IGN et autres associations officielles). Vous pourrez désélectionner les objets qui ne vous intéressent pas plus bas dans la page.

Vous pouvez aussi faire la promotion des activités payantes à faire à proximité. Vous serez rémunéré sur chaque vente effectuées auprès de vos clients. Les données proviennent de différents partenaires privés de références. Elles sont complètes et vérifiées par nos partenaires.

Vous souhaitez diffuser vos propres objets touristiques ? Importez-les ou créez-les sur Cirkwi. Plus d’infos ici : https://pro.cirkwi.com/creer-vos-points-touristiques/

Visualisez votre sélection sur la carte. Elle est centrée sur l’adresse que vous avez renseignée plus. Si vous souhaitez élargir ou rétrécir le périmètre, retournez en haut de la page afin d’ajuster les Km.

Voilà la liste complète des objets que vous avez sélectionnés pour afficher sur votre site internet.
Certaines activités ne vous plaisent pas ? Vous pouvez les désélectionner en passant votre souris au dessus de l’objet et en cliquant sur « retirer de ma sélection ». Vous vous êtes trompé ? Pas de souci ! Il vous suffit de repasser votre souris au dessus de l’objet et de cliquer sur « Ajouter à ma sélection ».

Licence

Créer un compte / Se connecter

Créez votre compte, et renseignez votre adresse. Pas de stress, si vous utilisez le widget, rien ne vous sera facturé.

Une fois votre compte créé, vous êtes redirigé sur la page de connexion, connectez-vous et cliquez sur l’étape 2 pour choisir votre licence.
Vous possédez déjà un compte Cirkwi ? Utilisez le même login et le même mot de passe pour vous connectez.

Licence Gratuite / Licence Premium

Acceptez les conditions générales pour ensuite choisir la formule qui vous convient.

Vous vous demandez quelle est la différence entre une licence payante (Premium) et une licence gratuite (Free) ?

La licence Gratuite (Free) :

La page de détail d’une activité s’ouvre sur Cirkwi.com dans un nouvel onglet
Exemple : http://gitesislacooldouce.fr

La licence Premium :

La page de détail d’une activité s’ouvre dans votre site internet, les internautes restent sur votre site.
Exemple : https://www.camping-les12cols.fr

Vous n’avez pas de code promo ?

Contactez votre agence web, ils en ont peut être un pour vous.
Ou contactez notre équipe pour avoir plus d’infos.

Moyen de paiement

Si vous avez choisi la formule gratuite, vous ne passerez directement à l’étape suivante
Quand vous déciderez de passer à la version Premium, vous aurez juste à régler votre licence. Le code d’intégration restera le même. Il n’y aura aucune mise à jour à faire sur votre site internet.

Code d'insertion

Choisir votre code d'intégration

Intégrez un widget est aussi simple que d’intégrer une vidéo youtube sur un site web. Il suffit de copier le code et de le coller sur votre page, à l’endroit où vous souhaitez l’afficher. Pour cela 2 méthodes, en PHP pour les plus avertis ou en Javascript pour tout le monde (même les plus nuls ;))

En Javascript

  • s’intègre directement dans le texte à partir de l’administration de votre site
  • affichage rapide et performant

En PHP

  • l’affichage des pages est très rapide
  • un meilleur référencement sur les moteurs de recherches
  • nécessite quelques connaissances pour l’intégrer dans le code la page

En iFrame ?!

Vous n’allez quand même pas intégrer une aussi belle technologie en iFrame dans votre site ? L’iFrame rend le contenu illisible pour les moteurs de recherche et l’intégration peu réactive pour les navigateurs. Si vous n’êtes pas très exigeant dans la vie, l’iFrame est pour vous !

Intégrer votre widget

Intégrer les versions multilingues

choix-langue-module

Les widgets ont été pensés pour être intégrés en plusieurs langues sur votre site. Il vous suffit de sélectionner la langue dans le menu déroulant, le code d’insertion sa mettra à jour. Il ne vous reste plus qu’à copier et coller le widget dans la page de votre site de la langue concernée.

Et voilà 🙂

Si vous avez des questions, ou que vous rencontrez des problèmes, contactez notre équipe sur support@cirkwi.com. Nous vous répondrons rapidement !

 

Intégrer un widget sur WordPress

Intégrer un Widget Itinéraires sur WordPress

Introduction

Réalisé avec la version 5.0.4 de WordPress

Après avoir configuré votre Widget Itinéraires, vous arrivez à la dernière étape où vous devez copier le code d’intégration soit en PHP soit en Javascript. WordPress permet d’intégrer un widget aussi bien avec le code Javascript qu’avec le code PHP. Voici quelques explications qui vous permettront d’arriver à vos fins facilement :​

Cas A – Version PHP

  1. Sur pro.cirkwi.com, dans l’étape du code d’insertion, cliquez sur « Module PHP ».
  2. Sélectionnez et copiez le code (ctrl C ou edition/copier) en bas de la page.

  3. Maintenant, allez sur l’administration de votre site WordPress (une adresse qui ressemblerai à www.monsite.com/wp-admin).
  4. Téléchargez et activez l’extension Insert PHP Code Snippet.

  5. Accédez à l’extension depuis le menu de l’administration WordPress.

  6. Cliquez sur « Add New PHP Code Snippet ».
  7. Attribuez un nom au widget.
  8. Collez le code PHP.

  9. Copiez le Short Code du widget généré par l’extension « Insert PHP Code Snippet ».

  10. Editez la page ou l’article où vous souhaitez intégrer le widget.
  11. Collez le Short Code du widget.

  12. Enfin, publiez votre page.

Vous pouvez aller consulter la page de votre site internet. Le widget est maintenant affiché 🙂
Si quelque chose ne fonctionne pas ou que le widget s’affiche mal, contactez notre support à l’adresse support@cirkwi.com.

Cas B – Version JavaScript

  1. Sur pro.cirkwi.com, dans l’étape du code d’insertion, cliquez sur « Module Javascript ».
  2. Sélectionnez et copiez le code (ctrl C ou édition/copier) en bas de la page.
  3. Maintenant, allez sur l’administration de votre site WordPress (une adresse qui ressemblerai à www.monsite.com/wp-admin).
  4. Éditez la page ou l’article où vous souhaitez intégrer le widget.
  5. Ajoutez un widget « code court ».

  6. Collez le code javascript.

  7. Enfin, publiez votre page.

Vous pouvez aller consulter la page de votre site internet. Le widget est maintenant affiché 🙂
Si quelque chose ne fonctionne pas ou que le widget s’affiche mal, contactez notre support à l’adresse support@cirkwi.com.

Afficher directement des fiches de consultation sur un widget

Afficher directement des fiches de consultation sur un widget - via le code d’intégration​

Introduction

[Option payante] [Disponible sur le template Tourisme]

Dans les deux cas, A et B, le même code d’intégration de base peut être utilisé pour n’importe quel point d’intérêt (POI) ou circuit.

Cas A – Version PHP (recommandé)

Cas B – Version JavaScript

Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :

<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Pour afficher un circuit :

Pour afficher un circuit, le code devrait donc ressembler à :

<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_id=ID_DU_CIRCUIT&mb_page=circuit&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  • Pour afficher la fiche d’un circuit en consultation, les deux paramètres à ajouter au code d’insertion sont :
    • le paramètre « &mb_id= »
    • le paramètre « &mb_page= »
  • Pour compléter les paramètres :
    • Remplacer ID_DU_CIRCUIT par l’identifiant du circuit qui vous intéresse (vous pouvez retrouver les identifiants dans l’url en consultant ou créant le circuit par exemple)
      • exemple : …….&mb_id=123456…….
    • Compléter le type de page (ici circuit) dans le paramètre « mb_page »
      • exemple : …….&mb_page=circuit…..
    • Remplacer le Module/XXX? : le XXX correspondant à l’identifiant du widget
      • exemple : …..module/56789?mb_…….

Pour afficher un POI :

Pour afficher un POI, le code devrait donc ressembler à :

<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_id=ID_DU_POI&mb_page=poi&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  • Pour afficher la fiche d’un POI en consultation, les deux paramètres à ajouter au code d’insertion sont :
    • le paramètre « &mb_id= »
    • le paramètre « &mb_page= »
  • Pour compléter les paramètres :
    • Remplacer ID_DU_POI par l’identifiant du POI qui vous intéresse (vous pouvez retrouver les identifiants dans l’url en consultant ou créant le POI par exemple)
      • exemple : …….&mb_id=123456…….
    • Compléter le type de page (ici POI) dans le paramètre « mb_page »
      • exemple : …….&mb_page=poi…..
    • Remplacer le Module/XXX? : le XXX correspondant à l’identifiant du widget
      • exemple : …..module/56789?mb_…….

Cas B – Version JavaScript

Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :

<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>

Pour un circuit

  1. Pour afficher la fiche d’un circuit en consultation, les deux paramètres à ajouter au code d’insertion sont l’id du circuit (paramètre « mb_id« ) et le type de page (paramètre « mb_page« ).
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_id : "ID_DU_CIRCUIT",
	    mb_page : "circuit"
	}});
</script>
<div id="mb-module-XXX"></div>
  1. Remplacer ID_DU_CIRCUIT par l’identifiant du circuit qui vous intéresse. Vous pouvez retrouver les identifiants dans l’url en consultant ou créant le circuit par exemple.

Pour un POI

  1. Pour afficher la fiche d’un POI en consultation, les deux paramètres à ajouter au code d’insertion sont l’id du poi (paramètre « mb_id« ) et le type de page (paramètre « mb_page« ).
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_id : "ID_DU_POI",
	    mb_page : "poi"
	}});
</script>
<div id="mb-module-XXX"></div>
  1. Remplacer ID_DU_POI par l’identifiant du POI qui vous intéresse. Vous pouvez retrouver les identifiants dans l’url en consultant ou créant le POI par exemple.

Modifier le cadre géographique par défaut d’un widget

Modifier le cadre géographique par défaut d’un widget - via le code d’intégration

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Itinéraires pour chaque page de votre site ? C’est possible !

Ce tutoriel technique vous permettra de modifier le cadre affiché par défaut sur votre widget. Il n’aura pas d’impact sur les données qu’il contient.

Notez que dès que l’utilisateur bougera la carte, la nouvelle position sera mémorisée la place de celle par défaut (le paramètre étant mis à jour dans l’url).

Si vous souhaitez plutôt faire un filtrage « permanent » sur une zone (centre/rayon), référez-vous à cet autre tutoriel qui vous permettra également de ne pas afficher les données en dehors de la zone définie.

Cas A – Version PHP (recommandé)

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Récupérez ensuite le « bounds », c’est à dire le cadre que vous souhaitez définir. Il s’agit en fait des deux coordonnées géographique représentant le cadre :

    • Latitude/longitude du coin en bas à gauche

    • Latitude longitude du coin en haut à droite

  2. Ajoutez ensuite en paramètre de votre code d’intégration (paramètre « mb_bounds ») les coordonnées au format ci-dessous : [45.8728,-0.630684,45.981457,-0.199471]
  3. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_bounds=[LATITUDE_BAS_GAUCHE,LONGITUDE_BAS_GAUCHE,LATITUDE_HAUT_DROIT,LONGITUDE_HAUT_DROIT]&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Cas B – Version JavaScript

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Récupérez ensuite le « bounds », c’est à dire le cadre que vous souhaitez définir. Il s’agit en fait des deux coordonnées géographique représentant le cadre :

    • Latitude/longitude du coin en bas à gauche

    • Latitude longitude du coin en haut à droite

  2. Ajoutez ensuite en paramètre de votre code d’intégration (paramètre « mb_bounds ») les coordonnées au format ci-dessous : [45.8728,-0.630684,45.981457,-0.199471]
  3. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_bounds : "[LATITUDE_BAS_GAUCHE,LONGITUDE_BAS_GAUCHE,LATITUDE_HAUT_DROIT,LONGITUDE_HAUT_DROIT]"
	}});
</script>
<div id="mb-module-XXX"></div>

Filtrer et centrer un widget sur une zone géographique

Filtrer et centrer un widget sur une zone géographique - via le code d’intégration​

Introduction

Vous souhaitez gagner du temps et ne pas créer un Widget Itinéraires pour chaque page de votre site ? C’est possible !

Une fois votre widget créé et configuré, vous avez la possibilité d’afficher seulement une zone de celui-ci (par rapport à une ville, ou au point géographique d’un camping par exemple). Pour ça, il vous suffit d’ajouter un centre et un rayon en paramètre du code d’intégration qui vous est fournit à la fin de la configuration : suivez les étapes ci-dessous.

Cas A – Version PHP (recommandé)

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>
  1. Ajoutez ensuite en paramètre le centre avec latitude + longitude séparées par un point-virgule (paramètre « mb_center ») et le rayon de la zone sur laquelle le widget doit se centrer (paramètre « mb_radius »).
  2. Le code devrait donc ressembler à ça :
<?php
$code_html = file_get_contents("https://www.modulesbox.com/fr/api/module/XXX?mb_key=XXX&mb_center=LATITUDE;LONGITUDE&mb_radius=DISTANCE_EN_METRE&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Cas B – Version JavaScript

  1. Comme pour une insertion classique, récupérez depuis l’interface le code d’insertion PHP du type :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre le centre avec latitude + longitude séparées par un point-virgule (paramètre « mb_center ») et le rayon de la zone sur laquelle le widget doit se centrer(paramètre « mb_radius »).
  2. Le code devrait donc ressembler à ça :
<script type="text/javascript" src="https://www.modulesbox.com/js/module-loader.js" id="mb-module-loader"></script>
<script type="text/javascript">
	mbLoadModule({ id: XXX, locale: "fr",
	params:{
	    mb_center : "LATITUDE;LONGITUDE",
	    mb_radius : "DISTANCE_EN_METRES"
	}});
</script>
<div id="mb-module-XXX"></div>