Vragen.ai integreren in je website

Wat is oEmbed?

oEmbed is een populaire technologie die wordt gebruikt om externe content eenvoudig in een website te integreren. Diensten zoals Instagram, YouTube en Twitter maken gebruik van oEmbed om het insluiten van content te vergemakkelijken. In plaats van handmatig HTML of JavaScript in te voegen, kun je een URL gebruiken die automatisch wordt omgezet in een embed.Vragen.ai ondersteunt oEmbed, waardoor je eenvoudig een embed van een Vragen.ai-weergave op jouw website kunt plaatsen.

Insluiten in verschillende platforms

Drupal

Om Vragen.ai via oEmbed in Drupal te gebruiken, zijn er een paar stappen nodig:

1. Installeer de oEmbed Providers module

   • Deze module zorgt ervoor dat Drupal externe oEmbed-providers herkent en verwerkt.

   • Ga naar de Drupal modulepagina en zoek naar "oEmbed Providers".

   • Installeer en activeer de module.

   • Volg de instructies van de module om Vragen.ai als oEmbed provider toe te voegen
     Endpoint Schema: https://[JOUW-ACCOUNT].vragen.ai/*
     Endpoint URL: https://vragen.ai/oembed

2. Gebruik de Media-module

   • Drupal ondersteunt het insluiten van media via de Media-module.

   • Ga naar Beheer > Structuur > Media en voeg een nieuw media-type toe.

   • Kies "oEmbed / Online Video" als type en kies Vragen.ai als toegestane provider.

   • Nu kun je Vragen.ai-URL’s invoeren en worden ze automatisch omgezet in een embed:
     https://[JOUW-ACCOUNT].vragen.ai/display/hybrid

WordPress

In WordPress kun je Vragen.ai insluiten via oEmbed, maar eerst moet je Vragen.ai toevoegen aan de whitelist van oEmbed-providers.

1. Voeg Vragen.ai toe aan de whitelist

   • Gebruik een plugin zoals "oEmbed Plus" of voeg de volgende regel toe aan je functions.php bestand:

     <?php
     
     function register_vragenai_oembed_provider()
     {
         wp_oembed_add_provider('https://[JOUW-ACCOUNT].vragen.ai/*', 'https://vragen.ai/oembed');
     }
     
     add_action('init', 'register_vragenai_oembed_provider');

   • Dit zorgt ervoor dat WordPress de Vragen.ai oEmbed herkent.

   • Na het toevoegen van de code kan het nodig zijn om de WordPress cache te legen. Je kunt dit doen door de optie oembed_cache te verwijderen met een plugin als WP-CLI: wp cache flush

2. Plaatsen via de editor

   1. Gutenberg-editor:

      • Voeg een "Embed"-blok toe.

      • Plak de Vragen.ai URL in het veld en WordPress genereert automatisch de embed.

   2. Classic-editor:

      • Plak simpelweg de Vragen.ai URL in een nieuwe regel:
        https://[JOUW-ACCOUNT].vragen.ai/display/hybrid

      • WordPress zal automatisch de embed genereren en weergeven.

Zelf plaatsen met JavaScript

Als je geen CMS gebruikt of meer controle wilt over de embed, kun je de oEmbed-inhoud handmatig ophalen en invoegen met JavaScript.

Gebruik de volgende JavaScript-code om een Vragen.ai embed toe te voegen aan een pagina:

async function fetchVragenaiEmbed(url, containerElement) {
    try {
        const oEmbedEndpoint = `https://vragen.ai/oembed?url=${encodeURIComponent(url)}`;
        const response = await fetch(oEmbedEndpoint);
        
        if (!response.ok) {
            throw new Error(`Failed to fetch oEmbed content: ${response.statusText}`);
        }
        
        const data = await response.json();
        const context = document.createRange();
        
        const fragment = context.createContextualFragment(data.html);
        containerElement.appendChild(fragment);
    } catch (error) { console.error(error); }
}

//Vervang de URL met de juiste URL van jouw weergave.
const vragenAiURL = "https://[JOUW-ACCOUNT].vragen.ai/display/hybrid";

//Voeg de VragenAI embed toe aan dit element van de pagina.
const vragenAiContainer = document.body;
window.addEventListener('DOMContentLoaded', () => fetchVragenaiEmbed(vragenAiURL, vragenAiContainer));

Hoe werkt dit script?

1. De functie fetchVragenaiEmbed haalt de oEmbed-data op van de API.

2. De JSON-respons bevat een HTML-fragment, dat wordt ingevoegd in de pagina.

3. Het script wordt uitgevoerd zodra de pagina is geladen.

Door dit script op een webpagina te plaatsen, wordt de Vragen.ai-weergave automatisch weergegeven.