Réponses - Tous les candidats

Widget "Responsive Réponses - Tous les candidats"
Présentation
1
Ce Widget permet à un internaute de consulter les réponses des candidat(e)s d'une région donnée, directement depuis votre site internet.

Ce widget est "responsive", c'est à dire que sa largeur s'adaptera en fonction de celle dont vous disposez sur votre site.
De nombreuses options de personnalisation vous sont proposées, que ce soit au niveau des couleurs ou des polices du widget. Il vous est également possible de définir le nombre de dialogues apparaissant par page.

ÉTAPE 1 (nécessaire) - Liez le widget avec votre identifiant

L'url de base de ce widget est la suivante :
https://regionales2015.questionnezvoscandidats.org/iframe-dialogue/121829
Le numéro à la fin de l'url correspond à une région donnée (ici, l'Île de France)
Remplacez ce numéro par celui correspondant à la région souhaitée. Vous le trouverez grâce à la liste ci-dessous :
 
 
  • Alsace, Champagne-Ardenne et Lorraine : 162361
  • Aquitaine, Limousin et Poitou-Charentes : 162358
  • Auvergne et Rhône-Alpes : 162359
  • Bourgogne et Franche-Comté : 162357
  • Bretagne : 121951
  • Centre-Val-de-Loire : 162356
  • Corse : 121985
  • Guadeloupe : 83810
  • Guyane : 86612
  • Île-de-France : 121829
  • Languedoc-Roussillon et Midi-Pyrénées : 162360
  • Martinique : 85702
  • Nord-Pas-de-Calais et Picardie : 162354
  • Normandie : 162355
  • Pays-de-la-Loire : 121963
  • Provence-Alpes-Côte d'Azur : 121984
  • Réunion : 85482

 

ÉTAPE 2 (optionnelle) – Personnalisez l’affichage du widget

Il est possible de renseigner plusieurs paramètres optionnels qui personnaliseront l'affichage de votre widget.
Voici une liste de ces différents paramètres et leur description.

 
Polices
Nom du paramètre Description Valeurs possibles Comportement si paramètre non renseigné
police_header Change la police des éléments suivants:
  • Les titres
  • Le nom des candidat(e)s et le libellé "[Nom Prénom de l'internaute] à [Nom(s) du / des candidat(e)s]"
  • 0: Roboto
  • 1: Yanone Kaffeesatz
  • 2: Source Sans Pro
  • 3: Franklin Gothic Extra-Condensed
  • 4: Arial
  • 5: Bitter
  • 6: Oswald
  • 7: Tahoma
  • 8: Arial Black
  • 9: Novecento Medium
  • 10: Georgia
  • 11: Share
Utilisation de la police Arial
police_questions Change la police des éléments suivants:
  • Les différents boutons
  • La date, les listes / alliances / partis politiques et les questions / réponses
  • Le libellé "En partenariat avec questionnezvoscandidats.org"
  • 0: Roboto
  • 1: Yanone Kaffeesatz
  • 2: Source Sans Pro
  • 3: Franklin Gothic Extra-Condensed
  • 4: Arial
  • 5: Open Sans
  • 6: Tahoma
  • 7: Ubuntu
  • 8: Arimo
Utilisation de la police Arial
 
 
Couleurs
Nom du paramètre Description Valeurs possibles Comportement si paramètre non renseigné
bordures Si renseigné, ajoute une bordure haute et basse aux extrémités du widget N'importe quelle valeur hexadécimale
Omettre le # du début
Exemple: FF0000 pour la couleur rouge
Les bordures sont masquées
color_header Change la couleur des éléments suivants:
  • Les titres
  • Le nom des candidat(e)s
N'importe quelle valeur hexadécimale
Omettre le # du début
Exemple: FF0000 pour la couleur rouge
Utilisation de la couleur 4C4C4C
color_questions Change la police des éléments suivants:​
  • La date, les listes / alliances / partis politiques et les questions / réponses
  • Le libellé "En partenariat avec"
N'importe quelle valeur hexadécimale
Omettre le # du début
Exemple: FF0000 pour la couleur rouge
Utilisation de la couleur 4C4C4C
color_link Change la couleur de tous les liens et boutons N'importe quelle valeur hexadécimale
Omettre le # du début
Exemple: FF0000 pour la couleur rouge
Utilisation de la couleur E05731
color_fond Change la couleur du fond du widget N'importe quelle valeur hexadécimale
Omettre le # du début
Exemple: FF0000 pour la couleur rouge

OU

Pour un fond transparent, false
Utilisation de la couleur F7F7F7
fond_opacite Change l'opacité de la couleur définie avec le paramètre color_fond
Pour que ce paramètre fonctionne, color_fond doit être renseigné (voir au dessus)
Un chiffre entre 0 et 100
correspondant au pourcentage d'opacité souhaité
fond 100% opaque
 
 
Autres
Nom du paramètre Description Valeurs possibles Comportement si paramètre non renseigné
partnership Permet d'afficher ou non la mention du partenariat avec questionnezvoscandidats.org
  • 0: partenariat affiché
  • 1: partenariat masqué
Le partenariat est affiché
dialog_per_page Permet de définir le nombre de dialogues affichés par page N'importe quel nombre entier Le widget affiche 10 dialogues par page


Afin de personnaliser votre widget, ajoutez "?" à la fin de l'url de base.
Ajoutez les différents paramètres souhaités dans l'url en respectant ce format: [Nom du paramètre]=[Valeur].
Ajoutez "&" entre chaque paramètre.

Exemple : 
https://regionales2015.questionnezvoscandidats.org/iframe-dialogue/121829?bordures=e05731&police_header=8&police_questions=7&dialog_per_page=1
Reportez-vous à cette / ces image(s) pour visualiser l'incidence de tous ces paramètres: 

ÉTAPE 3 (nécessaire) – Implémentez votre url dans une balise iFrame

Une fois votre url personnalisée, insérez la balise iFrame suivante dans le code de votre page internet, en remplaçant URL PERSONNALISÉE par votre url, et en modifiant la largeur (paramètre "width") en fonction de celle dont vous disposez sur votre page :
<iframe frameborder="0" height="1000" id="iframe-qvc" scrolling="no" src="URL PERSONNALISÉE" width="XXX"></iframe>

Afin que la hauteur du widget puisse changer dynamiquement en fonction du contenu affiché, il est nécessaire que vous mettiez en place un code Javascript.
Ajoutez le code suivant dans un fichier javascript (.js) qui sera appelé par votre page contenant le widget, ou bien directement dans le code de votre page :
<script type="text/javascript">
function receiveSize(e){
      document.getElementById("iframe-qvc").style.height = e.data + 'px';
}
window.addEventListener("message", receiveSize, false);
</script>


Pour ajouter la police de votre site, ou pour toute autre question, n’hésitez pas à nous contacter : [email protected]