Skip to main content

Voorbeelden

Voorbeelden met configuratie en script dat in de header opgenomen dient te worden:

caution

De gemarkeerde instellingen moeten nog ingevuld worden.
De api sleutel kun je instellen in Stratech booking bij instellingen -> API-sleutels.

info

Als je met jouw muis over een code blok hovert dan kun je rechtsboven in het code blok op het kopiëren icoon klikken om de code eenvoudig te kopiëren & plakken.

Javascript - Nederlandstalige website​

<!-- Start Stratech Booking -->
<script type="text/javascript">
  var config = {
    apikey: "XXXXXXXXXXX",
    searchUrl:
      "verwijzing naar pagina waarin zoeken widget is geïmplementeerd bijv: zoeken",
    confirmationUrl: "verwijzing naar de bedankt pagina bijv bedankt",
    bookingUrl:
      "verwijzing naar pagina waarin boeken widget is geïmplementeerd bijv boeken",
    modules: {
      search: {
        showUnitCategories: true,
        showUnitTypes: true,
        showUnitContainers: true,
        showUnitFeatures: true,
      },
      searchResult: {
        showUnitAvailability: true,
      },
      main: {
        showReceipt: false,
      },
      guest: {
        requiredGuestFields: ["email", "lastname"],
      },
      overview: {
        termsAndConditionsUrl:
          "verwijzing naar voorwaarden pagina bijv: voorwaarden",
      },
    },
  };
</script>
<script defer src="https://online.stratechbooking.nl/sb.js"></script>
<!-- End Stratech Booking -->

Javascript - Meertalige website​

<!-- Start Stratech Booking -->
<script type="text/javascript">
  var defaultLang = "nl";
  var searchUrl = "/zoeken";
  var bookingUrl = "/boeken";
  var confirmationUrl = "/bedankt";
  var termsAndConditionsUrl = "/voorwaarden";
  var paths = window.location.pathname.split("/");
  paths.shift();
  if (paths[0].length == 2 && (paths[0] == "en" || paths[0] == "de")) {
    defaultLang = paths[0];

    switch (defaultLang) {
      case "de":
        searchUrl = "de/zoeken";
        bookingUrl = "de/boeken";
        confirmationUrl = "de/bedankt";
        termsAndConditionsUrl = "de/voorwaarden";
        break;
      case "en":
        searchUrl = "en/zoeken";
        bookingUrl = "en/boeken";
        confirmationUrl = "en/bedankt";
        termsAndConditionsUrl = "de/voorwaarden";
        break;
    }
  }
  var config = {
    apikey: "XXXXXXXXXXXXXXXXXXXX",
    searchUrl: searchUrl,
    confirmationUrl: confirmationUrl,
    bookingUrl: bookingUrl,
    defaultLanguage: defaultLang,
    modules: {
      search: {
        showUnitCategories: true,
        showUnitTypes: true,
        showUnitContainers: true,
        showUnitFeatures: true,
      },
      searchResult: {
        showUnitAvailability: true,
      },
      main: {
        showReceipt: false,
      },
      guest: {
        requiredGuestFields: ["email", "lastname"],
      },
      overview: {
        termsAndConditionsUrl: termsAndConditionsUrl,
      },
    },
  };
</script>
<script defer src="https://online.stratechbooking.nl/sb.js"></script>
<!-- End Stratech Booking -->

Pagina zoek en boek​

info

In onderstaande voorbeeld staat een ingevulde voorbeeld configuratie, je dient tenministe de gemarkeerde instellingen te controleren en aan te passen waar nodig.

<!DOCTYPE html>
<html>
  <head>
    <title>Zoek uw aanbod</title>
    <!-- Start Stratech Booking -->
    <script type="text/javascript">
      var config = {
        apikey: "12345678910abcdef",
        searchUrl: "zoeken",
        confirmationUrl: "",
        bookingUrl: "boeken",
        modules: {
          search: {
            showUnitCategories: true,
            showUnitTypes: true,
            showUnitContainers: true,
            showUnitFeatures: true,
          },
          searchResult: {
            showUnitAvailability: true,
          },
          main: {
            showReceipt: false,
          },
          guest: {
            requiredGuestFields: ["email"],
          },
          overview: {
            termsAndConditionsUrl: "voorwaarden",
          },
        },
      };
    </script>
    <script defer src="https://online.stratechbooking.nl/sb.js"></script>
    <!-- End Stratech Booking -->
  </head>

  <body>
    <div>
      <stratech-online-booking-search quick-search="false">
      </stratech-online-booking-search>
    </div>
    <div>
      <stratech-online-booking-search-result>
      </stratech-online-booking-search-result>
    </div>
  </body>
</html>