@zoovu/exd-api NPM

@zoovu/exd-api

Hi there from Zoovu!

We're happy that you build your own Experience Designer components to build awesome assistants with Zoovu!

To help you out, let us introduce what is this package for.

Features

It lets you use our API in order to

show questions
show answers
show products
navigate to the next / other page
restart the assistant
select the answer
and more

Please find more in the API Docs

Usage

install the package

yarn add @zoovu/exd-api

use it in the component

// THIS EXAMPLE SHOULD BE UPDATED AS THIS SUCKS AND DOES NOT SHOW THE IMPLEMENTATION :)
<template>
    <div>

        <h2>Render a question text</h2>
        <p>{{ questionText }}</p>

        <h2>Navigate to the next question</h2>
        <p>
            <button @click="goToNextQuestion">Go to the next question</button>
        </p>
  </div>
</template>

<script lang="ts">
import {} from "@zoovu/exd-api";

import {
  Component,
  ComponentConfig,
  ComponentStyle,
  ComponentStyleDefinition,
  Mixins,
} from "@zoovu/runner-browser-api";

import { ZoovuFacadeMixin } from "./zoovu-facade.mixin";

@Component()
export default class ExampleComponent extends Mixins(ZoovuFacadeMixin) {
  @ComponentConfig(ExampleConfiguration)
  componentConfiguration: ExampleConfiguration;

  @ComponentStyle(exampleStyle)
  componentStyle: ComponentStyleDefinition;

  get questionText(): string {
    const currentPage = this.zoovuFacade.useCurrentPage();
    const question = this.zoovuFacade.useQuestion(currentPage.questions[0].id);

    return question.text;
  }

  goToNextQuestion(): void {
     const { next } = this.zoovuFacade.useNavigation();
      next();
  }
}
</script>