De KLEKSI-frontend wordt als widget in je bestaande website geplaatst. Hierdoor blijft de algemene vormgeving en navigatie van jouw eigen website behouden, terwijl de collectiepresentatie vanuit KLEKSI binnen de pagina wordt geladen. De widget wordt bij voorkeur geplaatst tussen de header en de footer vanjouw website. De header bevat doorgaans onderdelen zoals jouw logo en navigatiemenu. De footer bevat meestal aanvullende navigatie, contactgegevens en andere algemene informatie. Op de plaats waar je de collectie wilt tonen, voeg je de volgende code toe:

<link href="https://eu.cdn.kleksi.com/jouwcode/app.js" rel="preload" as="script">
<kleksi-results></kleksi-results>
<script type="module"src="https://eu.cdn.kleksi.com/jouwcode/app.js"></script>

Opbouw van de widgetcode
De code bestaat uit drie onderdelen. De eerste regel zorgt ervoor dat het benodigde KLEKSI-script alvast door de browser wordt
geladen:

<link href="https://eu.cdn.kleksi.com/jouwcode/app.js"rel="preload" as="script">

Vervolgens bepaalt het volgende element op welke plaats binnen de pagina de KLEKSI-frontend wordt weergegeven:

<kleksi-results></kleksi-results>

Tot slot wordt het JavaScript-bestand geladen waarmee de frontend daadwerkelijk wordt opgebouwd en geactiveerd:

<script type="module"src="https://eu.cdn.kleksi.com/jouwcode/app.js"></script>

Plaatsing binnen een bestaande pagina
Een vereenvoudigde HTML-pagina kan er bijvoorbeeld als volgt uitzien:

<header>
<!-- Header en navigatie van uw eigen website -->
</header>

<main>

<link href="https://eu.cdn.kleksi.com/jouwcode/app.js"
rel="preload" as="script">
<kleksi-results></kleksi-results>
<script type="module"
src="https://eu.cdn.kleksi.com/jouwcode/app.js"></script>

</main>

<footer>
<!-- Footer van uw eigen website -->
</footer>

Hierdoor blijft de bezoeker binnen jouw eigen website en wordt alleen het gedeelte tussen de header en footer door de KLEKSI-frontend gevuld.


Jouw persoonlijke widgetcode
In bovenstaand voorbeeld wordt jouwcode als voorbeeld gebruikt. Deze waarde moet worden vervangen door de unieke code die voor jouw organisatie beschikbaar is gesteld. Wanneer jouw persoonlijke code bijvoorbeeld abcde is, worden de verwijzingen:

https://eu.cdn.kleksi.com/abcde/app.js

Gebruik hiervoor altijd de applicatie ID van jouw KLEKSI applicatie. Deze kunt jeook via jouw contactpersoon of ondersteuner opvragen.

Plaatsing in een CMS
Werkt jouw website met een contentmanagementsysteem, zoals WordPress, Joomla, Drupal of een ander CMS, dan kan de widget meestal worden toegevoegd via een HTML- of codeblok. Het is belangrijk dat het gebruikte blok het invoegen van eigen HTML en JavaScript toestaat. Sommige CMS-systemen of pagebuilders verwijderen <script>-elementen automatisch. In dat geval moet de widget door de websitebeheerder of webbouwer in de pagina template worden opgenomen. Na het plaatsen van de code kun je de pagina openen en controleren of de collectie correct tussen de bestaande header en footer van jouw website wordt weergegeven.

Gebruik de volledige beschikbare paginabreedte
De KLEKSI-widget is ontwikkeld om gebruik te maken van de volledige beschikbare breedte van de pagina. Sommige websites werken echter met een centrale contentkolom waarbij links en rechts vaste marges, witruimtes of een maximale contentbreedte zijn ingesteld. Hierdoor kan de beschikbare ruimte voor de widget kleiner worden dan bedoeld. Dit kan ertoe leiden dat bij bepaalde schermresoluties minder objecten naast elkaar worden weergegeven en kan er bovendien voor zorgen dat de responsive weergave niet optimaal of niet correct reageert. Wij adviseren daarom om voor de pagina waarop de KLEKSI-widget wordt geplaatst eventuele vaste zijmarges, maximale content breedtes of andere beperkende layout-instellingen te verwijderen, zodat de widget over de volledige beschikbare paginabreedte kan worden weergegeven.

Detailpagina's koppelen aanjouw eigen domeinnaam
Wanneer een bezoeker vanuit de KLEKSI-frontend een object opent, wordt voor dat object een afzonderlijke detailpagina weergegeven. KLEKSI stelt deze detailpagina's standaard beschikbaar via een KLEKSI-domein. Het is echter aan te raden om de detailpagina's onder de eigen domeinnaam van jouw organisatie beschikbaar te maken. Hierdoor blijft de bezoeker tijdens het bekijken van een object op jouw eigen website en worden de openbare collectiepagina's ook door zoekmachines gekoppeld aan het domein vanjouw organisatie in plaats van aan het domein van KLEKSI.

Een detailpagina kan dan bijvoorbeeld worden geopend via:

https://www.jouworganisatie.nl/collectie/detail/12345

in plaats van rechtstreeks via een KLEKSI-domein.

Werking van de koppeling
Hiervoor wordt op de webserver een zogenaamde reverse proxy-regel ingesteld. Wanneer een bezoeker een URL onder /collectie/detail/ opent, haalt de webserver de bijbehorende detailpagina op de achtergrond bij KLEKSI op. De URL in de browser blijft daarbij de URL vanjouw eigen website. De bezoeker wordt dus niet zichtbaar doorgestuurd naar een ander domein. Voor een website die gebruikmaakt van een Apache-webserver kan hiervoor onderstaande regel aan het .htaccess-bestand worden toegevoegd:

RewriteRule ^collectie/detail/(.*)
http://eu.detail.kleksi.com/jouwcode/$1 [P]

Jouw persoonlijke KLEKSI applicatiecode invullen
In bovenstaande regel is jouwcode een voorbeeldwaarde. Deze moet worden vervangen door de unieke KLEKSI-code die voor jouw organisatie beschikbaar is gesteld.

Wanneer jouw KLEKSI-code bijvoorbeeld abcde is, wordt de regel:

RewriteRule ^collectie/detail/(.*)
http://eu.detail.kleksi.com/abcde/$1 [P]

Gebruik altijd de code dieje van KLEKSI hebt ontvangen.

De regel aan .htaccess toevoegen
Het .htaccess-bestand bevindt zich doorgaans in de hoofdmap van de website. Open dit bestand en controleer eerst of mod_rewrite al wordt geactiveerd met:

RewriteEngine On

Wanneer deze regel al aanwezig is, hoef je deze niet opnieuw toe te voegen. Een eenvoudige configuratie kan er bijvoorbeeld als volgt uitzien:

RewriteEngine On

RewriteRule ^collectie/detail/(.*)
http://eu.detail.kleksi.com/jouwcode/$1 [P]

Veel websites, en met name websites die gebruikmaken van een CMS zoals WordPress, Drupal of Joomla, bevatten al meerdere rewrite-regels. Plaats de KLEKSI-regel in dat geval bovenaan vóór algemene of zogenaamde catch-all-regels die alle overige URL's naar het CMS doorsturen.

Dit is belangrijk omdat anders het CMS de URL /collectie/detail/... mogelijk al verwerkt voordat de KLEKSI-regel wordt uitgevoerd.

Benodigde server ondersteuning
De toevoeging [P] aan de RewriteRule geeft aan dat de aanvraag als proxy-aanvraag moet worden verwerkt. Hiervoor moet de Apache-webserver ondersteuning hebben voor onder andere mod_rewrite en de benodigde proxyfunctionaliteit. Bij veel hostingomgevingen is dit beschikbaar, maar sommige hostingproviders staan het gebruik van proxyregels vanuit .htaccess niet toe. Wanneer de regel na plaatsing een serverfout veroorzaakt of de detailpagina niet wordt weergegeven, neem dan contact op metjouw hostingprovider of websitebeheerder. Geef daarbij aan dat voor /collectie/detail/ een Apache reverse proxy via .htaccess moet worden toegestaan.

Koppeling vanjouw domeinnaam in KLEKSI
Nadat de bovenstaande instelling voor de detailpagina op jouw website is uitgevoerd, maken wij binnen KLEKSI een koppeling met de domeinnaam van jouw organisatie. Vanaf dat moment verwijst de resultatenpagina van de KLEKSI-frontend bij het openen van een object automatisch naar de bijbehorende detailpagina op jouw eigen domeinnaam. Een bezoeker die vanuit de zoekresultaten een object opent, blijft daardoor volledig binnen de website van jouw organisatie en wordt niet doorgestuurd naar een KLEKSI-domein. Het is daarom belangrijk dat de technische instelling op jouw website correct is uitgevoerd voordat wij deze domeinkoppeling in KLEKSI activeren.

Controleren of de koppeling werkt
Nadat alle bovenstaande stappen zijn uitgevoerd open je via de KLEKSI-frontend een object uit jouw collectie. Controleer vervolgens de URL in de adresbalk van je browser. Deze moet onder jouw eigen domeinnaam blijven staan, bijvoorbeeld:

https://www.jouworganisatie.nl/collectie/detail/12345

De detailinformatie wordt vanuit KLEKSI aangeleverd, maar voor de bezoeker en voor zoekmachines vormt de pagina onderdeel van de website van jouw organisatie. Hierdoor ontstaat één consistente publieke collectieomgeving: zowel het zoeken en filteren via de KLEKSI-widget als de afzonderlijke detailpagina's van objecten worden onder het eigen domein van de organisatie aangeboden.

Controle na updates vanjouw website of CMS
Na een update van jouw CMS, thema, hostingconfiguratie of .htaccess-bestand kan het voorkomen dat de eerder ingestelde RewriteRule wordt gewijzigd of overschreven. Wanneer een bezoeker vervolgens een objectdetailpagina opent, kan hierdoor een 404-foutmelding ontstaan. Wordt deze foutmelding weergegeven binnen de vormgeving of foutpagina van jouw eigen website, dan betekent dit doorgaans dat de RewriteRule ontbreekt of niet correct wordt uitgevoerd en ligt het probleem aan de kant van de website of webserver. Controleer in dat geval of de RewriteRule nog in het .htaccess-bestand aanwezig is en correct (bovenaan) is geplaatst.

Verschijnt er een foutmelding afkomstig van een KLEKSI-domein, neem dan contact met ons op. In dat geval wordt de aanvraag wel naar KLEKSI doorgestuurd, maar gaat er waarschijnlijk aan onze zijde iets mis.

De widget op meerdere pagina’s gebruiken
De KLEKSI-widget kan meerdere keren binnen dezelfde website worden geplaatst. Je kunt de widget dus bijvoorbeeld op een algemene collectiepagina gebruiken, maar ook op afzonderlijke pagina’s waarop je een specifieke selectie van de collectie onder de aandacht wilt brengen.

De widget hoeft daarbij niet telkens anders te worden ingericht. De selectie van objecten kan namelijk worden bepaald met behulp van de filters in de frontend.

Filterinstellingen worden opgenomen in de URL
Wanneer je in de frontend één of meerdere filters instelt, worden deze filterinstellingen automatisch verwerkt in de URL van de pagina. Stel je bijvoorbeeld een filter in op een bepaalde collectie, vervaardiger, objectsoort of een ander beschikbaar filterveld, dan ontstaat een URL waarin deze selectie is vastgelegd. Wanneer deze URL opnieuw wordt geopend, wordt dezelfde gefilterde selectie automatisch weergegeven.

Hierdoor kun je binnen jouw eigen website rechtstreeks verwijzen naar een specifieke groep objecten. Je kunt bijvoorbeeld vanaf een themapagina, tentoonstelling of informatiepagina een link opnemen die de bezoeker direct naar de relevante selectie binnen de KLEKSI-frontend brengt.

Verwijzen naar specifieke selecties
Op deze manier kun je vanuit verschillende onderdelen van jouw website verschillende ingangen naar dezelfde collectie aanbieden.

Zo kun jebijvoorbeeld:

• vanaf een pagina over een kunstenaar direct verwijzen naar alle objecten van deze vervaardiger
• vanaf een pagina over een bepaalde deelcollectie rechtstreeks verwijzen naar die collectie
• vanuit een themapagina een vooraf gefilterde selectie van relevante objecten openen
• vanuit nieuwsberichten of andere pagina’s verwijzen naar een specifieke groep objecten binnen de collectie.

De onderliggende KLEKSI-widget blijft daarbij hetzelfde. Alleen de URL bepaalt welke filterinstellingen bij het openen van de pagina worden toegepast.

Een gefilterde selectie delen
Dezelfde werkwijze kan ook worden gebruikt om een specifieke selectie met iemand anders te delen. Wanneer iemand bijvoorbeeld informatie vraagt over een bepaalde groep objecten, kun je in de frontend de gewenste filters instellen en vervolgens de URL uit de adresbalk kopiëren. Deze URL kun jeper e-mail, bericht of op een andere manier delen. De ontvanger opent daarmee direct dezelfde gefilterde selectie, zonder dat deze zelf opnieuw alle filters hoeft in te stellen. Dit maakt de filterfunctionaliteit niet alleen geschikt voor navigatie binnen de eigen website, maar ook voor het eenvoudig delen van specifieke delen van de collectie.

Let op bij het wijzigen van filters
Gedeelde of intern gebruikte filterlinks blijven correct werken zolang de betreffende filtervelden en filterwaarden in KLEKSI beschikbaar blijven. Wanneer een filterveld wordt verwijderd, hernoemd of niet langer als filter wordt aangeboden, kan een eerder aangemaakte link daardoor niet meer dezelfde selectie opleveren. Het is daarom verstandig om bij wijzigingen in de filterinrichting ook links op belangrijke pagina’s van jouw website te controleren.