Utilisation Des Widgets Gestprod ITEA
Sommaire 1 Introduction... 3 2 Intégration sur votre site web (Javascript)... 4 2.1 Inclusion du fichier javascript... 4 2.2 Appel de la fonction javascript... 4 2.3 Paramètres iframe et aveccss... 5 3 Intégration des disponibilités sur votre site web (iframe)... 7 3.1 Insérer le code... 7 3.2 Exemple... 8 Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 2 sur 8
1 Introduction Les Widgets ITEA permettent d'afficher les disponibilités et/ou de donner la possibilité de réserver un hébergement ou un produit à partir de n'importe quel site internet. Un widget de réservation est disponible : Il qui permet à l'utilisateur de choisir une date de réservation, puis de cliquer sur un bouton «Réserver» qui le redirigera vers une page de réservation du produit. Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 3 sur 8
2 Intégration sur votre site web (Javascript) Voici la procédure à suivre pour inclure le widget dans une page de votre site internet : 2.1 Inclusion du fichier javascript Dans la page HTML où l'on veut inclure le widget, placer le code suivant entre les balises <HEAD> et </HEAD> du code HTML : <script type="text/javascript" src="http://widget.itea.fr/js/itea_widget.js"> 2.2 Appel de la fonction javascript A l'endroit où l'on souhaite inclure le widget, inclure le code suivant ( Les éléments en gris sont optionnels) : key : "REMPLACER_AVEC_UNE_VALEUR", codeprod : "REMPLACER_AVEC_UNE_VALEUR", langue : "REMPLACER_AVEC_UNE_VALEUR", ope : "REMPLACER_AVEC_UNE_VALEUR", widget : "REMPLACER_AVEC_UNE_VALEUR", photo : "REMPLACER_AVEC_UNE_VALEUR", prix : "REMPLACER_AVEC_UNE_VALEUR", text : "REMPLACER_AVEC_UNE_VALEUR", iframe : "REMPLACER_AVEC_UNE_VALEUR", aveccss : "REMPLACER_AVEC_UNE_VALEUR", } widgetiteagp( parametreswidget ); En mettant les valeurs voulues à la place de "REMPLACER_AVEC_UNE_VALEUR". Définition des paramètres : key : La clé, transmise par ITEA pour pouvoir utiliser le widget codeprod : le code du produit pour lequel on souhaite afficher les informations langue : la langue dans laquelle on veut générer le widget (UK,DE,ES,IT,NL).Par défaut la langue est le français. ope : opérateur par lequel la demande de réservation doit être faite. widget : le type de widget que l on veut afficher : par défaut le widget généré est le widget de réservation (resagp). Deux valeurs possibles dispogp et resagp. photo : permet d afficher la photo principale du produit. Une seule valeur autorisée : 1. Si non renseigné, il n y aura pas de photo. prix : permet d afficher le prix minimum du produit : Une seule valeur autorisée : 1. Si non renseigné le prix ne s affichera pas. text : permet d afficher un texte personnalisé en bas du widget. Saisissez le texte que vous désirez pour le voir affiché. Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 4 sur 8
iframe : par défaut si ce paramètre n est pas renseigné, le widget s affichera via une iframe. Si vous voulez éviter de générer une iframe, il faut renseigner ce paramètre à 0 (zéro). aveccss : par défaut, le css utilisé est celui fourni par le widget. Si ce paramètre est renseigné à 0 (zéro), le css par défaut n'est pas chargé, ce qui vous permet d'intégrer le widget avec votre propre css. L exemple le plus simple sera : } widgetiteagp( parametreswidget ); On va afficher dans ce cas : 2.3 Paramètres iframe et aveccss Vous pouvez choisir d afficher votre widget dans une iframe (c est le mode par défaut) ou d afficher directement le code HTML du widget dans votre site ce qui permet de pouvoir éditer le style du widget vous-même (ça n est pas possible lorsqu il est intégré dans une iframe). Le paramètre aveccss permet donc de choisir si vous voulez importer le fichier de style par défaut du widget ou bien d appliquer votre propre style. Rappelez-vous que le paramètre aveccss ne fonctionne que si le mode iframe est désactivé. Le but de ces deux paramètres est d avoir la gestion complète du style du widget sur votre site, vous pourrez donc l intégrer comme vous le souhaitez en choisissant la taille et les couleurs. Pour désactiver le mode iframe, il faut définir le paramètre iframe à 0. Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 5 sur 8
Exemple sans iframe (repris de la partie 2.2) : iframe : 0 } widgetiteagp( parametreswidget ); Comme pour le paramètre iframe, pour désactiver la prise en compte du fichier CSS il suffit de définir le paramètre à 0. Exemple sans iframe et sans CSS (repris de la partie 2.2) : iframe : 0, aveccss : 0 } ; widgetiteagp(parametreswidget); Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 6 sur 8
3 Intégration des disponibilités sur votre site web (iframe) 3.1 Insérer le code Certaines fois il n est pas possible d intégrer du code javascript sur votre site internet. Il vous est alors possible d intégrer vos disponibilités à l aide d une iframe. Voici le code à intégrer : <iframe frameborder="0" border="0" width="largeur" height="hauteur" src="url"></iframe> Les valeurs à définir : LARGEUR : Indiquez ici la largeur de l iframe exprimée en pixels, par exemple width="215". En fonction du nombre de mois affiché, vous indiquerez les valeurs suivantes : 1 mois : dispo : 230 resa : 230 2 mois : dispo : 435 resa : 435 3 mois : dispo : 640 resa : 640 HAUTEUR : Indiquez ici la largeur de l iframe exprimée en pixels, par exemple height="215". En fonction du nombre de mois affichés, vous indiquerez les valeurs suivantes : 1 mois : dispo : 310 resa : 450 2 mois : dispo : 290 resa : 390 3 mois : dispo : 280 resa : 390 URL : Il s agit ici de l adresse internet qui permet l affichage du planning, la voici : http://widget.itea.fr/widget_itea_resa.html?key=clef&code_prod=reference&nbmois=nbmois&mo de=widget&ope=ope&photo=photo&prix=prix&text=texte Les valeurs à renseigner : CLEF : La clef, fournit par ITEA pour pouvoir utiliser le widget. REFERENCE: Le code du produit pour lequel on souhaite afficher les informations dans le widget. OPE : opérateur par lequel la demande de réservation doit être faite. Remplir à vide si pas d'opérateur LANGUE : langue du widget : laisser vide ou non renseigné pour utiliser le widget en français. Pour changer de langue, utiliser un des codes suivant (en majuscule) : UK : Anglais DE : Allemand ES : Espagnol NL : Hollandais IT : Italien PHOTO : si renseigné à 1, on affichera la photo du produit. PRIX : si renseigné à 1, on affichera le prix mini du produit TEXTE : le texte que l on veut ajouter à la fin du widget. Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 7 sur 8
3.2 Exemple Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher les disponibilités du produit IHOI1: Avec une iframe : <iframe width="620" height="215" frameborder="0" border="0" src="http://widget.itea.fr/widget_itea_dispo.html?key=aq12zs34ed56&code_prod= IHOI1&nbmois=3&mode=widget"> </iframe> En javascript : Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher les disponibilités du produit IHOI1 de manière mensuelle, on utilisera le code suivant : } ; widgetiteagp(parametreswidget); langue : "UK", photo : 1, text : "En partenariat avec les gites de France" } ; widgetiteagp( parametreswidget ); Tél. : 02.40.16.16.00 Fax : 02.40.16.16.19 Page 8 sur 8