Get Started

Whether you are new to the zoovu platform or are familiar with our previous platform, this guide will support your platform journey to creating Digital Assistants. You will be walked through the main steps from a plain canvas to integrating your assistant onto your website.

Ready? Let’s go.

1. Create A New Assistant[Back to top]

Whilst you are still getting a feel for the zoovu platform, the easiest way to begin is by clicking ‘Start’ and selecting one of the many available templates and adjusting it to your requirements. If you do not find a suitable template or if you would prefer to start from scratch, you can click on ‘skip and start from blank’.

2019-04-01_11_19_46-zoovu.png

1.1 Start From A Template [Back to top]

First, choose a Design you want to work with.

2019-04-01_11_20_15-zoovu.png

Alternative: Select a primary and secondary accent in the color palette on the left-hand side, and choose a theme layout to begin with.

TIP

You are always able to adjust both the theme and all the associated colors later in the design area. So, don’t worry if you don’t feel 100% sure about your choices in the beginning.

Now that you have the Design in place, choose the assistant structure Template you will use. For this example we will choose the “Adult Bikes” template.

2019-04-01_11_20_35-zoovu.png

You will be shown a Template Preview which makes it easier to envision the first draft of your future assistant. Click on  Create assistant to continue.

2019-04-01_11_22_20-zoovu.png

As simple as that, you can now customize the template assistant to make your own Digital Assistant.

Jump to Chapter 2 to learn how to manage questions and answers.

1.2 Start Blank [Back to top]

If you would like to create a digital assistant from scratch you have the following option:

On the Introduction page click Skip and start from blank.

2019-04-01_11_23_52-zoovu.png

 This option will lead you to a blank canvas ready for you to create your Digital Assistant!

image8__1_.png

Jump to Chapter 2 to learn how to manage questions and answers.

2. Build Assistant’s Questions And Answers[Back to top]

Now that you know you can work from a predefined template or create assistants from scratch, we will show you how to manage the questions and answers using our Question Bank, which you may be familiar with from the Anatomy chapter. 

2.1 Predefined Template[Back to top]

If you chose to work with one of the templates, a default Q&A flow will be generated automatically. From this point, you can either choose to use the assistant as out of the box or make adjustments and customize it to better reflect your brand’s voice and tone.

image87.png

Changing a question

Double-click on the question you wish to edit...

image93__1_.png

on the right-hand side, the Question Bank will slide into view.

image14__1_.png

Here you can edit the question to better suit your needs.

In addition to text changes, the following changes are also available:

  • Add a question image
    image69__1_.png
  • Add a question description
    image85__1_.png
  • Set a route for the question (routes will be covered in chapter 3).image23__1_.png

Adding A Question

To add a question, double-click anywhere on the empty canvas and a new question container will appear.

image60.png

Just type the question text and hit enter. Your new question is ready to be used (you will learn how to map your new question to the flow in chapter 3). 

image27.png

Adding Answers

Now that you have created a new question we need to add some answers to it.

Double-click the question container to edit it in the Question Bank and click image36.pngto add answers.

image79__1_.png

Each click will open a new answer section. For the purpose of this guide, we will create two answers.

2019-03-26_12_49_59-Zuvoo_spa.png

Simply type in the answer texts.

2019-03-26_12_55_17-Settings.png

TIP

Remember, you can choose different answer types depending on what you want to achieve with the question and how many possibilities you want to give the user. See “Answer Settings” in the “Anatomy” part of this manual.

As with the questions you have additional options to customize the answers:

  • Add answer image
    image63__1_.png
  • Add answer description
    image35__1_.png
  • Map product data to your answer (this will be covered in the Map answer to your product catalog part of this chapter)
    image19__1_.png

Mapping Answers To Your Product Catalog

Once you have added all the answers to the question, the answers need to be mapped to the features available in the product catalog. This will ensure that products with the most compatible attributes as identified by the users throughout the assistant are recommended on the results page. (You will learn how to upload and manage your Product Catalog in Chapter 5).

To add business rules, click on the product mapping icon.

image70__1_.png

A new panel to specify which attributes in the product catalog should be matched to the answer.

2019-04-15_09_17_16-.png

In this example, we would like the answer to map to bikes that have an electric engine.
We achieve this using the following three steps: 

  1. Choose the attribute: “electric”
    2019-04-15_09_23_022-.png
    The Attribute dropdown displays all the column headings available in the product feed.
  2. Specify the value of that attribute as “True”
    2019-04-15_09_23_02-.png
    The Value dropdown displays all the values contained in the column heading (Attribute) selected.
  3. Click Apply
    image81.png

Map the rest of the answers to the respective attributes from the product catalog and we will see each other in the next Chapter!

2.2 Blank Page[Back to top]

Working with a Blank Page follows the same logic as working with a Predefined Template, the only difference being that you need to create all the questions from scratch.

Double-click anywhere on the canvas to create your first question and follow the instructions from point 2.1 Predefined Template to prepare your entire Q&A base. Once you have that, you will learn how to map the questions and shape the flow in Chapter 3!

3. Shape Your Assistant’s Flow [Back to top]

Now that you know how to create questions and answers, let’s move to the exciting part - building your personalized assistant conversation flow! The flow will be built in the same workspace where the questions and answers were built.

Now that we’ve got you excited, let’s start! Creating a conversation flow is really easy.

First, we start with the blank page and add a couple of questions to it.

image8__1_.png

TIP

Double-clicking on a question on the Flow Editor will let you edit the question type, text and answers in the right-hand question bank menu. You can also control if a question has to be answered to proceed or can be skipped.

You should end up with something as this...

image46.png

Well done! Now that you have your questions have been created, you can build out the different flows.

Simply click on the green point next to the question to start the flow from, and drag the dotted line to the question you want to proceed with.

Repeat the action until your Q&A flow is complete Your simple conversation flow is ready!

image29.png

Now let’s go back to the example from Chapter 2, where you decided to modify the flow and add one more question regarding the Hybrid Engine. Based on this you will see how easy it is to build a dynamic flow for your assistant.  

image22.png

First, let’s make a new path to the new question. Since you want this to be an additional question when someone chooses “Hybrid bike” in Q1 we will connect them.

image65.png

Once you identify the path the “Route” panel will open on the right-hand side of the screen. Here you will define the conditions for the path.

2019-03-26_13_54_29-Zuvoo_spa.png

Let’s say you want people to see this question only if they pick “Hybrid bike” in question 1. To achieve this you will need to define:

  • Which question will direct you to the additional one.
    2019-03-26_13_56_49-Zuvoo_spa.png
  • Which question this should lead to (here you can define a different target question if needed).
    image10__1_.png
  • Label for this Route (to easily identify the logic of this route).
    image12.png
  • Condition(s) for this routing.
    image62.png

 In this scenario you want the user to be directed to “How do you want your hybrid bike to be powered?” only if they answered “Hybrid bike” in “I’m looking for a…”

It’s very simple and this is how you do it:

image83__1_.png

Conditions

IF: “I’m looking for a…” “Hybrid bike’  is answered in question 1.

THEN: the user will be directed to question 2: “How do you want your hybrid bike to be powered?”.

Click image30.png and that’s it. Your first condition is done!

TIP

You can have more than one condition for a single Route. Just add as many Rules or Groups in the “Conditional Routing” section

Let’s finish creating the path for “How do you want your hybrid bike to be powered?”. Since we already know the user is looking for a motor-powered bike, we can skip “How do you want to ride your bike?”, and jump straight to “Are you looking for a women’s specific bike?”.

Simply drag and drop a line between the 2 questions and you are done!

image48.png

You can create a countless number of questions in the same view and simply map them using the described logic. You are able to build simple maps like the one shown above or very complex maps with multiple outcomes depending on which answers the users choose.

The sky and your imagination is the limit here!

4. Customize The Design And Appearance[Back to top]

Give yourself a pat on the back, your Q&A flow is essentially ready now. Next, we will walk you through customizing the look and feel of your assistant. While in the assistant tab, switch to the Design sub-tab, and on the right-hand side and select ‘Appearance’.

2019-03-26_13_32_23-Zuvoo_spa.png

An array of option settings will drop down, the following are included and we will go through each of them in turn:

  • Change theme
  • Question Configuration
  • Colors
  • Answers Configuration
  • Fonts
  • Standard Texts
  • Recommendation Settings
  • Custom CSS configuration

image3__1_.png

Change theme

There are a number of different assistant themes that can be chosen; browse through them and select the one which you think will look best on the webpage.

Question Configuration

Show Images: this check box gives you the opportunity to hide the question images.

Colors 

Primary and secondary colors can be changed by clicking on the color boxes and either selecting another hue or by entering a required hex code.

Answers Configuration

There are two checkpoints:

  • Show Disabled: For some assistants, certain paths of the assistant will lead users down specific subcategories of the entire assistant category (e.g. Robot vacuums in a vacuum assistant). In some cases, for certain questions later in the Q&A flow, there may be some answers that do not apply to the remaining recommended products (e.g. in the robot vacuum path, in a features question, the length of the cord is not appropriate). This checkbox lets you decide if you want to have those unsuitable answer options completely hidden or visible but greyed up (an unselectable).
  • Show Images: this check box gives you the opportunity to hide the images for each answer.
  • Automatically move to the next question: for single choice questions user will be automatically redirected to the next question after selecting the answer - no need to click on the "Next" button.

Fonts

Base font sizes can be changed by selecting a size in the textbox. A selection of fonts is available from the dropdown below also.

Standard Texts

This section allows you to customize the ‘general’ text of the advisor, such as the ‘next’ and ‘back’ buttons. Once all the texts have been updated, click on ‘Apply texts’.

image4.png

Recommendation Navigation Configuration

Depending on how many SKUs are available in the assistant category and how many are recommended on the results page once the user has completed the assistant, you may want to limit the number of pages of results listed in order not to overload the user with results. This dropdown allows you to limit the number of pages of results visible at the end of the assistant. Note: for some assistants, this may not be necessary (if the product category is small).

Custom CSS

This section allows you to fully customize your assistant appearance using CSS Editor. This feature is more widely described in dedicated Custom CSS article

5. Import Your Product Catalog [Back to top]

What would your Digital Assistant be without a catalog of your products? Let’s take a look at how to connect the products with your assistant. You can do it in two ways:

  • By importing your own data file.
  • If you’ve chosen a template by simply adjusting the existing data file.

Zoovu makes it possible to upload, export and edit your product catalog even after you create your assistant’s flow. So, don’t worry you can always adjust it to your needs.

5.1 Upload Own Product Catalog [Back to top]

First, move to the products tab where you are able to simply import your product catalog from your local drive.

image15.png

Easily drag & drop the file you want to upload or browse your local drive. You can upload files in the following formats: xls, xlsx, csv.

image25.png

In the next step we have to match mandatory columns in the assistant (price, name, offerurl, picture, sku) to columns existing in your catalog (imported columns). You can map them by picking relevant columns from a dropdown list.

image51.png

Great job! You’ve successfully imported your product catalog! Now you can browse through your products in Preview mode.

image61.png

5.2. Export Product Catalog [Back to top]

Once you have built your assistant based on a template and would like to adjust the product catalog on your computer, you can simply download the data sheet by clicking image67.png.

TIP

Exporting the product catalog is also valuable when you have made changes in the Editor mode and would like to save the updated catalog to your computer.

5.3. Edit Product Catalog [Back to top]

Should some products details need to be changed, you can adjust the product catalog directly on the platform by switching from the Preview and the Editor mode. So it’s not necessary to upload the data again.

 image53.png

In this mode, you can simply pick a cell that you want to change by double-clicking. Once you select this, you can insert a new value. Remember to click image42.png otherwise changes won’t be saved. If you’re not sure you can always restore the original version by clicking image32.png.

image2.png

6. Integrate Your Digital Assistant [Back to top]

You’re finally there! It’s time to integrate and take your new Digital Assistant live on your webpage to support your customers! If your assistant is ready to work then you have to publish your changes by simply clicking the image42.png button. This option allows you to work on your assistant without presenting the changes online until you decide to do so.

Then navigate to the ‘Integration’ tab at the top of the screen.

2019-03-29_13_59_45-zoovu.png

Simply copy the JavaScript integration code available in the text box, or click on the ‘copy to clipboard’ button; this single line of code should be pasted in the <body> section of the webpage where the assistant should be displayed.

mceclip0.png  

Congrats! You have successfully integrated your Digital Assistant into your website. Get back to the dashboard to see how you’re engaging your customers!

gif.gif
Was this article helpful?
4 out of 4 found this helpful

Comments

0 comments

Please sign in to leave a comment.