Widget Functionaliteiten

Gebruik de globale window.CONSTELL API om de widget programmatisch te bedienen


Overzicht van window.CONSTELL

De Constell Widget biedt een globale JavaScript API waarmee u de widget vanuit uw eigen code kunt bedienen. Deze API is beschikbaar zodra de widget is geladen en biedt volledige controle over de widget staat.

📋 Beschikbaarheid

Het window.CONSTELL object wordt automatisch beschikbaar gesteld nadat het widget script is geladen. U hoeft geen extra configuratie te doen.

Beschikbare Methoden

De volgende methoden zijn beschikbaar via window.CONSTELL:


CONSTELL.open()

Opent de widget modal handmatig. Gebruik deze methode om de widget te openen via aangepaste knoppen of events.

// Syntax
window.CONSTELL.open()

// Use example
const customButton = document.getElementById('my-custom-button');
customButton.addEventListener('click', () => {
    window.CONSTELL.open();
});

<button id="my-custom-button">Your custom text</button>

// Alternative use example
<button id="my-custom-button" onclick="window.CONSTELL.open()">Your custom text</button>

CONSTELL.close()

Sluit de widget modal handmatig. Gebruik deze methode om de widget te sluiten via aangepaste knoppen of events.

// Syntax
window.CONSTELL.close()

// Use example
const closeButton = document.getElementById('my-custom-button');
closeButton.addEventListener('click', () => {
    window.CONSTELL.close();

<button id="my-custom-button">Your custom text</button>
});
// Alternative use example
<button id="my-custom-button" onclick="window.CONSTELL.close()">Your custom text</button>

CONSTELL.toggle()

Schakelt tussen open en gesloten staat van de widget. Handig voor toggle-knoppen.

// Syntax
window.CONSTELL.toggle()

// Use example
const toggleButton = document.getElementById('toggle-widget');
toggleButton.addEventListener('click', () => {
    window.CONSTELL.toggle();
});

<button id="my-custom-button">Your custom text</button>

// Alternative use example
<button id="my-custom-button" onclick="window.CONSTELL.toggle()">Your custom text</button>

CONSTELL.navigate(target)

Navigeert naar een specifieke sectie binnen de widget. Als de widget nog niet open is, wordt deze automatisch geopend en vervolgens naar de opgegeven sectie genavigeerd.

// Syntax
window.CONSTELL.navigate(target)

// Parameters
// target: string - De sectie waar naartoe genavigeerd moet worden
// Mogelijke waarden: 'quote', 'self_quote', 'packages', 'appointment', 'contact_form'

// Use examples
// Navigeer naar offerte maken
window.CONSTELL.navigate('quote');

// Navigeer naar zelf offerte maken
window.CONSTELL.navigate('self_quote');

// Navigeer naar pakketten sectie
window.CONSTELL.navigate('packages');

// Navigeer naar afspraak sectie
window.CONSTELL.navigate('appointment');

// Navigeer naar contact formulier
window.CONSTELL.navigate('contact_form');

// Gebruik met custom buttons
const packagesButton = document.getElementById('show-packages');
packagesButton.addEventListener('click', () => {
    window.CONSTELL.navigate('packages');
});

const appointmentButton = document.getElementById('book-appointment');
appointmentButton.addEventListener('click', () => {
    window.CONSTELL.navigate('appointment');
});

<button id="show-packages">Bekijk Pakketten</button>
<button id="book-appointment">Maak Afspraak</button>

// Alternative inline gebruik
<button onclick="window.CONSTELL.navigate('packages')">Bekijk Pakketten</button>
<button onclick="window.CONSTELL.navigate('appointment')">Maak Afspraak</button>
<button onclick="window.CONSTELL.navigate('contact_form')">Contact</button>

Voor de 'packages' sectie kunt u een tweede parameter (payload) meegeven om de pakketten direct te filteren op basis van het event type. Dit opent de widget en toont alleen de relevante pakketten voor het opgegeven event type.

// Navigate with payload for filtering packages
// Syntax: window.CONSTELL.navigate(target, payload)

// Navigate to packages with event type filter
window.CONSTELL.navigate('packages', {eventType: 'birthday'});

// Navigate to packages with different event types
window.CONSTELL.navigate('packages', {eventType: 'babyshower'});

// Use with custom buttons for filtered package views
const birthdayPackagesBtn = document.getElementById('birthday-packages');
birthdayPackagesBtn.addEventListener('click', () => {
    window.CONSTELL.navigate('packages', {eventType: 'birthday'});
});

const babyshowerPackagesBtn = document.getElementById('babyshower-packages');
babyshowerPackagesBtn.addEventListener('click', () => {
    window.CONSTELL.navigate('packages', {eventType: 'babyshower'});
});

<button id="birthday-packages">Verjaardag Pakketten</button>
<button id="babyshower-packages">Babyshower Pakketten</button>

// Alternative inline gebruik met payload
<button onclick="window.CONSTELL.navigate('packages', {eventType: 'birthday'})">Verjaardag Pakketten</button>
<button onclick="window.CONSTELL.navigate('packages', {eventType: 'babyshower'})">Babyshower Pakketten</button>

Implementatie Voorbeelden

Aangepaste Knop

Vervang de standaard widget knop door uw eigen design:

<!-- HTML -->
<button id="custom-booking-btn" class="my-custom-button">
    Reserveer Nu
</button>

<!-- Widget zonder standaard knop (verborgen) -->
<constell-widget
    venue="your-venue-id"
    style="display: none;">
</constell-widget>

<script>
document.getElementById('custom-booking-btn').addEventListener('click', () => {
    window.CONSTELL.open();
});
</script>
Best Practices
  • Controleer altijd of window.CONSTELL beschikbaar is voordat u het gebruikt
  • Zorg voor duidelijke visuele feedback wanneer gebruikers custom triggers gebruiken
  • Houd rekening met toegankelijkheid bij custom knoppen (ARIA labels, keyboard support)
  • Gebruik event delegation voor meerdere triggers om performance te optimaliseren
  • Test altijd custom implementaties op verschillende apparaten en schermformaten

Error Handling

Implementeer robuuste error handling voor uw custom implementaties:

<script>
function safeWidgetOpen() {
    try {
        // Controleer of API beschikbaar is
        if (typeof window.CONSTELL === 'undefined') {
            console.warn('Constell Widget API is not available');
            // Fallback actie, bijv. scroll naar contact sectie
            document.getElementById('contact-section').scrollIntoView();
            return;
        }

        // Controleer of open functie bestaat
        if (typeof window.CONSTELL.open !== 'function') {
            console.warn('Constell Widget open method is not available');
            return;
        }

        window.CONSTELL.open();

    } catch (error) {
        console.error('Error opening Constell Widget:', error);
        // Fallback UI of alternatieve actie
        showFallbackContactForm();
    }
}

function showFallbackContactForm() {
    // Implementeer fallback contact formulier
    alert('Widget is tijdelijk niet beschikbaar. Neem contact met ons op via telefoon of email.');
}
</script>
⚠️ Belangrijke Opmerking

In niet-ondersteunde browsers zal window.CONSTELL niet beschikbaar zijn. Implementeer altijd fallback opties voor deze situaties.

Styling Gids Probleemoplossing