Voorbeeld API widget

Hieronder kunt u een volledig werkende boekingswidget downloaden die gebruik maakt van de API van OnlineAfspraken.nl. De boekingswidget is bedoeld voor een website met PHP ondersteuning, en gebruikt het PrototypeJS framework voor de javascript afhandeling.

Indien u een ander javascript framework gebruikt kunnen er conflicten optreden met het PrototypeJS framework. U zult er dan zelf voor moeten zorgen dat het mogelijk wordt om PrototypeJS te gebruiken. De meest voorkomende conflictsituatie is met het jQuery javascript framework. Hiervoor is in de jQuery documentatie een goede oplossing te vinden. Deze oplossing vindt u hier.

In lib/widgetCore.php vindt u alle functionaliteiten die benodigd zijn voor het signeren en versturen van de REST-aanvragen.

In config/config.php kunt u de instellingen aanpassen voor uw specifieke OnlineAfspraken.nl agenda. Zie README.txt voor een introductie in deze configuratie, en uitleg hoe deze widget te implementeren is in uw website.

Deze boekingswidget dient slechts als voorbeeld, en biedt alle standaard functionaliteiten die in de normale iframe widget ook geboden worden. U bent vrij deze code volledig aan te passen naar uw wensen en te gebruiken op uw website. U bent echter wel zelf verantwoordelijk voor de implementatie van deze boekingswidget. Daarnaast is er geen ondersteuning op de code zelf. Uiteraard bent u ook verantwoordelijk voor het naleven van de voorwaarden voor het gebruiken van de API.

Downloaden

Voorbeeld downloaden

Voorbeeld boekingwidget
PHP 5.2 of hoger, PrototypeJS ( is bijgesloten )
Versie 1.1.0, 11 november 2015, 75kB

Implementeren

Het implementeren van de widget bestaat uit het insluiten van de widget code in uw website, en het configureren van de API verbindingsgevens.

Om de widget in te sluiten op uw website dient u enkele stylesheet en javascripts toe te voegen, gevolgd door een aanroep naar de widget code:

<!DOCTYPE HTML>
<html>
  <head>
  <title>OnlineAfspraken.nl widget</title>
  <link rel="stylesheet" href="theme/default/css/widget.css" type="text/css" />
	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/calendarview.js"></script>
	<script type="text/javascript" src="js/widget.js"></script> 
</head>
<body>
<?php 
require_once('lib/widget.php');
Widget::show();
?>
</body>
</html>

Configureren

Nadat u de widget heeft toegevoegd op uw website moet u de juiste API verbindindsgegevens instellen in config/config.php:

...
// Uw API-key ( zie in uw OnlineAfspraken backend "instellingen" -> "inbouwen agenda" )
define('API_KEY',       'fffm23yvtp12-zfdz02');

// Uw API secret ( zie in uw OnlineAfspraken backend "instellingen" -> "inbouwen agenda" )
define('API_SECRET',    '755693e2df75a376899711ee2f8e2b89c66c5a69');

// De relative URL naar widget.php, benaderbaar via uw browser
// Indien het script te benaderen is op http://example.com/widget/lib/widget.php, 
// dan is de widget URL /widget/lib/widget.php
define('WIDGET_URL',    '/widget/lib/widget.php');

// De naam van de widget, bijvoorbeeld uw bedrijfsnaam
define('APP_TITLE',     'Mijn Agenda');
...

Voorbeeld

Nadat u de widget heeft gedownload, geïmplementeerd en geconfigureerd is de widget klaar voor gebruik. U kunt de widget nu volledig naar uw wensen aanpassen, of dit door een webbouwer laten aanpassen indien u dit zelf niet kunt. De widget die u zojuist ingesteld hebt ziet er nu als het goed is als volgt uit: