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.
Voordat je aan het integratieproces begint, zorg ervoor dat je aan de volgende vereisten voldoet:
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);
});
Zodra de Vulp API is geladen, initialiseer je de API met de initialize-methode voordat je deze gebruikt:
await VulpApi.initialize();
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
);
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);
})
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();
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();
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!
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.
