By adding a piece of code to an existing website, the ProPlanner web module can be loaded. The information below can help inform the website developer on how to proceed.
To see the webplugin in action and view some code examples, visit our webplugin showcase.
Code to add
HTML to add to the website:
<div id=\"proplanner-plugin\"> </div>
Script to add:
<script type=\"text/javascript\">
var ProPlannerConfig = {
columns: 3,
lang: \"nl\",
key: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\",
startTime: \"09:00\",
endTime: \"19:00\",
showResultsOnLoad: false,
showAdditionalFilters: true,
baseurl: \"https://webplugin.proplanner.be\"
};
</script>
<script defer type=\"text/javascript\" src=\"https://webplugin.proplanner.be/embed/plugin\"></script>
The configuration parameters can be adjusted.
Key | required | Possible values | Description |
columns |
| 1,2,3,4,... | In how many columns should the resources be displayed? |
lang | yes | nl, fr | In which language should the plugin be loaded? |
key | yes |
| Unique key to obtain via your commercial contact. |
startTime | yes | \"09:00\" | From what time can a user request availability and make a booking? |
endTime | yes | \"19:00\" | Until what time can a user request availability and make a booking? |
showResultsOnLoad | no | true/false | Should results immediately be shown without filters? |
showAdditionalFilters | no | true/false | Should filters for the properties be shown? |
showSearchButton | no | true/false | Should the search button be displayed? |
redirectToUrlOnSearch | no |
| Open this page when you click on the search button. Full URL, on the same domain. |
showLocationFilter | no | true/false | Should the location filter be displayed? If not, all locations are used to determine availability. |
reservationChecks | no | checkboxLabel: "I confirm…" checkboxWarning: "Warning,…" | Should the Location filter be shown? If not, all locations are used to determine availability. |
disabledFromDates | no | array ['2022/7/11', '2022/7/12'] | The specified dates are not available to select as start date |
disabledToDates | no | array ['2022/7/11', '2022/7/12'] | The specified dates are not available to select as end date |
availableFromTimes | no | Array ['15:00', '15:30', '17:00', '17:30'] | List of times available as start time. Optional - by default we show the times in half hour intervals between the property startTime and endTime |
availableToTimes | no | array ['15:00', '15:30', '17:00', '17:30'] | List of times available as end time Optional - by default we show the times in half hour intervals between the property startTime and endTime |
| filters | no | JSON object filters: { parentresourcecategoryid: [1], branchid: [3,6,9], from: new Date(), fromTime: \"9:15\", to: new Date(), toTime: \"17:00\" } From top to bottom, what is preselected: - Resource type - Location - Start date - Start time - End date End time | Determines the default preselected value of each filter. |
| showNotAvailableInfoButton | no | true/false | If there is no availability for a certain category, the reserve button (which is normally disabled) is replaced by a button "Request info". Here the user can fill out a form and an email is sent to the business unit with the user's question. |
| showNotFoundInfoButton | no | true/false | At the bottom of the results, a button is available where the user can request information. Here the user can fill out a form and an email is sent to the business unit with the user's question. |
onlyShowAvailableCategories | no | true/false | Hiding or not showing resource categories that have no availability. This is off by default and they are sorted to the end. |
showEquipmentFilter | no | true/false | When "showAdditionalFilters" is enabled, you can choose to hide the equipment filter. |
| ownerBranchID | no | 1 | The default ownerbranchid that must be entered on the contract (e.g. for rental company) |
You can view the different options for setting these parameters on our showcase page.
Layout adjustments
The webplugin uses the CSS of the website. If the layout is not as desired, it can be adjusted by the website builder. They can adjust the layout themselves if desired. A few CSS classes can be used or overwritten for this.
All HTML is inside a div with id "proplanner-plugin-wrapper". This can therefore always be used to apply nested CSS.
The default icons are available from Bootstrap Icons (https://icons.getbootstrap.com). Enter the full classname: bi bi-bag (with Font Awesome, for example, it is fas fa-envelope). If custom icons were configured in CSS itself (e.g. png/..), you can also fill in the full class in ProPlanner. If nothing was specified, only the text will be shown.
A few interesting CSS classes:
ID(#) or Class(.) | Property | Default value | Description |
#proplanner-plugin-wrapper | min-height | 400px | What is the minimum height of the plugin? |
#filters |
|
| The entire filter group |
.filter-group |
|
| Group of property filters |
.filter-title |
|
| Title of a property filter |
.filter-options |
|
| Div around the checkboxes |
.filter-option |
|
| Div around checkbox |
.search-button-container |
|
| Div around the search button |
#searchButton |
|
| Search button |
.category |
|
| Div around a single visible category |
.category-title |
|
|
|
.category-pricing |
|
|
|
.category-description |
|
|
|
.property-logo |
|
| Div around an icon (if present) |