Ga naar hoofdinhoud

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:

  1. Voeg het JavaScript-bestand toe aan je HTML-pagina.
  2. Zet de base href in de body.
  3. Plaats de widget op de gewenste locatie.
  4. (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.

Stap 3: Widget Plaatsen​

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:

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

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

Configuratie Opties​

AttribuutBeschrijvingWaarden
data-themeKleurenschema van de widgetlight, dark
styleCSS custom properties (bv. --color-primary)Hexkleur
configurationUnieke configuratie-ID (vraag aan bij support)UUID string
cursadweb-urlCursadWeb URL voor doorverwijzenVolledige URL
api-urlBackend URLVolledige URL
disable-menuMenu uitschakelen (optioneel)true, standaard ingeschakeld
disable-mijn-omgevingExterne link naar mijn omgeving verbergen (optioneel)true, standaard ingeschakeld
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.

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​

Je kunt de widget stylen door CSS custom properties te gebruiken:

<app-entry 
  style="--color-primary: #ff6b6b; --color-secondary: #4ecdc4; --border-radius: 8px;" 
  ...>
</app-entry>

Beschikbare CSS Custom Properties​

  • --color-primary: Primaire kleur
  • --color-secondary: Secundaire kleur
  • --border-radius: Afrondingsstraal van elementen
  • --font-family: Lettertype
  • --spacing: Ruimte tussen elementen

Problemen Oplossen​

Widget laadt niet​

  • ✅ 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.

Styling Problemen​

  • Test verschillende CSS custom properties
  • Test op verschillende schermformaten (mobiel, tablet, desktop)
  • Inspecteer element eigenschappen in developer tools (F12)
  • Controleer of er conflicterende CSS van de hoofdwebsite is

WordPress Specifieke Problemen​

  • Controleer of permalinks zijn vernieuwd na het toevoegen van de rewrite-regel
  • Zorg ervoor dat de pagina-ID correct is ingevuld bij PAGINAID
  • Test of de rewrite-regel actief is door naar /mijn-omgeving/ te navigeren

Gerelateerde Documentatie​