@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 { assistantViewContext } from "@zoovu/runner-browser-api";

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

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

  goToNextQuestionDirect() {
    this.context.assistant.assistantNavigation.next();
  }
}

Core components

Navigation

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.waitForassistantInitialization();
  // safe to use the API now
}