Pour ajouter le module Web de ProPlanner sur un site existant, il suffit d’insérer un morceau de code. Le développeur du site Web trouvera ci-dessous les informations nécessaires à cet effet.
Pour voir le plugin Web en action et voir quelques exemples de code, visitez notre vitrine de plugins Web.
Code à ajouter
HTML à insérer dans le code du site Web :
<div id="proplanner-plugin"> </div>
Script à ajouter :
<script type="text/javascript">
var ProPlannerConfig = {
columns : 3,
lang : "fr",
key: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
startTime: "09:00",
endTime: "19:00"
};
</script>
<script defer type="text/javascript" src="https://v6.proplanner.be/embed/plugin"></script>
Les paramètres de configuration peuvent être adaptés.
Key | Oblig. | Valeurs possibles | description |
columns |
| 1,2,3,4,... | Les resources sont montées en combien de colonnes ? |
lang | oui | nl, fr | Le plugin doit être montré en quel langue? |
key | oui |
| Clé unique à recevoir de votre contact commercial. |
startTime | oui | "09:00" | Partant de quel heure, la disponibilité peut être demandé et une réservation peut être faite. |
endTime | oui | "19:00" | Jusqu’a de quel heure, la disponibilité peut être demandé et une réservation peut être faite. |
showResultsOnLoad | non | true/false | Visualisation immédiat des résultats sans filtres. |
showAdditionalFilters | non | true/false | Montrer les filtres des propriétés? |
showSearchButton | non | true/false | Heures impossible comme heure départ |
redirectToUrlOnSearch | non |
| La page à ouvrir en cliquant sur le bouton de recherche. URL complèt dans le même domaine. |
showLocationFilter | non | true/false | Le filtre de localisation doit être montré. Si non, la disponibilité de toutes les localisations est montrée |
reservationChecks | non | checkboxLabel: "je confirme que…" checkboxWarning: "attention,.." | Montrer le bouton de recherche? |
disabledFromDates | non | array ['2022/7/11', '2022/7/12'] | Dates in impossible comme jour départ |
disabledToDates | non | array ['2022/7/11', '2022/7/12'] | Dates in impossible comme date d’arrivé |
availableFromTimes | non | Array ['15:00', '15:30', '16:30', '17:00', '17:30'] | Liste adaptable des coches qui sont obligatoire en confirmant une réservation. bouton de recherche |
availableToTimes | non | array ['15:00', '15:30', '16:30', '17:00', '17:30'] | heures in impossible comme heure d’arrivé |
| filtres | non | Objet JSON filtres: { parentresourcecategoryid: [1], branchid: [3,6,9], from: new Date(), fromTime: "9:15", to: new Date(), toTime: "17:00" } | Détermine la valeur pré-sélectionnée par défaut de chaque filtre. |
| afficherBoutonInfoNonDisponible | non | true/false | S'il n'y a pas de disponibilité pour une certaine catégorie, le bouton de réservation (qui est normalement désactivé) est remplacé par un bouton "Demander des infos". L'utilisateur peut remplir un formulaire et un e-mail est envoyé à l'agence avec la question de l'utilisateur. |
| afficherBoutonInfoNonTrouve | non | true/false | Au bas des résultats, un bouton devient disponible où l'utilisateur peut demander des informations. L'utilisateur peut remplir un formulaire et un e-mail est envoyé à l'agence avec la question de l'utilisateur. |
Les différentes options de réglage de ces paramètres sont consultables sur notre showcase.
Modification de la mise en page
Le plug-in Web utilise le CSS du site Web. Si la mise en page ne convient pas, elle peut être adaptée par le développeur du site. Il peut l’adapter lui-même si nécessaire. Pour ce faire, il convient d’utiliser ou de remplacer certaines classes CSS.
L’ensemble du code HTML est encapsulé dans une balise div avec l’id « proplanner-plugin-wrapper ». Il est donc compatible avec les CSS imbriqués.
Les icônes par défaut sont disponibles sur le site Bootstrap Icons (https://icons.getbootstrap.com). Indiquez le nom complet de la classe : bi bi-bag (chez Font Awesome, il s’agit par exemple de fas fa-envelope). Si des icônes ont été configurées dans le CSS même (p. ex. png/..), la classe complète peut également être spécifiée dans ProPlanner. Si rien n’est spécifié, seul le texte s’affichera.
Voici quelques classes CSS intéressantes :
ID(#) of Class(.) | Property | Default waarde | Description |
#proplanner-plugin-wrapper | min-height | 400px | que lest la hauteur minimum du plugin? |
#filters |
|
| le grouppe de filtres complèts |
.filter-group |
|
| le grouppe de filtres propriétés |
.filter-title |
|
| titre de filtres propriétés |
.filter-options |
|
| div des coches à encocher |
.filter-option |
|
| div de la coche à encocher |
.search-button-container |
|
| div du bouton de recherche |
#searchButton |
|
| Bouton de recherche |
.category |
|
| div des catégories visibles |
.category-title |
|
|
|
.category-pricing |
|
|
|
.category-description |
|
|
|
.property-logo |
|
| div des icones (si présent) |