Skip to main content

Build an ExD extension

In this guide, we're going to show you how to build your own remote components, step by step. These components are the building blocks for making apps more interactive and engaging. We'll take you through creating a feature that lets users get personalized recommendations by collecting answers.

You can check the final result in this repository - flow step component example.

Our final product is going to look like this:

Remote component

Setup​

In order to start:

  • Make sure you have node@20 installed. You can use Node Version Manager on Windows or Linux
  • You need to be familiar with frontend development using Vue2.
  • Run npm install -g yarn to install Yarn globally.

Generate a 'tutorial' component using CLI​

# Generate a remote component from the 'tutorial' template
npx @zoovu/create-remote-component

# Choose the 'tutorial' template
? What template do you want to use? (Use arrow keys)
  button
  flow-step
  recommendations
❯ tutorial

Run in dev mode​

# Go to the directory and install npm dependencies
cd <the-name-you-specified>
yarn install

# Run the project
yarn dev

Create an assistant​

  • Go to Conversation Studio and create a new Digital Assistant.
  • Enable Experience Designer by switching on the toggle.

Switch on

  • Select the "Adult Bikes" template.

Template

Set up the theme in Experience Designer​

  • Go to Experience Designer at https://orca-experience.zoovu.com/.
  • Select the assistant in the selector, then choose the Theme 1 (Simple) once prompted. Click Open theme.
  • Your experience should look something like this:

Exd

Delete the deprecated flow step component from Canvas​

Make sure you have the latest version of the flow step component on your Canvas. (The old one is marked as "deprecated".) Run a component update if necessary.

  • Drag & drop the new flow step onto the canvas:

experience designer

Select your locally served component​

Open Experience Designer for developers​

Go to the developer page by accessing this link: https://orca-experience.zoovu.com/developer

Select the Tutorial Component​

Hover over the flow step and select it. The flow step's settings will then appear on the right hand side. Select the tutorial component.

Make sure that the yarn dev script is up and running. After starting the script, make sure to also refresh Experience Designer for developers once.

Switch on

Render the question text​

In order to render the question text we need to use the zoovuFacade.

You can find out more in our API documentation:

  • Go to the file src/flow-step.component.vue
  • Add question and questionText functions to your main component. Display questionText in the template.
src/flow-step.component.vue
<template>
  <div>
    <h2>{{ questionText }}</h2>
    <ul>
      <li>First question will be here</li>
      <li>Second answer will be here</li>
      <li>...</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, ComponentConfig } from "@zoovu/runner-browser-api";
import { Question, ZoovuFacadeMixin } from "@zoovu/exd-api";
import { FlowStepConfiguration } from "./flow-step.configuration";


@Component({})
export default class FlowStepComponent extends Mixins(ZoovuFacadeMixin) {
  @ComponentConfig(FlowStepConfiguration)
  componentConfiguration: FlowStepConfiguration;

  get question(): Question {
    return this.zoovuFacade.firstQuestionFromCurrentPage;
  }

  get questionText(): string {
    return this.question.text;
  }
}
</script>

<style lang="css" scoped>
@import url('https://fonts.googleapis.com/css?family=Poppins');
</style>

Now the question text is visible on the canvas. No need to refresh the page.

You can modify your component and the changes will be reflected on the Canvas instantly.

Question text is visible on canvas

Next: Right panel configuration​

In the next steps, we will add a right panel configuration so that our users can customize their components to reflect their brand colors, fonts etc.