Chat Thread

Introduction

The Chat Thread element allows you to create a polished chat-style interface
within your WordPress pages. It is ideal for showcasing conversational UI, AI interactions, customer support examples, or any narrative formatted as a dialogue.

Tether AI
How can I help you today?
Jacob Smith
What’s a fun activity that I can set up for the team meeting tomorrow?
Tether AI
Let me generate a few ideas…

You can customize the appearance of both sides of the conversation—avatars, bubble colors, text colors, and animation styles—to create dynamic, engaging storylines.

Use the Chat Thread element to:

  • Present mock conversations
  • Demonstrate AI assistant behavior
  • Walk users through example customer interactions
  • Add visual storytelling to landing pages
  • Highlight product or feature capabilities in a conversational format

Usage

The following options are available for configuring the Chat Thread element.

1. Outgoing Bubble Settings

These settings control the appearance of all outgoing messages (typically
representing the user or one side of a conversation).

  • Outgoing Chat Thread Bubble Image — Upload an optional avatar image
    that appears alongside outgoing messages.
  • Outgoing Bubble Name — Set the display name for outgoing messages.
    This appears above the bubble, simulating a sender identity.
  • Outgoing Bubble Color — Choose the background color of outgoing
    message bubbles.
  • Outgoing Text Color — Define the text color used inside outgoing
    message bubbles.

2. Incoming Bubble Settings

These settings control the appearance of all incoming messages (for example,
an AI assistant or another participant).

  • Incoming Chat Thread Bubble Image — Upload an avatar image to
    represent the incoming message sender.
  • Incoming Bubble Name — The name label displayed above incoming
    messages.
  • Incoming Bubble Color — Background color for incoming message
    bubbles.
  • Incoming Text Color — Text color for incoming bubbles.

3. Style Settings

These options customize the layout and appearance of the chat thread as a whole.

  • Image Size — Adjusts the avatar size for both incoming and outgoing
    participants. Range: 20–50px.
  • Chat Bubble Border Radius — Controls how rounded the message bubbles
    appear. Range: 0–30px (0 = square corners, 30 = pill-shaped bubbles).

4. Animation Settings

Use these settings to add motion and interactivity to your chat thread.

  • Animation — Choose how messages appear:
    • None — No animation.
    • Fade In — Bubbles gently fade into view.
    • Typing — Simulates a typing indicator before revealing the bubble.
  • Auto Height (available with Fade In or
    Typing) — Animates the bubble height as it expands with content,
    enhancing the effect of messages arriving in real time.
  • Loop Animation (available with Typing) — Allows
    the typing effect to loop continuously.