Widget: Standaard Modus

De standaard modus toont de volledige widget interface met het cursusaanbod, navigatie en alle functionaliteiten. Dit is de meest gebruikte modus voor algemene integratie op je website.

Quick Start

Volg deze stappen om de Cursad widget snel te installeren en te gebruiken:

Voeg het JavaScript-bestand toe aan je HTML-pagina.
Zet de base href in de body.
Plaats de widget op de gewenste locatie.
(Alleen voor WordPress) Voeg een rewrite-regel toe aan je childtheme.

Voor gedetailleerde instructies over de algemene installatiestappen, zie de Widget Overzichtspagina.

Installatie Stappen

Stap 1: JavaScript Toevoegen

Voeg deze regel direct voor de sluitende </body>-tag toe:

<script src="https://demowebsite.cursadtestweb.nl/myenv/my-env-widget.js"></script>

Stap 2: Base href Toevoegen

Voeg deze regel toe binnen de <body>:

<base href="PAGINAURL">

Voorbeeld: mijn-omgeving wanneer de widget zich op deze URL bevindt.

Voeg de widget toe waar je hem wilt tonen:

<app-entry 
  data-theme="light" 
  style="--color-primary: #3e80c0" 
  configuration="AANVRAGEN-BIJ-CURSAD" 
  api-url="https://apitest.cursadtestweb.nl/v4/api" 
  cursadweb-url="https://ontwikkel.cursadtestweb.nl">
</app-entry>

Stap 4: Rewrite-regel Instellen (alleen voor WordPress)

Voeg deze code toe aan functions.php van je childtheme. Vervang mijn-omgeving door de slug van jouw pagina en PAGINAID door het ID van de WordPress-pagina waarop de widget staat:

function customcursadrewrite() {
    $singlepageapppageid = PAGINAID;
    add_rewrite_rule('mijn-omgeving/(.*)?$', 'index.php?page_id=' . $singlepageapppageid, 'top');
}
add_action('init', 'customcursadrewrite');

De (.*) vangt alle sub-paden op (bijv. /mijn-omgeving/Beeldend) zodat directe links en bladwijzers correct werken.

:::tip Permalinks vernieuwen Ga in WordPress naar Instellingen > Permalinks en klik op "Wijzigingen opslaan" (je hoeft niets te wijzigen). :::

Configuratie Opties

Attribuut	Beschrijving	Waarden
`configuration`	Unieke configuratie-ID (vraag aan bij support)	UUID string
`api-url`	Backend URL	Volledige URL
`cursadweb-url`	CursadWeb URL voor afbeeldingen en doorverwijzen	Volledige URL
`data-theme`	Kleurenschema van de widget	`light`, `dark`, of eigen themanaam
`style`	CSS custom properties voor snelle kleurinstellingen	bijv. `--color-primary: #3e80c0`
`router-base`	Basispad van de pagina waarop de widget staat	bijv. `/mijn-omgeving/`
`initial-path`	Startpad waarop de widget opent (voor categorie-specifieke weergave)	bijv. `/Beeldend`
`disable-menu`	Navigatiebalk volledig verbergen	`true`
`disable-mijn-omgeving`	Externe link naar mijn omgeving verbergen	`true`

:::note Mode Parameter Voor standaard modus hoef je de mode parameter niet toe te voegen. Als je alleen het inschrijfformulier wilt tonen, gebruik dan de Form Only Modus. :::

Verschil tussen `router-base` en `initial-path`

Deze twee attributen lijken op elkaar maar lossen elk een ander probleem op:

router-base is technisch: het vertelt Vue Router op welk pad de widget draait op de server. Zonder dit ziet Vue Router bij een bezoek aan /mijn-omgeving/Beeldend de volledige URL als de route, inclusief het prefix. Met router-base="/mijn-omgeving/" snapt Vue Router dat /mijn-omgeving/ de basis is en dat /Beeldend de eigenlijke route is.

initial-path is inhoudelijk: het stuurt de widget bij het laden naar een specifieke categorie, ongeacht de URL. Handig als je de widget op een pagina zet die altijd één categorie moet tonen.

Situatie	Gebruik
Iemand klikt een directe link naar `/mijn-omgeving/Beeldend` — widget moet dit correct openen	`router-base`
Widget staat op een pagina en moet altijd met Beeldend starten, ongeacht de URL	`initial-path`
Widget op een "Beeldend"-pagina zonder navigatiebalk	`initial-path="/Beeldend"` + `disable-menu="true"`

:::tip Wanneer gebruik je wat? In de meeste WordPress-integraties heb je alleen router-base nodig. initial-path is alleen nuttig als je de widget op meerdere aparte pagina's inbedt en per pagina een andere categorie wilt forceren. :::

Volledige HTML Voorbeeld

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Website met Cursad Widget</title>
</head>
<body>
    <base href="/mijn-omgeving/">
    
    <main>
        <app-entry 
          data-theme="light" 
          style="--color-primary: #3e80c0" 
          configuration="428046d6-4952-4658-9584-3690440fbab5" 
          cursadweb-url="https://ontwikkel.cursadtestweb.nl" 
          api-url="https://apitest.cursadtestweb.nl/v4/api">
        </app-entry>
    </main>
    
    <script src="https://demowebsite.cursadtestweb.nl/myenv/my-env-widget.js"></script>
</body>
</html>

Styling Aanpassen

Er zijn twee manieren om de widget in jouw huisstijl te zetten.

Optie 1: Alleen de primaire kleur (snel)

Zet --color-primary als inline stijl op <app-entry>. Dit is voldoende als je alleen de merkkleur wilt aanpassen:

<app-entry 
  data-theme="light"
  style="--color-primary: #3e80c0;"
  ...>
</app-entry>

Optie 2: Volledig eigen thema via DaisyUI Theme Generator (aanbevolen)

Dit geeft volledige controle over alle kleuren: achtergronden, tekst, knoppen, inputs en meer.

Stap 1: Ga naar de DaisyUI Theme Generator en stel de kleuren in naar jouw huisstijl.

Stap 2: Klik op "Copy as CSS variables" en plak de gekopieerde variabelen in een <style>-tag in de <head> van je pagina. Wikkel ze in een [data-theme="mijnthema"] selector:

<style>
  [data-theme="mijnthema"] {
    /* Plak hier de variabelen van de DaisyUI theme generator */
    --color-primary: oklch(55% 0.2 250);
    --color-primary-content: oklch(98% 0 0);
    --color-secondary: oklch(65% 0.15 180);
    --color-secondary-content: oklch(98% 0 0);
    --color-accent: oklch(70% 0.2 30);
    --color-accent-content: oklch(98% 0 0);
    --color-neutral: oklch(30% 0.02 260);
    --color-neutral-content: oklch(90% 0 0);
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(96% 0 0);
    --color-base-300: oklch(91% 0 0);
    --color-base-content: oklch(20% 0.02 260);
    --color-info: oklch(70% 0.15 200);
    --color-success: oklch(65% 0.18 145);
    --color-warning: oklch(80% 0.18 80);
    --color-error: oklch(60% 0.22 25);
  }
</style>

Stap 3: Koppel het thema aan de widget via data-theme:

<app-entry 
  data-theme="mijnthema"
  configuration="AANVRAGEN-BIJ-CURSAD"
  api-url="https://apitest.cursadtestweb.nl/v4/api"
  cursadweb-url="https://ontwikkel.cursadtestweb.nl">
</app-entry>

:::tip Themanaam aanpassen Je kunt mijnthema vervangen door elke naam zonder spaties, bijvoorbeeld cultuurhuis of academie. Zorg dat de naam in de <style>-tag en het data-theme-attribuut identiek zijn. :::

:::note Kleuren in oklch-formaat DaisyUI gebruikt het oklch() kleurformaat. De theme generator zet dit automatisch om vanuit de kleurkiezer. Wil je handmatig een hex-kleur omzetten? Gebruik oklch.com. :::

Categorie-specifieke weergave

Gebruik initial-path om de widget direct op een bepaalde categorie te laten openen. Combineer dit met disable-menu="true" om de navigatiebalk te verbergen — handig als je op een aparte pagina slechts één categorie wilt tonen.

<app-entry 
  data-theme="light"
  style="--color-primary: #3e80c0;"
  initial-path="/Beeldend"
  disable-menu="true"
  configuration="AANVRAGEN-BIJ-CURSAD"
  api-url="https://apitest.cursadtestweb.nl/v4/api"
  cursadweb-url="https://ontwikkel.cursadtestweb.nl">
</app-entry>

:::tip Categorieslug opzoeken De slug van een categorie vind je in de URL wanneer je door de widget navigeert. Navigeer naar de gewenste categorie — de slug is het laatste deel van de URL, bijvoorbeeld /Beeldend of /Muziek. :::

Problemen Oplossen

✅ Controleer of de JavaScript URL correct is
✅ Kijk in de browser console (F12) naar foutmeldingen
✅ Controleer of de configuration-ID geldig is
✅ Zorg ervoor dat de base href correct is ingesteld

CORS Errors

Als je CORS-fouten ziet in de console:

waarschuwing

Neem contact op met Cursad support. CORS-instellingen moeten aan de serverzijde worden geconfigureerd.

Widget: Standaard Modus

Quick Start

Installatie Stappen

Stap 1: JavaScript Toevoegen

Stap 2: Base href Toevoegen

Stap 3: Widget Plaatsen

Stap 4: Rewrite-regel Instellen (alleen voor WordPress)

Configuratie Opties

Verschil tussen `router-base` en `initial-path`

Volledige HTML Voorbeeld

Styling Aanpassen

Optie 1: Alleen de primaire kleur (snel)

Optie 2: Volledig eigen thema via DaisyUI Theme Generator (aanbevolen)

Categorie-specifieke weergave

Problemen Oplossen

Widget laadt niet

CORS Errors

Styling Problemen

WordPress Specifieke Problemen

Gerelateerde Documentatie

Quick Start​

Installatie Stappen​

Stap 1: JavaScript Toevoegen​

Stap 2: Base href Toevoegen​

Stap 3: Widget Plaatsen​

Stap 4: Rewrite-regel Instellen (alleen voor WordPress)​

Configuratie Opties​

Verschil tussen router-base en initial-path​

Volledige HTML Voorbeeld​

Styling Aanpassen​

Optie 1: Alleen de primaire kleur (snel)​

Optie 2: Volledig eigen thema via DaisyUI Theme Generator (aanbevolen)​

Categorie-specifieke weergave​

Problemen Oplossen​

Widget laadt niet​

CORS Errors​

Styling Problemen​

WordPress Specifieke Problemen​

Gerelateerde Documentatie​

Quick Start

Installatie Stappen

Stap 1: JavaScript Toevoegen

Stap 2: Base href Toevoegen

Stap 3: Widget Plaatsen

Stap 4: Rewrite-regel Instellen (alleen voor WordPress)

Configuratie Opties

Verschil tussen `router-base` en `initial-path`

Volledige HTML Voorbeeld

Styling Aanpassen

Optie 1: Alleen de primaire kleur (snel)

Optie 2: Volledig eigen thema via DaisyUI Theme Generator (aanbevolen)

Categorie-specifieke weergave

Problemen Oplossen

Widget laadt niet

CORS Errors

Styling Problemen

WordPress Specifieke Problemen

Gerelateerde Documentatie