Skip to main content

A quick-start guide to extensions

Extensions are custom-built elements that let you add new functionality to Experience Designer. You can use them to create tailored user interfaces, dynamic components or entirely new flows for guided selling and configuration.

Use this guide to start building and testing extensions in Experience Designer. You’ll set up your environment, generate a sample extension, run a local development server, and load your extension into the Experience Designer interface.

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.

Extensions are refered to as (remote) components in the code.

1. Generate an extension using the tutorial template​

Open your terminal and run the following command:

npx @zoovu/create-remote-component

When prompted, choose tutorial as the template:

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

2. Install dependencies​

After selecting a template, navigate to your new project folder and install the dependencies:

cd <your-extension-name>
yarn install

3. Start the dev server and watch your changes​

To start a local server run yarn dev.

Open Experience Designer​

In a browser, go to https://orca-experience.zoovu.com.

Update your theme's components​

Click the Update button in the left panel. Confirm the update in the modal.

https://orca-experience.zoovu.com/developer

Update button on the left panel

Open developer mode​

Go to https://orca-experience.zoovu.com/developer.

Drag & drop your extension onto the canvas​

In the component library at the bottom, find the Flow Step component. Drag and drop it onto the canvas (or double-click it).

https://orca-experience.zoovu.com/developer

Select &quot;Flow Step&quot; component from bottom Components&#39; drawer

Select the extension from Flow Step's right panel configuration​

In the right panel, choose your generated extension variant from the dropdown.

https://orca-experience.zoovu.com/developer

Select &quot;Flow Step&quot; component from bottom Components&#39; drawer

Make changes to the extension​

Edit your Vue files and save. The changes will be immediately reflected on the screen.

After you start yarn run dev script, refresh Experience Designer for developers once to reconnect.