Chat Messages for Elementor

Create animated mobile-style chat message mockups with Elementor.

XElementor Chat Messages adds an Elementor widget for building a realistic phone chat window.

Plugin Preview

Chat Messages for Elementor

Chat messages simulation

It is designed for landing pages, product pages, portfolios, social proof sections, onboarding examples, and any layout where a visual message conversation helps explain the offer.

9:41
Messages
Hey, are we still on for tomorrow?
Yes. I will send the details in a minute.
Perfect, thanks.

Style anyway you want

The widget lets you build a custom thread with messages from the user or another person. 

9:41
Hey, is this widget fully customizable?
Yes. You can change any property and style it differently.
Wow, looks amazing. Even logo upload?
Yes. You can set the logo too.
Perfect!
Chat messages for Elementor!

Use without phone mockup

Messages animate into the phone one by one, can loop, and can include text or image-based bubbles. 

Hey, are we still on for tomorrow?
Yes. I will send the details in a minute.
Perfect, thanks.

Simulate images sending

Text message bubbles and image message bubbles with up to three images.

Can I simulate images sending?
Yes you can, here's a sample.
Perfect, thanks.

Styles and clips perfectly!

The phone frame, header, status bar, message input, message bubbles, wrapper, and avatars can be customized from Elementor controls.

Is there a dark mode?
Yes. Widget has style controls. You can set any colors.
Can multiple users appear in chat?
Did someone call me?
Yes. You can simulate multiple user talks.
QA How about a very long messaaaaaaaaaaaaaaaaaaaaaageeeeeeeeeeeeee. Even longer than this. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.
Scrolls perfectly!

Plugin Description

Chat Messages for Elementor

XElementor Chat Messages adds an Elementor widget for building a realistic phone chat window. It is designed for landing pages, product pages, portfolios, social proof sections, onboarding examples, and any layout where a visual message conversation helps explain the offer.

The widget lets you build a custom thread with messages from the user or another person. Messages animate into the phone one by one, can loop, and can include text or image-based bubbles. The phone frame, header, status bar, message input, message bubbles, wrapper, and avatars can be customized from Elementor controls.

  • Elementor widget for mobile-style chat message mockups.
  • Add unlimited messages with a repeater control.
  • Choose whether each message is sent by the user or another person.
  • Add avatar images or generate initials from a name.
  • Automatic avatar background colors based on the avatar name.
  • Text message bubbles and image message bubbles with up to three images.
  • iPhone-style animated message reveal.
  • Optional looping animation with configurable delays.
  • Optional phone header and message input mockup.
  • Header text or logo image support.
  • Controls for wrapper max width and max height.
  • Style controls for wrapper background, border, border radius, and shadow.
  • Style controls for message bubble colors.
  • Style controls for phone header, status bar, and input borders.

Browse latest widgets