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.