Conversation

Meet the Sensei Conversation module for Divi! Tell your story as a real chat. Build message threads that look like popular messaging apps, with bubbles, avatars, timestamps, read receipts and emoji reactions, and have them play out message by message with a typing indicator as visitors scroll to them. It works well for testimonials, product walkthroughs, support showcases and landing-page storytelling.

View Demo →

With the Sensei Conversation module you can:

1. Build a chat from individual messages, each on the incoming (left) or outgoing (right) side
2. Pick one of eleven chat styles, several of which draw the chat inside a phone mockup
3. Send text, images (a single photo or a photo group) and stickers
4. Add avatars, sender names, timestamps, read status and emoji reactions
5. Play the conversation with a typing indicator once the module scrolls into view
6. Preview the playback directly in the Visual Builder

How the module works

Sensei Conversation is a parent/child module. The parent module holds the chat as a whole: the chat style, what is shown for every message, and the typing simulation. Each child item is one message. Messages play in the order they appear in the builder, so drag them to reorder the conversation.

How to add the Conversation module

1. Open a page with the Divi Visual Builder
2. Click the + (Add New Module) button
3. Search for Sensei Conversation and click it to insert the module
4. Add a child message for every line of the chat and set its Bubble Direction
5. Click Play Conversation in the module settings to preview the playback

NOTE: Sensei Conversation is a Divi 5 module and has no Divi 4 counterpart. It appears in the Visual Builder only when Divi 5 is active.

Conversation Settings

The Conversation group of the parent module sets the look of the whole chat. The Chat Style option picks the messenger look:

1. Neutral / Custom is a clean base style for your own colors
2. iOS Style and iOS Style (Dark) draw the chat inside an Apple phone mockup
3. Material Style and Material Style (Dark) draw the chat inside an Android phone mockup
4. Green Messenger Style and Blue Messenger Style draw the chat inside a phone mockup, styled after popular messenger apps
5. Light Messenger Style, Dark Messenger Style and Minimal Messenger Style show the chat full width under a contact header
6. Auto (Follow Device) follows the visitor’s device: Apple devices get the iOS colors, and every other device gets the Material ones, rendered without the phone

The other options in the group control what each message shows:

1. Show Avatars shows the avatar image next to each message, and is on by default. Individual messages can override it
2. Show Sender Names shows the sender name above each message, like a group chat, and is off by default. Individual messages can override it
3. Show Timestamps shows the timestamp of each message, and is on by default
4. Show Read Status shows the sent, delivered and read indicator, and is on by default
5. Play Conversation replays the conversation on the canvas, so you can check the timing without leaving the builder. The same action is available from the module’s right-click menu

NOTE: The read status indicator only appears in chat styles that support it, and the phone mockup appears only in the styles listed above. Auto (Follow Device) uses the iOS or Material colors but renders the messages without the phone.

Typing Simulation

The Typing Simulation group controls how the conversation plays:

1. Simulate Typing shows a typing indicator before each message appears, and is on by default. The messages arrive one after another either way. This setting only decides whether the dots run ahead of them
2. Typing Indicator Duration sets how long the typing dots stay on screen before a message appears, from 0 to 5000ms, and defaults to 1200ms
3. Delay Between Messages sets the pause after a message appears before the next one starts, from 0 to 5000ms, and defaults to 800ms
4. Randomize Timing adds a small random variation to every duration and delay, so the chat feels less mechanical, and is on by default
5. Scroll Trigger sets how much of the module must be visible before the conversation starts playing, and defaults to 50%
6. Replay plays the conversation Once Per Page Load, or Every Time It Enters The Viewport

Messages

Each child item is one message. The Message Type option in its Message group sets what kind of message it is:

1. Text shows a chat bubble
2. Sticker shows a large image with no bubble
3. Image shows the image inside the bubble

The rest of the Message group fills in the message itself:

1. Message holds the text of the bubble. Leaving it empty skips rendering the message
2. Images / Stickers picks one or more images for the Sticker and Image types. Several images are laid out as a photo group inside the bubble, in the order set here
3. Sender Name is an optional name shown above the bubble, useful for group chats
4. Timestamp is free text shown under the bubble, for example 10:34
5. Avatar is the image shown next to the message
6. Bubble Direction places the message on the Left (Incoming) or Right (Outgoing) side. In right-to-left languages the sides are mirrored automatically
7. Reactions takes emoji characters shown as a reaction badge on the bubble, for example a heart and a thumbs up
8. Read Status sets the delivery indicator shown next to the timestamp: None, Sent, Delivered or Read

Four more options let a single message override what the parent module decided:

1. Typing Simulation follows the parent’s Simulate Typing setting on Default, and Force On or Force Off overrides it for this message only
2. Show Avatar follows the parent’s Show Avatars setting on Default, and can be set to Show or Hide
3. Show Sender Name follows the parent’s Show Sender Names setting on Default, and can be set to Show or Hide
4. Show Bubble Tail follows the chat style on Default. Neutral, Light, Dark and Minimal Messenger draw no tail, the other styles do, and Show or Hide overrides the style

NOTE: Messages play in the order they appear in the builder. To change who speaks when, drag the child items into a new order rather than editing the timings.

Design Settings

The parent module carries the styling of the thread as a whole:

1. Message List sets the padding and margin of the list, plus Message Spacing, the gap between messages when the sender changes. Leaving it empty keeps the chat style’s own spacing, and consecutive messages from the same sender stay grouped 5px apart, or closer when this is set lower
2. Text sets the text orientation and text shadow inherited by the messages

Each message carries its own styling, so a single bubble can break the pattern:

1. Bubble styles the bubble background, border, spacing and box shadow
2. Message Text styles the font, size, color and spacing of the message body
3. Sender Name Text styles the name shown above the bubble
4. Timestamp Text styles the timestamp shown under the bubble
5. Reactions Text styles the emoji reaction badge
6. Avatar Initial styles the letter shown when a message has no avatar image

NOTE: A chat style sets sensible colors for every element, so start from a style and override only what you need. Picking a new style afterwards does not clear the overrides you already made.