API

Of je nu een webontwikkelaar bent of een eigenaar van een webshop, onze API is het ultieme instrument om je webshop of website te verbeteren met meeslepende 3D-ervaringen. Volg deze stappen om aan de slag te gaan en je webshop te koppelen aan onze 3D-productconfigurator.

Vereisten

Voordat je aan het integratieproces begint, zorg ervoor dat je aan de volgende vereisten voldoet:

• API-toegang: De Vulp API is exclusief beschikbaar voor zakelijke klanten en vereist activering door het Vulp-team.

Integratiestappen

1. Voeg de Vulp JavaScript API toe

Voeg de volgende code toe aan een JavaScript-bestand dat door je applicatie wordt geladen om de Vulp JavaScript API op te nemen:

import('https://api.vulp.studio/v1/api.js')
    .then(async ({ VulpApi }) => {
      // Your code here
    })
    .catch(err => {
      console.error(err);
    });

2. Initialiseer de API

Zodra de Vulp API is geladen, initialiseer je de API met de initialize-methode voordat je deze gebruikt:

await VulpApi.initialize();

3. Registreer een Model

Interactie met een Vulp-model vereist registratie bij de Vulp API. Registreer een model met de registerModel-methode, waarbij de iframe die het Vulp-model bevat als parameter wordt opgegeven:

const model = await VulpApi.registerModel(
  document.querySelector('iframe') as HTMLIFrameElement
);

4. Luister naar Berichten

Stel luisteraars in voor berichten om op de hoogte te blijven van de status van het Vulp-model. Diverse luisteraars, zoals onReady, onModelUpdated en meer, kunnen worden geregistreerd. Raadpleeg de bijbehorende technische documentatie voor gedetailleerde informatie:

model
  .onReady(({ model, view, apiVersion }) => {
      // Model is ready to accept commands
  })
  .onModelUpdated(({ model }) => {
    console.log(model);
  })

5. Verzend Opdrachten

De JavaScript API maakt het mogelijk om opdrachten naar het Vulp-model te sturen. Opdrachten zoals activateAr, changeColor en meer zijn beschikbaar. Raadpleeg de bijbehorende technische documentatie voor gedetailleerde informatie:

const { activated } = await model.activateAr();

6. Haal Informatie Op

Op elk moment, nadat de API is geïnitialiseerd, haal informatie op uit het model met opdrachten zoals getModelConfig en getViewConfig:

const { model } = await model.getModelConfig();

Technische Documentatie

Voor een uitgebreid begrip van de Vulp 3D Configurator API, raadpleeg onze volledige technische documentatie beschikbaar op https://docs.vulp.studio/docs/api/introduction/getting-started/. Verken de mogelijkheden en verrijk je webtoepassing met boeiende 3D-ervaringen!

Klaar om je gebruikerservaring te transformeren? Integreer vandaag nog de Vulp 3D Configurator API!

Demo-applicatie

Ontdek de mogelijkheden van de Vulp JavaScript API met onze demo-applicatie op https://api-demo.vulp.studio/.

Deze applicatie dient als een technische showcase, waarbij het Vulp-model aan de linkerkant wordt getoond en de hoofdapplicatie aan de rechterkant. Let op dat de styling opzettelijk minimaal is gehouden om de technische aspecten te benadrukken.