Met de HTML Zoek & Boek-tool maak je een complete Zoek & Boek-pagina voor je eigen website. Je vult accommodaties, faciliteiten, teksten en vormgeving in en de tool maakt daar HTML-code van. Die code plak je in je website.

Prijzen en beschikbaarheid blijven live uit UwBoeking komen. Teksten, foto’s, faciliteiten en kleuren zitten in de code zelf. Wijzig je die laatste groep, dan genereer je de code opnieuw en plak je haar opnieuw op je website.

Zo ziet zo’n pagina eruit bij een bezoeker, met filters in de zijbalk en accommodatiekaarten met foto, prijs en knop. Bekijk als voorbeeld de Zoek & Boek-pagina van Resort Schierduin.

Voorbeeld van een Zoek & Boek-pagina met filters en accommodatiekaarten

Tool openen

Ga naar Accommodaties > Insluitcodes > Zoek en Boek > Geavanceerde Zoek en Boek. De tool opent met je gegevens en laadt je accommodaties automatisch, met de voortgangsbalk Accommodaties laden….

Foto’s aanpassen

Foto’s beheer je in UwBoeking, niet alleen in de tool.

  1. Ga naar Marketing, open de drie puntjes bij de accommodatie en kies Uw advertentie aanmaken of wijzigen.
  2. Zet de hoofdfoto op het eerste taaltabblad en voeg extra foto’s toe onder Foto’s. Bepaal daar ook de volgorde.
  3. Open daarna de HTML Zoek & Boek-tool via Accommodaties > Insluitcodes > Zoek en Boek > Geavanceerde Zoek en Boek en haal de nieuwe gegevens op:
    • bij een nieuwe accommodatie worden titel, aantal personen, link, hoofdfoto en extra foto’s automatisch opgehaald;
    • bij een bestaande accommodatie: klap Toegevoegde accommodaties uit met het pijltje rechts in de balk en kies Foto’s opnieuw ophalen. Hoofdfoto, foto’s, titel, aantal personen en link worden bijgewerkt.
  4. Kies daarna Genereer HTML en plaats de nieuwe code op je website.

In stap 3 van het accommodatieformulier kun je foto’s verslepen om de volgorde te wijzigen, met × verwijderen en met Toevoegen een extra foto-URL plakken. Dat is een aanpassing in deze Zoek & Boek-pagina. Wil je de foto blijvend bewaren, wijzig haar dan ook in de vermelding, anders ben je de aanpassing bij de volgende keer ophalen kwijt.

Het veld Hoofdfoto URL bepaalt de foto op de accommodatiekaart. De eerste foto in het fotoraster is de hoofdfoto.

Accommodatie toevoegen

Je accommodaties staan na het openen van de tool al klaar onder Toegevoegde accommodaties. Deze lijst staat standaard ingeklapt om het overzicht te bewaren; klik op het pijltje rechts in de balk om haar uit te klappen. Open daarna een accommodatie via Bewerken en vul per accommodatie aan:

  1. Controleer Titel, Hoofdfoto URL en Aantal personen. Vink de juiste Faciliteiten aan.
  2. Vul per taal Tags in (maximaal 4, met Enter bevestigen) of vul een korte tekst van maximaal 200 tekens in. Bij een korte tekst worden de tags niet getoond.
  3. Kies Volgende.
  4. Vul bij Link naar accommodatie-pagina het adres van je eigen accommodatiepagina in als je die hebt. De knop Bekijk accommodatie verwijst dan daarnaartoe en een beschrijving is niet nodig. Laat je dit veld leeg, controleer dan de Foto’s, vul de Beschrijving in (verplicht) en bepaal of de Reserveringsmodule en het Contactformulier in de detailweergave staan.
  5. Kies Opslaan.

Ontbreekt een accommodatie, kies dan bij Nieuwe accommodatie voor + Nieuwe accommodatie, vul het accommodatienummer (userItem) in en kies Volgende. De tool haalt de gegevens uit UwBoeking op.

De taal bovenaan het formulier bepaalt in welke taal je typt; leeg laten betekent terugvallen op het Nederlands.

Herhaal dit per accommodatie. De volgorde in Toegevoegde accommodaties kun je verslepen. Die volgorde is de startvolgorde op de website zolang de bezoeker geen datums heeft gekozen.

Beheer bovenaan onder Faciliteiten welke opties je per accommodatie kunt aanvinken. Klik in een label om de naam te wijzigen en kies + Nieuwe categorie voor een nieuwe groep.

Faciliteiten per categorie beheren in de tool

Vormgeving en talen

Open de instellingen met het tandwiel. Daar stel je in:

  • Taal: welke talen de pagina aanbiedt en wat de standaardtaal is. Nederlands staat altijd aan als terugval. Vul ook de labels voor aankomst, vertrek en prijs per taal in.
  • Stijling: achtergrond-, knop-, kaart-, tekst- en lightboxkleuren, ronding en omlijning. De zoek-widget heeft een eigen kleurenset. Eigen CSS is alleen voor gevorderden.
  • Kalender: toegestane aankomst- en vertrekdagen, of het personenveld zichtbaar is, of accommodaties zonder datums in willekeurige volgorde staan en of een eerstvolgende beschikbare periode mag worden getoond.

HTML exporteren en opnieuw importeren

  1. Kies onder Genereer Zoek & Boek voor Genereer HTML.
  2. Controleer met Voorbeeld het resultaat.
  3. Kies Kopieer naar klembord of Download .html en bewaar het bestand als back-up.

HTML genereren, kopiëren, downloaden en een voorbeeld bekijken

Wil je later verder werken, dan importeer je de eerder gemaakte code:

  1. Kies bovenaan bij Faciliteiten het importpictogram voor Bestaande HTML importeren.
  2. Plak de eerder gegenereerde Zoek & Boek-pagina en kies Importeer.
  3. Bevestig het vervangen van de huidige gegevens.

De tool onthoudt je werk ook in dezelfde browser, maar voor een andere computer of na het wissen van browsergegevens heb je het gedownloade bestand of de geplakte code op je website nodig.

Na iedere inhoudelijke wijziging genereer je opnieuw en vervang je de code op je website volledig. Plak altijd alles, laat geen regels weg.

Op je website zetten

Volledige Zoek & Boek-pagina

  1. Kopieer de gegenereerde HTML volledig.
  2. Open in je website-editor de HTML-, embed- of codeweergave van de Zoek & Boek-pagina.
  3. Plak de code, publiceer de pagina en test haar in een privévenster op desktop en telefoon.

Gebruik geen gewone alinea of tekstblok, dan wordt de code als tekst zichtbaar.

Zoek-widget voor andere pagina’s

De zoek-widget is een compacte zoekbalk voor bijvoorbeeld de homepage. Een bezoeker kiest datums en aantal personen en komt dan op de Zoek & Boek-pagina uit.

  1. Plaats eerst de volledige Zoek & Boek-pagina en kopieer haar adres.
  2. Vul dat adres in bij Absolute URL van je Zoek & Boek-pagina.
  3. Kies Genereer widget en daarna Kopieer widget.
  4. Plak de widgetcode in een HTML- of codeblok op de andere pagina.

Script voor accommodatiepagina’s

Plak het Script voor de accommodatie pagina’s op elke accommodatiepagina waar de UwBoeking-widget al staat. Daarmee neemt die pagina de gekozen aankomst-, vertrekdatum en het aantal personen uit de widget over.

Controleren

Test na publicatie:

  • laden foto’s, kalender en prijzen;
  • werken filters, sortering en taalkeuze;
  • opent de detailweergave met beschrijving, foto’s, faciliteiten, reserveringsmodule en eventueel contactformulier, of bij een eigen URL de eigen accommodatiepagina;
  • komt een proefreservering in UwBoeking binnen;
  • ontvangt de gast de juiste e-mail.

Komt een wijziging in prijzen of beschikbaarheid niet zichtbaar, dan hoef je de code niet opnieuw te plakken. Zie je een oude tekst of foto, dan staat de oude code nog op de website of in de websitecache.

Zie ook