API

Ob Webentwickler:in oder Betreiber:in eines Onlineshops: Unsere API ist das perfekte Werkzeug, um Ihren Onlineshop oder Ihre Website mit immersiven 3D-Erlebnissen aufzuwerten. Folgen Sie diesen Schritten, um Ihren Onlineshop mit unserem 3D-Produktkonfigurator zu verbinden.

Voraussetzungen

Bevor Sie mit der Integration beginnen, stellen Sie sicher, dass folgende Voraussetzungen erfüllt sind:

• API-Zugang: Die Vulp-API steht ausschließlich Enterprise-Kund:innen zur Verfügung und muss vom Vulp-Team aktiviert werden.

Integrationsschritte

1. Die Vulp JavaScript-API einbinden

Fügen Sie den folgenden Code zu einer JavaScript-Datei hinzu, die von Ihrer Anwendung geladen wird, um die Vulp JavaScript-API einzubinden:

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

2. Die API initialisieren

Sobald die Vulp-API geladen ist, initialisieren Sie sie vor der Verwendung mit der Methode initialize:

await VulpApi.initialize();

3. Ein Modell registrieren

Um mit einem Vulp-Modell zu interagieren, muss es bei der Vulp-API registriert werden. Registrieren Sie ein Modell mit der Methode registerModel und übergeben Sie das iframe mit dem Vulp-Modell als Parameter:

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

4. Auf Nachrichten reagieren

Richten Sie Listener ein, um stets über den Status des Vulp-Modells informiert zu sein. Es lassen sich verschiedene Listener registrieren, etwa onReady, onModelUpdated und weitere. Ausführliche Informationen finden Sie in der entsprechenden technischen Dokumentation:

model
  .onReady(({ model, view, apiVersion }) => {
      // Modell ist bereit, Befehle zu akzeptieren
  })
  .onModelUpdated(({ model }) => {
    console.log(model);
  })

5. Befehle senden

Mit der JavaScript-API senden Sie Befehle an das Vulp-Modell. Verfügbar sind Befehle wie activateAr, changeColor und weitere. Ausführliche Informationen finden Sie in der entsprechenden technischen Dokumentation:

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

6. Informationen abrufen

Nachdem die API initialisiert wurde, können Sie jederzeit mit Befehlen wie getModelConfig und getViewConfig Informationen vom Modell abrufen:

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

Technische Dokumentation

Für ein umfassendes Verständnis der Vulp 3D-Konfigurator-API konsultieren Sie unsere vollständige technische Dokumentation unter https://docs.vulp.studio/docs/api/introduction/getting-started/. Entdecken Sie die Möglichkeiten und werten Sie Ihre Webanwendung mit fesselnden 3D-Erlebnissen auf!

Bereit, Ihre Nutzererfahrung zu verändern? Integrieren Sie noch heute die Vulp 3D-Konfigurator-API!

Demo-Anwendung

Entdecken Sie die Möglichkeiten der Vulp JavaScript-API mit unserer Demo-Anwendung unter https://api-demo.vulp.studio/.

Diese Anwendung dient als technisches Showcase: Links wird das Vulp-Modell dargestellt, rechts die übergeordnete Anwendung. Das Styling wurde bewusst minimal gehalten, um die technischen Aspekte in den Vordergrund zu stellen.