💚 Chat Animation Tester

🚀 Chat Animator Documentation

A lightweight JavaScript library for creating animated chat interfaces.

Basic Setup

1. Add the Script

<script src="https://chatanimator.pages.dev/AnimatedChat.js"></script>

2. Initialize Chat

You can initialize the chat in two ways:

A. Using HTML Attribute

<div class="chat-container">
    <div data-chat-config='{
    "showHeader": true,
    "showInputField": true,
    "headerTitle": "Chat Example 💬",
    "headerAvatar": "C",
    "typingDuration": 1000,
    "placeholderText": "Type a message...",
    "outgoingMessageColor": "#25d366",
    "bottomMargin": "10px",
    "loop": true,
    "messages": [
        {
            "text": "Hi there! 👋",
            "type": "incoming",
            "delay": 1000,
            "showTyping": true
        },
        {
            "text": "Hello! This is amazing!",
            "type": "outgoing",
            "delay": 1000
        }
    ]
}'></div>
</div>

B. Using JavaScript

const chatElement = document.querySelector('.chat-container');
const config = {
    "showHeader": true,
    "showInputField": true,
    "headerTitle": "Chat Example 💬",
    "headerAvatar": "C",
    "typingDuration": 1000,
    "placeholderText": "Type a message...",
    "outgoingMessageColor": "#25d366",
    "bottomMargin": "10px",
    "loop": true,
    "messages": [
        {
            "text": "Hi there! 👋",
            "type": "incoming",
            "delay": 1000,
            "showTyping": true
        },
        {
            "text": "Hello! This is amazing!",
            "type": "outgoing",
            "delay": 1000
        }
    ]
};
const chat = new AnimatedChat(chatElement, config);

Configuration Options

Parameter	Type	Default	Description
showHeader	boolean	true	Show/hide the chat header with avatar and title
showInputField	boolean	true	Show/hide the input field at the bottom
headerTitle	string	""	Title displayed in the chat header
headerAvatar	string	""	Single character or emoji for the avatar
typingDuration	number	1000	Duration of typing animation in milliseconds
placeholderText	string	"Message..."	Placeholder text for the input field
bottomMargin	string	"10px"	Bottom margin for the input field
outgoingMessageColor	string	"#007aff"	Background color for outgoing messages
loop	boolean	false	Whether to loop the chat animation

Message Configuration

The messages array accepts objects with the following properties:

{
    "messages": [
        {
            "text": "Message text",    // The message content
            "type": "incoming",        // "incoming" or "outgoing"
            "delay": 1000,            // Delay before next message (ms)
            "showTyping": true        // Show typing indicator (for incoming)
        }
    ]
}

Available Methods

Method	Description
startAnimation()	Starts the chat animation sequence
stopAnimation()	Stops the current animation
resetAnimation()	Clears the chat and resets to initial state
reloadAnimation(newConfig)	Reloads the chat with new configuration

Record Phone Screen

Open chatanimator.pages.dev/ads.html on your phone and add it to your home screen. This way, you won't have the browser interface.

View more examples here 👇

Chat Configuration