Skip to main content

@zoovu/exd-api

The @zoovu/exd-api package helps you easily build extensions for Experience Designer.

  • It simplifies interaction with Zoovu assistants by wrapping the lower-level @zoovu/runner-browser-api.
  • It provides a single entry point called zoovuFacade. It groups the most useful methods from the full Zoovu assistant API into a simpler, easier-to-use structure.

Why use this package​

The @zoovu/exd-api makes it easier to work with assistants by:

  • grouping related functionality
  • reducing the amount of setup code you need
  • improving type safety and developer experience in TypeScript

You can still access the full API underneath if needed, but for most use cases, zoovuFacade will cover everything you need.

Installation​

The package is usually added automatically when you generate a new extension. You’ll see it in your package.json file:

"dependencies": {
  "@zoovu/exd-api": "0.6.0"
}

INFO: Make sure you are using Node.js version 20.

Use @zoovu/exd-api in an extension​

If you’re using a standard extension setup, just extend the ZoovuFacadeMixin in your Vue component:

import { ZoovuFacadeMixin } from "@zoovu/exd-api";
import { advisorViewContext } from "@zoovu/runner-browser-api";

@Component({})
export default class MyComponent extends Mixins(ZoovuFacadeMixin) {
  @Inject()
  private context: advisorViewContext;

  goToNextQuestionSimplified() {
    this.zoovuFacade.navigation.next();
  }

  goToNextQuestionDirect() {
    this.context.advisor.advisorNavigation.next();
  }
}

Core components​

Move between steps in the assistant flow.

this.zoovuFacade.navigation.next(); // go to next question
this.zoovuFacade.navigation.back(); // go to previous question

Questions and answers​

Work with questions and their answers.

const question = zoovuApi.firstQuestionFromCurrentPage;
const specificQuestion = zoovuApi.useQuestion(questionId);
const specificAnswer = zoovuApi.useAnswer(answerId);

specificAnswer.select(); // select an answer

Products​

Access product data that the assistant returns.

const products = zoovuApi.products;
const recommendedProducts = products.perfectlyMatchedProducts;

Comparison​

Add or remove products from comparison.

const comparison = zoovuApi.comparison;
comparison.addProduct(productId);
comparison.removeProduct(productId);

Events​

Listen to assistant events and handle them in your component.

const events = zoovuApi.events;

const { unsubscribe } = events.subscribe("steps-navigation", (event) => {
  // handle the event
});

unsubscribe(); // stop listening when not needed

Localization​

Access information about the current locale and currency.

const locale = this.zoovuFacade.localization.locale;
const currencyCode = this.zoovuFacade.localization.currencyCode;

Waiting for initialization​

In some cases, you might need to wait until the assistant is fully loaded before accessing its data.

async mounted() {
  await this.zoovuFacade.waitForAdvisorInitialization();
  // safe to use the API now
}