Widgets Itea

Transcription

Widgets Itea

Utilisation
Des Widgets
ITEA
Widgets ITEA
21/07/2015
Sommaire
1
Introduction ...................................................................................................................................3
2
Intégration sur votre site web.......................................................................................................5
2.1
Intégration du widget en JavaScript ............................................................................................5
2.2
Exemples ....................................................................................................................................6
2.3
Paramètres iframe et avecCss ....................................................................................................6
2.4
Paramètre numéro chambre .......................................................................................................7
2.5
Intégration du widget directement en IFrame ..............................................................................8
2.6
Langues ......................................................................................................................................8
3
Widget Avis ....................................................................................................................................9
3.1
Mode iframe ................................................................................................................................9
3.1.1
Mise en place ..................................................................................................9
3.1.2
Exemple ..........................................................................................................9
3.2 Mode non iframe .......................................................................................................................10
3.2.1
3.2.2
Mise en place ................................................................................................ 10
Exemple ........................................................................................................ 10
ITEA – 9bis Bd Emile Romanet – 44100 Nantes
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 2 sur 10
Widgets ITEA
21/07/2015
1 Introduction
Les Widgets ITEA permettent d'afficher les disponibilités et/ou de donner la possibilité de réserver un
hébergement à partir de n'importe quel site internet. Les widgets disponibles sont les suivants :



Le Widget de disponibilité, qui permet d'afficher le calendrier de disponibilité d'une structure.
Le Widget de réservation, 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 de
l’hébergement.
Le Widget des avis, qui permet d’afficher les avis pour une structure.
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 3 sur 10
Widgets ITEA
21/07/2015
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 4 sur 10
Widgets ITEA
21/07/2015
2 Intégration sur votre site web
Voici la procédure à suivre pour inclure le widget dans une page de votre site internet
Note : si votre site est sécurisé (https) vous pouvez remplacer les appels http:// par https://
2.1 Intégration du widget en 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"></script>
A l'endroit où l'on souhaite inclure le widget, inclure le code suivant :
<script type="text/javascript">
var parametresWidget = {
key : "REMPLACER_PAR_LA_VALEUR",
numGite : "REMPLACER_PAR_LA_VALEUR",
widget : "REMPLACER_PAR_LA_VALEUR",
periode : "REMPLACER_PAR_LA_VALEUR",
ope : "REMPLACER_PAR_LA_VALEUR",
langue : "REMPLACER_PAR_LA_VALEUR",
affichage : "REMPLACER_PAR_LA_VALEUR",
iFrame : "REMPLACER_PAR_LA_VALEUR",
avecCss : "REMPLACER_PAR_LA_VALEUR",
numChambre : "REMPLACER_PAR_LA_VALEUR",
clicsurcalendrier : "REMPLACER_PAR_LA_VALEUR"
} ;
widgetIteaGL(parametresWidget);
</script>
Les deux premiers paramètres sont obligatoires. Les autres, en gris, sont facultatifs et permettent une
souplesse d'intégration sur une page. Ne pas les mettre s’ils ne vous servent pas.
Définition des paramètres :
 key : La clé, transmise par ITEA pour pouvoir utiliser le widget
 numGite : Le numéro de la structure pour laquelle on souhaite afficher les informations
dans le widget.
 widget : Le widget souhaité. Si non renseigné, le widget de réservation sera proposé. Trois
valeurs sont disponibles :
 dispo : Affiche le widget de disponibilités
 resa : Affiche le widget de réservation
 avis : Affiche le widget des avis
 periode : à renseigner dans le cas du widget 'dispo' : 'annuelle'.Si non renseigné, le calendrier est
mensuel
 ope : opérateur par lequel la demande de réservation doit être faite.
 langue : Par défaut si le paramètre n’est pas renseigné, la langue d’affichage est la langue du
navigateur. Les autres valeurs possibles sont UK,DE,ES,IT,NL.
 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).
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 5 sur 10
Widgets ITEA
21/07/2015



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.
numChambre : Spécifique aux widgets de disponibilité et de réservation. Permet pour une
chambre d'hôte de spécifier quelle chambre afficher. Par défaut aucune chambre n'est
sélectionnée.
clicsurcalendrier : Ce paramètre n’est utile que sur le widget de dispo. Si ce paramètre est
présent et renseigné à « 1 », le clic sur le calendrier redirige vers le script de réservation.
Exemples
Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher le widget de résa de la
structure n°G123456, on utilisera le code suivant :
key : "aq12zs34ed56",
numGite : "G123456"
} ;
</script>
Pour afficher les avis :
numGite : "G123456",
widget : "avis"
} ;
</script>
2.2 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.
Exemple sans iframe (repris de la partie 2.3) :
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 6 sur 10
Widgets ITEA
21/07/2015
iFrame : 0
} ;
</script>
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.3) :
iFrame : 0,
avecCss : 0
} ;
</script>
2.3 Paramètre numéro chambre
Ce paramètre est à renseigner pour afficher automatiquement une chambre précise dans le widget.
C'est donc un paramètre qui ne servira que pour les chambres d'hôte.
Les valeurs permises sont de 1 à 5 (le numéro de la chambre).
Exemple pour la chambre 2 d'une chambre d'hôte :
numChambre : 2
} ;
</script>
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 7 sur 10
Widgets ITEA
21/07/2015
2.4 Intégration du widget directement en IFrame
Dans certains cas, il n’est pas possible d’intégrer du code javascript sur votre site internet. Il vous est
alors possible d’intégrer vos widgets à 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
resa : 435
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 :
resa : 450
resa : 390
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_dispo.html?key=CLEF &numGite=REFERENCE&nbmois=NBMOIS&mo
de=WIDGET&dispo=DISPO&ope=OPE&numChambre=NUMCHAMBRE
Les valeurs à renseigner :







CLEF : La clef, fournit par ITEA pour pouvoir utiliser le widget.
REFERENCE : La référence de l’hébergement
NBMOIS : Le nombre de mois à afficher (Maximum 3)
WIDGET : La valeur à indiquer est widget. Elle est obligatoire.
DISPO : A renseigner par « 1 » seulement si on ne veut pas d'accès au script de réservation
OPE : L'opérateur que l'on veut indiquer pour les réservations provenant du widget (par défaut
l'opérateur est « widgprop »).
NUMCHAMBRE : Le numéro de la chambre que l'on veut afficher. Par défaut aucune chambre
n'est sélectionnée (on affiche la disponibilité globale).
Exemple :
Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher les disponibilités de la
structure n°G123456 sur 3 mois
<iframe width="620" height="215" frameborder="0" border="0"
src="http://widget.itea.fr/widget_itea_dispo.html?key=aq12zs34ed56&numGite=G1
23456&nbMois=3&mode=widget">
</iframe>
2.5 Langues
Le widget s’adapte automatiquement à la langue préférée du navigateur de l’internaute naviguant
sur votre site. Les langues disponibles sont : Français, Anglais, Allemand, Espagnol, Hollandais, Italien.
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 8 sur 10
Widgets ITEA
21/07/2015
3 Widget Avis
Pour l’affichage du widget avis, deux modes d’intégrations possibles : soit le iframe, soit le mode non
iframe.
3.1 Mode iframe
3.1.1 Mise en place
Ce mode utilise une iframe. Voici le code à intégrer :
<iframe width="LARGEUR" height="HAUTEUR" scrolling="yes" frameborder="0" border="0" src="URL">
</iframe>
Les valeurs à définir :
 LARGEUR : Indiquez ici la largeur de l’iframe exprimée en pixels, par exemple width="600".
Une valeur minimale de 600 est conseillée.
 HAUTEUR : Indiquez ici la largeur de l’iframe exprimée en pixels, par exemple height="400".
Une valeur minimale de 400 est conseillée.
 URL : Il s’agit ici de l’adresse internet qui permet l’affichage des avis, la voici :
http://widget.itea.fr/widget_itea_avis.html?key=CLEF&num=REFERENCE


3.1.2 Exemple
Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher les avis de la structure
n°G123456 :
<iframe width="600" scrolling="yes" height="400" frameborder="0" border="0"
src="http://widget.itea.fr/widget_itea_avis.html?key=aq12zs34ed56&numgite=G12
3456" >
</iframe>
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 9 sur 10
Widgets ITEA
21/07/2015
3.2 Mode non iframe
3.2.1 Mise en place
Ce mode n’utilise pas de iframe. Pour intégrer dans ce mode, voici le code à intégrer :
<div id="widget_itea_avis-CLEF-REFERENCE" ></div>
<script type="text/javascript">widgetItea("avis");</script>


Si vous souhaitez définir vous-même le style du widget avis, vous pouvez choisir de ne pas importer le
fichier CSS par défaut. Pour cela dans la div, il faut ajouter l’attribut data-css=’0’ (voir exemple).
3.2.2 Exemple
Par exemple, si on possède la clef aq12zs34ed56, et que l'on souhaite afficher les avis de la structure
n°G123456 :
<div id="widget_itea_avis-aq12zs34ed56-G123456"></div>
widgetItea('avis');
</script>
Le même exemple mais sans importer le fichier CSS par défaut :
<div id="widget_itea_avis-aq12zs34ed56-G123456" data-css="0"></div>
widgetItea('avis');
</script>
Tél. : 02.40.16.16.00 – Fax : 02.40.16.16.19
Page 10 sur 10

Widgets Itea

Transcription

Documents pareils

Mode d`emploi

noyade interdite

Tutoriel pour intégrer une vidéo dans un blog

Annexe 4 : Créer un widget de type flux RSS

ajout d`un post-it - Premiers pas Konica Minolta

Mapa Web - Alimentación.es

Plateforme de consultations juridiques AVOCAT.FR

dreamweaver perfectionnement

Tutoriel 2

Le restaurant du futur Support sécurisé sur-mesure pour