@zoovu/runner-browser-api

The @zoovu/runner-browser-api library connects your components to the Zoovu advisor engine. It lets you manage advisor state, navigate between questions, work with answers, and handle result pages. You can use it to build and control advisor behavior in your extension.

The library gives you access to:

• current advisor state, including user answers and flow steps
• navigation controls like moving to the next step or restarting
• methods for checking advisor type
• logic for managing results, configurators, and context

Installation

The library is available by default in Zoovu extensions. No need to install it separately.

Usage

Inject the advisor context into your Vue component using @Inject. That gives you access to the advisor object.

import {
  Advisor,
  AdvisorNavigation,
  AdvisorViewContext,
  Component,
  Inject
} from "@zoovu/runner-browser-api";

@Component({})
export default class MyComponent extends Vue {
  @Inject()
  context: AdvisorViewContext

  get advisor(): Advisor {
    return this.context.advisor;
  }

  get navigation(): AdvisorNavigation | null | undefined {
    return this.advisor?.advisorNavigation;
  }

  goToNextPage() {
    if (this.navigation) {
      this.navigation.next();
    }
  }
}

Common operations

Navigation

advisor.advisorNavigation.next(); // go forward
advisor.advisorNavigation.back(); // go back
advisor.advisorNavigation.restart(); // restart the flow
advisor.advisorNavigation.goToRecommendations(); // go to results

Advisor type

const isConfiguratorPanel = advisor.flowStepsNavigation.currentFlowStep.type === FlowStepType.CONFIGURATOR_PANEL;

const isKnownType =
  advisor.advisorType === AdvisorType.CONFIGURATOR ||
  advisor.advisorType === AdvisorType.PRODUCT_FINDER ||
  advisor.advisorType === AdvisorType.BUNDLE_FINDER ||
  advisor.advisorType === AdvisorType.GENERAL;

Questions and answers

const currentFlowStep = advisor.flowStepsNavigation.currentFlowStep;
const allFlowSteps = advisor.flowStepsNavigation.flowSteps;
const questions = currentFlowStep.questions;
const firstAnswer = questions[0].answers[0];

const isAnswerDisabled = firstAnswer.disabled;

if (!firstAnswer.disabled && !advisor.advisorNavigation.isFetching) {
  firstAnswer.select();
  await advisor.idle(); // wait for processing
}

Custom session state

const customState = advisor.customSessionState;

advisor.setCustomSessionState({
  ...customState,
  myCustomValue: 'value'
});

Working with the configurator panel

const configuratorPanel = advisor.flowStepsNavigation.flowSteps.find(
  step => step.type === FlowStepType.CONFIGURATOR_PANEL
);

const configuratorSections = configuratorPanel.sections;
const selectionSummary = configuratorPanel.selectionSummary;
const selections = configuratorPanel.selections;
const productStage = configuratorPanel.productStage;

Using context

Zoovu’s context system stores and updates session values, like user names or preferences.

const context = advisor.contextManager;

// render dynamic text
const rendered = context.render('Hello {{name}}!');

// get value
const nameValue = context.get('name');

// get all values
const allValues = context.getAll();

// set values
context.set([
  { key: 'language', value: 'en-US' },
  { key: 'theme', value: 'dark' }
]);

// subscribe to context changes
const subscriber = {
  update() {
    console.log('context updated');
  }
};

const unsubscribe = context.subscribe(subscriber);

// stop watching
unsubscribe();

Handling events

You can react to events like flow navigation changes.

const subscription = advisor.onGlobalEvent("steps-navigation", (event) => {
  // handle the event
});

advisor.offGlobalEvent(subscription);