Dialog Component

This component is suitable for use when creating accessible courses.

The Dialog component lets you build in a dialog between people in a messaging app style to your Evolve course.

This article provides an overview of the Dialog component, component setup and behavior, and provides examples of Dialog component configurations.

Component Overview

The Dialog component is an interactive component that lets you present a dialog between people in a messaging app style to your learners. You can set the Dialog component to start by clicking a button or to automatically start when the Dialog component comes into view on the course page.

The Dialog component is fully responsive and can be added as a left-side, full-width or right-side component.

Component Set Up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add a Dialog Title, or a Dialog Display Title, as needed. Dialog Display Title is seen by learners.

Scroll down and add your Dialog Body. Use the text editor to style and format your text, as needed.

1. Add a Dialog Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Add Dialog Start Button Text. This is the text on the button that starts the dialog component.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Dialog component. This widget can display an icon and label prior to the Dialog component completion, which changes to a different icon and label once the Dialog component is completed.

Add People & Dialog Items

People section

In the People section, you Add Persons to your Dialog component.

For each Person:

1. Add Person name. This is the name of the person displayed in the dialog.
2. Select Person Avatar, as needed. This image will be displayed in the dialog items for this Person.
3. Set Person Dialog Text Color, as needed.
4. Set Person Dialog Background Color, as needed.

Add, Duplicate and Delete Person Items as needed.

Add Dialog Items

In the Dialog Items section:

You Add Dialog Items to your Dialog component in the Dialog Items section.

1. Select Person, which Person from the People section is represented by this Dialog Item.
2. Add Dialog Text. This is the Dialog Item text. Use the text editor to style and format your text, as needed.
3. Set Item duration. This is the amount of time in milliseconds to display this item before showing the next Dialog Item. By default, this is set to 1500. If the "Use Next Button?" setting is enabled in the Behavior section, then this setting will be ignored.
4. Toggle to set the dialog to Appear from the Right Side.
5. Set Dialog Item Width. By default, this is set to 80%.

Add, Duplicate, and Delete Dialog Items as needed.

Behavior section

1. In the Behavior section, you toggle to Start Dialog Automatically. By default, this setting is disabled.
2. Toggle to disable Dialog Auto Scroll to Next Item. By default, this setting is enabled.
3. Toggle to enable Use Next Button. This setting is by default disabled. Enabling this will display a button that the learner must click to progress the dialog to the next item.

Add, duplicate, or delete cards as needed.

Component Examples

The Dialog component gives you a lot of flexibility. Below are examples that illustrate different layout choices for your Dialog component setup:

Example 1 – Dialog component, configured with two persons, before start.

Example 2 – Dialog component with two persons completed. This Dialog component example is configured to display an image for each person in the dialog items.

Appearance section

1. In the Appearance section, you set Dialog Start Avatar Width as needed. By default, this is set to 50px.
2. Set Dialog Item Avatar Width as needed. By default, this is set to 50 px.
3. Toggle to enable Show Person Name on Item. This will show each person’s name underneath each dialog item's avatar image.
4. Set Dialog Items Container Width.
5. Set Background Image.
6. Set Background Image Size.
7. Set Background Image Position.
8. Select Mobile Background Image.
9. Set Mobile Background Image Size.
10. Set Mobile Background Image Position.

Animations section

In the Animations section, you select what animations to run when the next Dialog component item is displayed.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.