Overslaan en naar hoofdcontent gaan
Contact

Integratie in website

  • Bijgewerkt

Installatie en configuratie

  1. Open het programma waarmee u de broncode van de pagina's van uw website kunt bewerken.
  2. Open de pagina waarop u Recranet wilt integreren.

3. Zorg ervoor dat er een HTML base-tag aanwezig is op de pagina (in de head) waar je Recranet gaat integreren. De waarde van de base tag moet het pad zijn van de pagina waarop de boekingsstraat wordt geïntegreerd. Bijvoorbeeld:

<base href="/nl/vakantiehuizen-zeeland">

4. Plaats de Recranet configuratie in de \. Bij voorkeur plaatst u deze voor alle andere script-tags.

<script type="text/javascript"> 
    window.recranetConfig = { 
        organization: 1000, 
        locale: 'nl', 
        currency: 'EUR', 
        googleApiKey: 'hPdRpaNNKS_d9dNtn5-cdkDz3YA8LuIgAyi8_2f',
        division: 0, // OPTIONEEL
        accommodationParams: {
            locationCategory: 1000, // OPTIONEEL
            accommodationCategory: 1000 // OPTIONEEL
        } 
     }; 
</script>

Organization ID
Wijzig in de bovenstaande code het nummer 1000 bij organization naar de organisatie ID van uw organisatie. De benodigde ID kunt u opvragen via Recranet Support.

Division ID

De division parameter kan worden gebruikt om accommodaties van een specifiek bedrijfsonderdeel te forceren. 

Locale
De locale wordt gebruikt als standaardtaal voor de reserveringen. De taal van de Elements SDK is niet dynamisch en wordt bepaald aan de hand van de gespecificeerde SDK-loader in de volgende stap. Deze taaloptie bepaalt daarom niet de taal van de boekingsstraat. De locale is echter wel vereist en moet op de juiste manier worden ingesteld! Dit houdt in dat op Nederlandse pagina's de waarde nl moet zijn, op Duitse pagina's de, etc.

Google API Key
De googleApiKey voor Google Maps moet verplicht ingesteld worden via de recranetConfig. Bepaalde instellingen in Recranet kunnen er namelijk voor zorgen dat Google Maps kaarten worden geladen in de boekingsstraat. De Google API key moet toegang hebben tot de Maps Embed API en de Maps JavaScript API. De API's moeten ingeschakeld zijn in de API-bibliotheek van uw Google Cloud project.

5. Voeg de JavaScript Recranet Elements SDK toe aan de van de website. Plaats deze tag voor andere script tags, maar achter de recranetConfig. De Recranet Elements SDK kan namelijk asynchroon ingeladen worden, wat de laadsnelheid ten goede komt.

<script src="https://static.recranet.com/elements/<TAALCODE>/sdk.js?<RANDOM_TIMESTAMP>" async></script>

Zorg ervoor dat er een timestamp of willekeurige tekenreeks wordt toegevoegd aan de URL query-parameters om eventuele browser cache te negeren, dit kan bijvoorbeeld met de PHP rand()-functie. Indien dit niet wordt gedaan zal onjuiste browser caching ervoor zorgen dat de boekingsstraat na een update niet goed wordt geladen.

De SDK kan in verschillende talen worden ingeladen. Momenteel zijn de volgende talen beschikbaar:

  • Nederlands (nl)
  • Engels (en)
  • Duits (de)
  • Frans (fr)
  • Kroatisch (hr)
  • Italiaans (it)
  • Spaans (es)
  • Tsjechisch (cs)
  • Noors (nb)
  • Pools (pl)
<script src="https://static.recranet.com/elements/<TAALCODE>/sdk.js?<RANDOM_TIMESTAMP>" async></script>

6. Plaats deze code op de locatie waar u Recranet wilt inladen:

<recranet-accommodations class="recranet-element"></recranet-accommodations>

Configuratie voor ondersteuning HTML5 routing

Front-end (HTML5) routing is standaard ingeschakeld bij de Elements SDK. Er is geen mogelijkheid om dit uit te schakelen. De website configuratie dient geschikt gemaakt te worden om te zorgen dat directe links naar accommodatie-detailpagina's werken en niet op een 404--pagina uitkomen.

Voorbeeldconfiguratie HTML5 routing

Onderstaand (routing met .htaccess) kan ook herschreven worden met custom routes indien het CMS of ander systeem dit toelaat. In essentie is het de bedoeling dat alles achter /nl/reserveren/* teruggezet wordt naar /nl/reserveren. Recranet Booking handelt namelijk deze routering af.

(Voorbeeld) Routing met .htaccess

Voeg aan het .htaccess bestand de volgende regels toe. Deze regel gaat uit van de url nl/reserveren als pagina waarop de Recranet module is ingeladen.

Voor elke beschikbare taal op de website dient een regel in de .htaccess gezet te worden. In de voorbeelden voor Wordpress en Joomla dienen de waardes als 'page_id' vervangen te worden met de juiste waardes. 

## Begin - Custom redirects

## Algemeen
RewriteRule ^nl/reserveren/.* /nl/reserveren/ [L]

## Wordpress
RewriteRule ^nl/reserveren/.* /index.php?page_id=999 [L]

## Joomla
RewriteRule ^nl/reserveren/.* index.php?option=com_content&view=article&id=999&Itemid=999&lang=nl [L]

## End - Custom redirects

De configuratie kan worden getest door te navigeren naar een accommodatie detailpagina en vervolgens de pagina te verversen. Als vervolgens opnieuw dezelfde pagina wordt geladen, is de configuratie juist.

Beschikbare modules

Accommodatie lijstweergave met zoekfilters

De hoofdmodule van de boekingsstraat is de lijst met accommodaties. Deze module kan geconfigureerd worden met de onderstaande tag.

<recranet-accommodations class="recranet-element"></recranet-accommodations>

Het is mogelijk om een categorie en/of locatie te forceren bij het inladen van de boekingsstraat. Zo kan er een specifieke website pagina gemaakt worden met alle accommodaties uit een specifieke categorie of op een specifieke locatie (bijvoorbeeld een plaats). Indien ingesteld heeft de gebruiker niet de mogelijkheid om deze categorie of locatie aan te passen via het zoekfilter.

Om dit in te stellen dient de recranetConfig aangepast te worden. Deze aangepaste configuratie werkt op een hele pagina en geldt voor alle modules op de pagina. Het is daarom aan te raden deze configuratie alleen op specifieke pagina's te zetten, zoals eerder beschreven. De benodigde ID's kunnen achterhaald worden via de adresbalk na het aanklikken van de gewenste filters in de zoekmodule.

<script type="text/javascript">
    window.recranetConfig = {
        organization: 1000,
        locale: 'nl',
        currency: 'EUR',
        division: 0, // OPTIONEEL
        accommodationParams: {
            accommodationCategory: 1000, // OPTIONEEL
            localityCategory: 1000 // OPTIONEEL
        }
    };
</script>

Accommodaties 'cards' weergave (blokken)

De lijst met accommodaties kan vervangen worden voor een alternatieve weergave, de zogenaamde 'card' weergave. Het enige wat hiervoor nodig is, is het toevoegen van een extra layoutType-attribuut aan het recranet-accommodations-element. Deze weergave is een alternatief voor de lijstweergave en kan alleen op een lege pagina geïntegreerd worden.

<recranet-accommodations class="recranet-element" layoutType="cards"></recranet-accommodations>

Zoekbalk

Indien u de zoekbalk-module wilt integreren, plaats dan deze code op de gewenste locatie op de pagina waar het Recranet script is geladen. Pas het formAction attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). De gebruiker wordt doorgestuurd naar deze pagina wanneer de bezoeker zich nog niet op deze pagina bevindt. Het is belangrijk dat deze URL begint en eindigt met een slash (/).

<recranet-search-bar class="recranet-element" formAction="/"></recranet-search-bar>

Boeken vanaf interactieve kaart (Google Maps)

De 'Boeken vanaf interactieve kaart' module laat gasten direct boeken vanaf de interactieve kaart. Op de interactieve kaart zijn alle accommodaties te zien waarvoor de adresgegevens in het reserveringssysteem juist zijn ingevuld.

Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). De gebruiker wordt automatisch doorgestuurd naar deze pagina wanneer de bezoeker zich nog niet op deze pagina bevindt. Het is belangrijk dat deze URL begint en eindigt met een slash (/).

De hoogte van deze module wordt automatisch bepaald aan de hand van de hoogte van het parent-element (container). Dit houdt in dat de container rond dit Element een responsive hoogte moet krijgen op de website. De kaart zal dan automatisch de (responsive) hoogte overnemen van de container.

<recranet-accommodations-map class="recranet-element" baseUrl="/"></recranet-accommodations-map>

Boeken vanaf interactieve kaart (plattegrond)

De 'Boeken vanaf interactieve kaart' module laat gasten direct boeken vanaf de interactieve kaart. Op de interactieve kaart zijn alle accommodaties te zien waarvoor een voorkeursplaats te reserveren is. Door te klikken op een beschikbare locatie op de kaart, wordt de gebruiker naar het reserveringsproces gestuurd met de juiste accommodatie, voorkeurslocatie en periode.

Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). De gebruiker wordt automatisch doorgestuurd naar deze pagina wanneer de bezoeker zich nog niet op deze pagina bevindt. Het is belangrijk dat deze URL begint en eindigt met een slash (/).

De hoogte van deze module wordt automatisch bepaald aan de hand van de hoogte van het parent-element (container). Dit houdt in dat de container rond dit Element een responsive hoogte moet krijgen op de website. De kaart zal dan automatisch de (responsive) hoogte overnemen van de container.

<recranet-map class="recranet-element" baseUrl="/"></recranet-map>

Uitgelichte accommodaties

Indien u de module 'Uitgelichte accommodaties' wenst te integreren, voeg dan de volgende code toe. De module toont standaard 3 willekeurige accommodaties waarbij de optie 'Weergeven als uitgelichte accommodatie' is ingeschakeld. Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). Het is belangrijk dat deze URL begint en eindigt met een slash (/).\ \ Optioneel mogen er 2 attributen toegevoegd worden aan het element: accommodationCategory en localityCategory. Met deze parameters kunnen accommodaties in de module gefilterd worden op categorie of locatie. De attributen kunnen los gebruikt worden, maar kunnen ook in combinatie gebruikt worden.

Ook kan het limiet van het aantal accommodaties uitgeschakeld worden door het attribuut limit="null" aan het element toe te voegen.

<recranet-featured-accommodations class="recranet-element" baseUrl="/nl/accommodaties/"></recranet-featured-accommodations>

Arrangementen en seizoenplaatsen

Indien u seizoenplaatsen en arrangementen wilt weergeven op een pagina, plaats dan deze code op de gewenste locatie. Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). Het is belangrijk dat deze URL begint en eindigt met een slash (/). Arrangementen kunnen gefilterd worden op arrangementcategorie. Om op een bepaalde categorie te filteren moet het packageSpecificationCategory="1" attribuut toegevoegd worden aan het element. Het benodigde ID voor de categorie kan opgevraagd worden via de Recranet Support.

<recranet-packages class="recranet-element" baseUrl="/nl/accommodaties/"></recranet-packages>

Reviews - Samenvatting

Indien u een korte samenvatting wilt plaatsen van de reviews van een gehele organisatie, kunt u deze widget gebruiken. Onderstaand ziet u een voorbeeld van deze widget. De widget bestaat uit een gemiddelde score en het aantal reviews waarop de score is gebaseerd. Plaats de volgende code op de plek waar je dit element wilt integreren.

Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). Het is belangrijk dat deze URL begint en eindigt met een slash (/).

Het is mogelijk om het element te plaatsen op een donkere achtergrond (zoals in het voorbeeld). Voeg een extra attribuut toe om aan te geven dat de widget geladen moet worden met witte tekst: elementStyle="light"

<recranet-reviews-summary class="recranet-element" elementStyle="default"></recranet-reviews-summary>

Reviews.png

Reviews - Score paneel met willekeurige accommodatie

Indien u uitgebreidere reviews wilt tonen voor een willekeurige accommodatie kunt u deze widget plaatsen. De widget laadt een willekeurige review in de taal van de gebruiker (indien beschikbaar) en geeft daarbij een overzicht van aspecten waar de accommodatie op beoordeeld is.

Pas het baseUrl attribuut aan naar het pad waarop de accommodaties te vinden zijn (bijvoorbeeld /nl/accommodaties/). Het is belangrijk dat deze URL begint en eindigt met een slash (/).

<recranet-reviews-panel class="recranet-element" baseUrl="/"></recranet-reviews-panel>

Aanpassen stijl voor integratie in website

Om de layout en de stijl van Recranet goed te integreren met de layout en stijl van de website bieden we de mogelijkheid om de css van de Recranet Online boeken module aan te passen.

Dit is mogelijk via het Recranet dashboard onder 'Instellingen' -> 'Integratie in uw website'. Met de knop 'Optie toevoegen' kan vervolgens een aangepaste optie worden ingevoerd.

De volgende opties zijn beschikbaar:

rn-brand-primary-color #1692e6
rn-brand-secondary-color #002946

Verwante artikelen