Filtrer mon widget grâce aux tags

Filtrer mon widget grâce aux tags - via le code d'integration

Introduction

Ce tutoriel technique vous permettra de modifier le contenu affiché sur votre Widget Itinéraires en fonction de tags personnalisés. Ces tags sont ceux que vous utilisez lors de la création de vos données (circuits et points d’intérêt) depuis votre back-office Cirkwi.

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 les tags séparés par un point-virgule (paramètre mb_tags) ainsi que la condition de recherche (paramètre mb_tags_all) :

    • Si mb_tags_all vaut true, seuls les objets qui contiennent tous les tags seront affichés.

    • Si mb_tags_all vaut false, les objets contenant au moins un des tags seront affichés.

  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_tags=bretagne_coupdecoeur;bretagne_fluvial&mb_tags_all=true&".$_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 JavaScript 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 les tags séparés par un point-virgule (paramètre mb_tags) ainsi que la condition de recherche (paramètre mb_tags_all) :

    • Si mb_tags_all vaut true, seuls les objets qui contiennent tous les tags seront affichés.

    • Si mb_tags_all vaut false, les objets contenant au moins un des tags seront affichés.

  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_tags : "bretagne_coupdecoeur;bretagne_fluvial",
	    mb_tags_all : "true"
	}});
</script>
<div id="mb-module-XXX"></div>

Filtrer mon widget sur une zone rectangulaire, par bounds – via le code d’intégration

Filtrer mon widget sur une zone rectangulaire, par bounds – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires : plus précisément sur votre carte en fonction d’un « bounds » représentant le rectangle à filtrer.

Les coordonnées à à renseigner correspondent à deux points du rectangle. Le premier en bas à gauche, et le second en haut à droite.

Cas A – Version PHP (recommandé)

  1. 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;
?>
  1. Ajoutez ensuite un paramètre mb_bounds_filter qui correspond au bounds au format :

latitude_min;longitude_min;latitude_max;longitude_max
(coordonnées séparées par des points-virgules)

  1. 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_filter=46.400935;1.564178;47.318345;4.200897&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Votre carte possède maintenant uniquement les parcours/poi qui sont situés dans le rectangle choisi.

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait 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"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite un paramètre mb_bounds_filter qui correspond au bounds au format :

latitude_min;longitude_min;latitude_max;longitude_max
(coordonnées séparées par des points-virgules)

  1. 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_filter : "46.400935;1.564178;47.318345;4.200897"
	}});
</script>
<div id="mb-module-XXX"></div>

Votre carte possède maintenant uniquement les parcours / points d’intérêt qui sont situés dans le rectangle choisi.

Filtrer mon widget par catégorie – via le code d’intégration

Filtrer mon widget par catégorie – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires, plus précisément sur votre carte par sous-catégories de points d’intérêt.

Cas A – Version PHP (recommandé)

  1. 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;
?>
  1. Ajoutez ensuite en paramètre la liste de points d’intérêt que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_sub-categories-poi”).
  2. La liste des différentes catégories & sous-catégories se trouvent ici : https://ws.cirkwi.com/tuto/categories.php
  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_sub-categories-poi=1;2&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Votre carte possède maintenant uniquement les POI qui sont dans la catégorie 1 ou 2.

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait 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"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre la liste des points d’intérêt que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_sub-categories-poi”).
  2. La liste des différentes catégories & sous-catégories se trouve ci-dessous, ou ici : https://ws.cirkwi.com/tuto/categories.php
  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_sub-categories-poi" : "1;2"
	}});
</script>
<div id="mb-module-XXX"></div>

Dans l’exemple ci-dessus, la carte affichera uniquement les points d’intérêts qui sont dans la catégorie 1 OU 2.

Filtrer mon widget par identifiants d’objets – via le code d’intégration

Filtrer mon widget par identifiants d’objets – via le code d’intégration

Introduction

Ce tutoriel technique vous permettra de filtrer le contenu affiché dans votre Widget Itinéraires; plus précisément sur votre carte en fonction d’identifiants de parcours & de points d’intérêt (POIs).

Cas A – Version PHP (recommandé)

  1. 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;
?>
  1. Ajoutez ensuite en paramètre la liste d’identifiants que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-circuit-id” pour filtrer parmi les parcours, « mb_list-poi-id » pour filtrer parmi les points d’intérêts).

  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_list-keywords=nancy;porte&".$_SERVER["QUERY_STRING"]);
echo $code_html;
?>

Désormais votre carte affiche uniquement les parcours / points d’intérêts qui sont présents dans le(s) paramètre(s) renseigné(s).

Cas B – Version JavaScript

  1. Récupérez le code d’insertion JavaScript depuis votre interface de gestion de widgets, il devrait 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"});
</script>
<div id="mb-module-XXX"></div>
  1. Ajoutez ensuite en paramètre la liste d’identifiants que vous souhaitez filtrer, séparés par un point-virgule (paramètre “mb_list-circuit-id” pour filtrer parmi les parcours, « mb_list-poi-id » pour filtrer parmi les points d’intérêts).
  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_list-poi-id : "78002;59980",
	    mb_list-circuit-id : "12345;67891"
	}});
</script>
<div id="mb-module-XXX"></div>

Désormais votre carte affiche uniquement les parcours / points d’intérêts qui sont présents dans le(s) paramètre(s) renseigné(s).

Les grands principes du Mode Avancé en 5 étapes

Les grands principes du Mode Avancé en 5 étapes

Pro.cirkwi.com vous propose un générateur de widgets qui permet de sélectionner et filtrer des jeux de données, de sélectionner et personnaliser un template graphique puis de l’intégrer dans une page d’un site internet. La configuration d’un widget se passe en 5 étapes :

Avant tout

Rendez-vous sur la page « Intégrez vos itinéraires » dans le menu « Solutions », cliquez sur « Créer un module 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.

Étape 1 : Paramètres

Indiquez les paramétrages de base de vos widgets : le nom de domaine destinataire, le titre et la description de votre widget…

Étape 2 : Personnaliser

Sélectionnez le template graphique qui correspond le plus à vos besoins. Vous serez redirigé automatiquement vers la page pour personnaliser la mise en page et ajouter des fonctionnalité à votre widget. Une prévisualisation de votre widget vous permet de suivre les modifications en direct.

Étape 3 : Jeux de données

Recherchez, activez et filtrez les jeux de données que vous souhaitez diffuser dans votre widget. Vous pouvez naviguer, soit dans les jeux de données créés par leurs auteurs, soit dans les jeux de données thématiques regroupant des données provenant de sources différentes et packagés par Cirkwi.

Étape 4 : Commande

Si il y a des commandes supplémentaires, validez les sur cette page. Si vous avez ajouté des fonctionnalités payantes à votre widget, vous devrez régler votre commande avant que celles-ci soient actives. Il ne vous reste plus qu’à accepter les conditions d’utilisation pour accéder à la dernière étape.

Étape 5 : Code d'insertion

Validez les conditions d’utilisations, choisissez la technologie que vous utilisez (PHP, Javascript, WordPress…) puis copiez/collez le code d’insertion dans les pages de votre site.

Et voilà !

Une fois votre widget intégré dans votre site, vous pouvez modifier et ajuster les configurations. Les modifications se feront en direct sur votre site.
Vous n’avez pas tout compris ? Pas de problème, consultez le tuto vidéo ou accédez au tuto COMPLET du mode avancé.

Pour plus d’aide, rendez-vous sur la page Support.

Intégrer un widget sur Wix

Intégrer un widget sur Wix

Après avoir configuré votre widget, vous arrivez à la dernière étape où vous devez copier le code d’intégration dans l’administration de votre site Wix. 

Wix permet d’intégrer un widget aussi bien avec le code JavaScript qu’avec le code PHP. Nous vous conseillons néanmoins de faire l’intégration en JavaScript. Voici quelques explications qui vous permettront d’arriver à vos fins facilement :

Vous souhaitez plus d’informations sur les widgets ?

 

Intégrer avec le code Javascript

Etape 1 : Récupérer le code d'intégration

Cas 1: Vous souhaitez intégrer un widget Itinéraires (pro.cirkwi.com)

  • Dans l’étape du code d’insertion, cliquez sur « Le code d’insertion en Javascript »
  • Sélectionnez et copiez le code (ctrl C ou edition/copier)
code-insertion-js
Étape 2 : sur WIX
  1. Maintenant, allez sur le tableau de bord puis dans la section My Site appuyez sur « modifier ».

2. Vous allez être redirigé sur l’administration de votre site Wix (une adresse qui ressemblerait à editor.wix.com/monsite).

3. En haut à gauche de la page, sélectionnez la page sur laquelle vous voulez intégrer le widget.

4. Appuyez sur le bouton « Ajouter » puis sur le bouton avec le symbole « + ».

5. Cliquez ensuite sur « Intégration », « intégration personnalisé » puis « intégrer un widget ». Déplacez l’encadré où vous voulez sur la page agrandissez/réduisez l’encadré comme bon vous semble.

6. Cliquez sur « saisir code ».

7. Une fenêtre s’ouvre en bas a droite de votre page. Sélectionnez « Code », coller le code d’intégration en JavaScript, puis cliquez sur « Mettre à jour ».

8. Voici un aperçu de que vous devriez obtenir :

Widget Itinéraires : Vous pouvez agrandir le widget en cliquant sur les bords et en les glissant vers le bas de la page.

9. Une fois les bords ajustés, vous devriez avoir un rendu comme suit :

Widget Itinéraires :

Intégrer un widget sur Jimdo

Intégrer un widget sur Jimdo

Après avoir configuré votre widget, vous arrivez à la dernière étape où vous devez copier le code d’intégration dans l’administration de votre site Jimdo, soit en PHP soit en Javascript. Jimdo permet d’intégrer un widget aussi bien avec le code Javascript qu’avec le code PHP. Nous vous conseillons néanmoins de faire l’intégration en JavaScript. Voici quelques explications qui vous permettront d’arriver à vos fins facilement :

Intégrer avec le code Javascript

Etape 1 : Récupérer le code d’intégration
  • Sur pro.cirkwi.com, dans l’étape du code d’insertion, cliquez sur « Le code d’insertion en Javascript ».
  • Sélectionnez et copiez le code (ctrl C ou edition/copier).
code-insertion-js
Étape 2 : sur Jimdo

Attention: votre site internet doit être créer via l’option créator, le mode « expert », pour permettre l’intégration du widget. 

  1. Maintenant, allez sur le tableau de bord puis dans la section My Site appuyez sur « modifier ».
  2. Vous allez être redirigé sur l’administration de votre site Jimdo (une adresse qui ressemblerai à www.monsite.jimdo.com).
  3. Allez sur la page où vous souhaitez intégrer le widget.
integration-jimdo

         4. Cliquez sur « Ajouter un élément ».

integration-jimdo-ajouter-element

        5. Cliquez sur « Éléments supplémentaires et services externes ».

integration-jimdo-ajouter-element2

          6. Cliquez sur « Widget HTML ».

integration-jimdo-ajouter-element3

         7. Une fenêtre s’ouvre, c’est le moment de coller votre code d’insertion en Javascript. Cliquez ensuite sur « Enregistrer ».

integration-jimdo-ajouter-element4

Après un cours temps de chargement, voici le résultat que vous devriez obtenir:

integration-jimdo-resultat

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 en ligne.

Installer un widget sur un site DRUPAL 7 et 8

Installer un widget sur un site DRUPAL 7 et 8

  1. Rendez-vous sur votre administration Drupal et connectez-vous à votre compte.
  2. Installez le module « PHP filter ».
    Vous constaterez peut-être un message d’avertissement indiquant que ce module n’est pas couvert par la politique de conseil en sécurité de Drupal. En effet, puisqu’il vient modifier le fonctionnement initial de Drupal. Cependant, il est nécessaire afin que celui-ci puisse interpréter le code d’insertion PHP de votre widget Cirkwi dans le corps d’un article ou d’une page.
  3. Si ce n’est pas déjà fait, il est temps de paramétrer votre premier widget sur Pro.cirkwi.com.
  4. A la dernière étape de configuration de votre widget, dans la page « Insertion », copiez le code PHP.
  5. Retournez sur Drupal, dans la modification d’une page de votre site et choisissez le forme de texte « PHP code».
  6. Collez le code PHP où vous souhaitez ajouter le widget. Enregistrez.
  7. Allez sur votre site et rechargez la page où est intégrée le widget.

Comment créer ma clé Google ?

Comment créer ma clé Google ?

Etape 1

Tout d’abord connectez-vous à votre compte Google Cloud Platform et créez un projet : grâce au menu du haut « Sélectionnez un projet ».

Etape 2

Vous devez ensuite activer 3 APIs/services depuis la bibliothèque du tableau de bord :

Etape 3

Créez ensuite un identifiant. Vous avez besoin d’une Clé API : https://console.cloud.google.com/apis/credentials

  • Si vous créez cette clé pour votre widget :
    Vous pouvez ensuite la renseigner dans la partie personnalisation lors de la configuration du widget.
    Si vous le souhaitez, vous pouvez restreindre l’utilisation de votre clé à un site web ou une IP.
  • Si vous créez cette clé pour votre générateur de widgets ou votre application mobile :
    La clé obtenue devra être communiquée à votre contact projet ou à l’adresse support@cirkwi.com pour être activée sur votre compte.
    Attention pour un générateur vous ne devez pas mettre de restriction sur l’IP ou l’url.

Pas le temps ?

Nous vous proposons de créer et configurer la clé pour vous ! Si le forfait d’accompagnement vous intéresse, n’hésitez pas à nous contacter à l’adresse support@cirkwi.com ( à partir de 500€ TTC).

Important

Après un certain seuil d’utilisation mensuel, les services et APIs Google peuvent devenir payants. Les tarifs sont disponibles à cette adresse.

Vous avez la possibilité de maîtriser votre budget en configurant votre compte de facturation Google. Il vous permet de définir un budget limite.