Dialog Component

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

Follow these steps to add the Dialog component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Dialog component.
3. Click the Dialog component and select Add Left, Add Full or Add Right .

Click the Edit Component icon on the newly added Dialog component to begin set up.

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 that 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.

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.

Heads up!

If the "Use Next Button?" setting is enabled in the Behaviour section, then this setting will be ignored.

Toggle to set the dialog to Appear from the Right Side.

Set Dialog Item Width. By default, this is set to 80%.

Add, Duplicate and Delete Dialog Items as needed.

Behaviour section

1. In the Behaviour 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.

In the Appearance section, you can select a Background Image and set Background Image Size and Background Image Position.

Finally, in the Appearance section, you can select a Mobile Background Image and set Mobile Background Image Size and 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.