1

Jinja Template Variables for WhatsApp Chat Renderer

Knugi edited this page 2025-04-27 04:04:14 +00:00

Table of Contents

• 🛠️ WhatsApp Chat HTML Template Customization
• 📦 Available Template Variables
• 💬 Message Dictionary Structure
• 🧪 Example Usage in Jinja Template

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

🛠️ WhatsApp Chat HTML Template Customization

You can design your own WhatsApp conversation page using a custom Jinja template. This gives you full control over layout and styling.

---

📦 Available Template Variables

When rendering your Jinja template, the following variables are available:

Variable	Type	Description
name	str	Name of the peer (individual or group).
msgs	list	List of message dictionaries. See Message Dictionary Structure below.
my_avatar	str	Path to the user’s avatar image.
their_avatar	str	Path to the peer or group's avatar image.
their_avatar_thumb	str	Thumbnail version of the peer's avatar (optional, smaller image).
w3css	str	Optional path or content of W3.CSS stylesheet if used for styling.
next	str	Link to the next chat (for pagination or navigation).
previous	str	Link to the previous chat.
status	str	Status message for the chat
media_base	str	Base path or URL to media files used in chat (images, videos, etc.).
headline	str	Optional custom headline or title for the chat page.

---

💬 Message Dictionary Structure

Each item in the msgs list is a dictionary representing a message. These fields come from the Message class:

Key	Type	Description
sender	str | None	The sender's name or phone number.
time	str	Time of message in %H:%M format.
key_id	str	Unique ID of the message.
timestamp	int	UNIX timestamp in seconds.
from_me	bool	True if the message was sent by the user.
reply	str | None	Message ID that this message is replying to.
quoted_data	str | None	Content of the replied-to message.
media	bool	True if the message includes media (image, video, etc.).
mime	str | None	MIME type of the media (e.g., image/jpeg, video/mp4).
caption	str | None	Caption associated with the media.
meta	bool	True if this is a metadata message (e.g., group join/leave).
data	str | None	Message text or metadata description.
received_timestamp	str	When the message was received (format: %Y/%m/%d %H:%M).
read_timestamp	str	When the message was read (format: %Y/%m/%d %H:%M).
message_type	int | None	Optional message type identifier.
safe	bool	Whether the message is safe for direct rendering (without sanitization).
thumb	str | None	Android-specific thumbnail (for stickers/media).
sticker	bool	Whether this message is a sticker.

---

🧪 Example Usage in Jinja Template

{% if headline %}
  <h1>{{ headline }}</h1>
{% endif %}

<div class="chat-container">
  {% for msg in msgs %}
    <div class="message {{ 'from-me' if msg.from_me else 'from-them' }}">
      {% if msg.meta %}
        <div class="meta">{{ msg.data }}</div>
      {% else %}
        {% if msg.reply %}
          <div class="quoted">{{ msg.quoted_data }}</div>
        {% endif %}
        {% if msg.media %}
          <img src="{{ media_base }}/{{ msg.key_id }}" alt="{{ msg.caption or 'Media' }}">
        {% endif %}
        <div class="text">{{ msg.data or msg.caption }}</div>
        <span class="time">{{ msg.time }}</span>
      {% endif %}
    </div>
  {% endfor %}
</div>

{% if previous %}
  <a href="{{ previous }}">Previous</a>
{% endif %}
{% if next %}
  <a href="{{ next }}">Next</a>
{% endif %}

Detailed examples can be found in the default templates of this project.