Intégrer un widget sur un site IPAOO

Intégrer un Widget Itinéraires sur un site IPAOO

Les étapes pour installer un widget sur iPaoo

  1. Rendez-vous sur iPaoo.fr et connectez-vous à votre compte
  2. Dans la modification de votre site, éditez un bloc « Texte et images », puis cliquez sur le bouton : « HTML »
  3. Si ce n’est pas déjà fait, il est temps de paramétrer votre premier widget sur la page de gestion des Widgets Itinéraires
  4. A la dernière étape de configuration de votre widget, dans la page « Insertion », copiez le code Javascript
  5. Retournez sur iPaoo et collez le code Javascript dans le bloc « Widget HTML » et Enregistrez
  6. Allez sur votre site et rechargez la page où est intégrée le widget.

Comment intégrer les infos touristiques sur un site internet : Le tuto complet !

Comment intégrer les infos touristiques sur un site internet : Le tuto complet !

Vous êtes un gîte, un hôtel, une chambre d’hôtes, un camping ou même un office de tourisme ou tout autre prestataire touristique et vous voulez utiliser les infos touristiques officielles de votre territoire, distribuées par les offices de tourisme, départements, régions… pour les proposer à vos clients ? ( Vous pouvez voir tous les contenus disponibles sur Cirkwi.com dans la partie Circuits & Itinéraires )

Dans ce tuto, je vais vous expliquer comment intégrer très facilement ces contenus touristiques dans les pages réservées aux « Activités Touristiques à Proximité » de votre site internet, grâce au Widget Itinéraires.

Partie 1
Partie 2

…Et si vous n’aimez pas les tutos vidéo, par écrit ça donne ça !

  1. Rendez-vous sur Pro.cirkwi.com → menu « Solutions» → « Widget Itinéraires» → puis cliquez sur « Créez un widget avancé» afin d’accéder au générateur de widget. Vous devez alors vous connecter avec votre compte Cirkwi ou créer un compte.
  2. Votre premier Widget Itinéraires est créé ! Vous arrivez dans la page « PARAMÈTRES » du générateur de widget.
  1. Renseignez le nom de domaine (l’URL) du site où vous voulez intégrer le widget puis cliquez sur OK.
  1. Mettez un titre à votre widget (ce titre n’est pas public, va vous permettre de retrouver et d’identifier votre widget) et cliquez sur « Valider et Poursuivre ».
  1. Vous arrivez dans la page « JEUX DE DONNÉES ». C’est ici que vous allez sélectionner le contenu touristique qui sera affiché sur la page de votre site internet et qui sera mis à jour quotidiennement, et cela, tout au long de l’année, sans que vous n’ayez rien à faire.
  1. Cette partie est importante : activez uniquement les jeux de données thématiques contenant tous les circuits touristiques en France (ou en belgique) et/ou tous les points d’intérêt touristiques en France (ou en Belgique). Nous allons filtrer ces jeux de données à la prochaine étape (par département ou ville par exemple).
  1. Une fois activé, vous retrouvez ces jeux de données en haut de la page, dans la partie « Liste des jeux de données activés ». Nous allons maintenant les filtrer afin d’afficher uniquement les données à proximité de votre établissement ou sur un territoire défini. Cliquez maintenant sur le bouton « Filtrer » d’un jeu de données activé.
  1. Vous arrivez dans la page de filtrage d’un jeu de données. Vous descendez dans la page et vous arrivez sur la partie « Filtrer le contenu ». Cliquez sur « Géographique » et renseignez votre ville de référence dans le champs de recherche. Puis cliquez sur les territoires dont vous souhaitez avoir le contenu touristique. Notez que vous pouvez sélectionner soit par département (ou province) soit par commune. Pour cela, utilisez les boutons « zoomer sur les villes / les départements ».
  1. Si les contenus d’un auteur ne vous plaisent pas, vous pouvez les refuser en allant dans la partie « Auteur » juste en dessous et cliquez sur le « – » pour le faire passer dans la partie « Refusé ». Tous les contenus créés par cet auteur ne seront plus affichés sur votre widget.
  1. Cliquez sur « Valider et Poursuivre » en bas de la page pour enregistrer et revenir à la page précédente. Réitérer l’opération de filtrage sur tous les autres jeux de données que vous avez activés.
  1. Vous arrivez sur la page « PERSONNALISER » dans laquelle vous allez choisir votre template graphique, c’est à dire le graphisme du widget, et le personnaliser pour qu’il s’intègre parfaitement dans votre site internet.
  1. Nous vous conseillons de choisir le template « Tourisme », plus adapté à la diffusion d’informations touristiques comme les circuits ou les points d’intérêt. Cliquez sur « sélectionner ».
  1. Vous arrivez sur la page de personnalisation du graphisme tu template « Tourisme ». A droite, la Prévisualisation de votre widget tel qu’il sera affiché sur votre site. A gauche, toutes les options disponibles qui vous permettront de faire un joli widget adapté à vos besoins. N’oubliez pas d’adapter les couleurs dans la partie « Couleurs ». Evitez d’y mettre toutes les couleurs de l’arc en ciel. Nous vous conseillons de remplacer uniquement la couleur bleu par la couleur principal de votre site. Puis cliquez sur « Valider et Poursuivre ».
  1. Si vous ne l’avez pas encore fait, choisissez votre formule. La formule gratuite est déjà très bien 😊 mais si vous désirez garder les visiteurs sur votre site une formule premium vous conviendra.
  2. Vous arrivez dans la dernière page du générateur, la page « CODE D’INSERTION ». C’est un peu technique dit comme ça, mais c’est très simple ! Tout d’abord, validez les conditions d’utilisation en cochant la case dans le cadre en bas à gauche de la page.
tuto-complet13

   16. Sélectionnez la  technologie que vous utilisez pour votre site internet et suivez les instructions. Pour résumer, il y a 2 codes disponibles :
Le PHP – Ce code est plus performant car plus rapide et se référence mieux. Son petit inconvénient est qu’il doit être intégrer dans le code de la page, ce qui n’a rien de compliqué si vous avez accès aux codes des pages de votre site internet.
Le JAVASCRIPT – Il est un peu moins rapide et moins performant pour le référencement mais il a l’avantage de pouvoir être coller directement dans le CMS de votre site internet, c’est à dire, dans l’administration qui vous permet d’ajouter du contenu sur votre site. Tout le monde peut y arriver 😊

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

Liste des paramètres facultatifs de personnalisation du Widget Itinéraires

Paramètres Objectif Valeur Tuto
mb_list-keywords
Filtrer mon widget par mots-clés

MOT_CLE

mb_list-poi-id

mb_list-circuit-id

Filtrer mon widget par identifiants d’objets

(circuits et/ou POI)

ID_POI

ID_CIRCUIT

mb_sub-categories-poi

Filtrer mon widget par identifiants d’objets

CODE_CATEGORIE

mb_bounds_filter

Filtrer mon widget sur une zone, par bounds

Latitude;Longitude

Distance en mètres

mb_tags

mb_tags_all

Filtrer mon widget grâce aux tags

ETIQUETTE

True/False

mb_center

mb_radius

Filtrer et centrer un widget sur une zone géographique

Latitude;Longitude

Distance en mètres

mb_url_rewrited

mb_url_rewrited_search

mb_url_rewrited_consultation

Faire de la réécriture d'URL

Canevas d'URL

 

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é.

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});[...]

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>