calvin.erfmann/WhatsApp-Chat-Exporter
1
0
Fork 0
mirror of https://github.com/KnugiHK/WhatsApp-Chat-Exporter.git synced 2026-03-12 00:53:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Result HTML Customization (Docs In Progress) (markdown)

Knugi
2025-04-27 04:04:14 +00:00
parent c1d1db75e0
commit 1169dbef97
2 changed files with 88 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Jinja-Template-Variables-for-WhatsApp-Chat-Renderer.md Normal file

@@ -0,0 +1,88 @@
# 🛠️ 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
```jinja
{% 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.

23
Result-HTML-Customization-(Docs-In-Progress).md

@@ -1,23 +0,0 @@
# Customization
You can design your own WhatsApp conversation page by creating a Jinja template.
# Available variables to access in the template
* name (str): The peer or group of the conversation.
* msgs (list): A list containing messages-related data including the message itself.
* my_avatar (str): Path to the user's avatar.
* their_avatar (str): Path to the avatar of the peer or the group of the conversation.
# The `msgs` variable
As stated, msgs is a list. Inside the msgs variable, each item in the list is a dict containing the following keys
* sender (str|None): The name or the phone number of the message sender.
* time (str): The time of the message being sent. In format "%H:%M".
* key_id (str): The message ID in the WhatsApp database.
* timestamp (int): The timestamp of the message in second.
* from_me (bool): Whether the message is sent by you or the peer(s)
* reply (str|None): If the message is replying to some message, this will be the ID of the message being replied.
* media (bool): Whether the message is a media.
* meta (bool): Whether the message is a metadata. For example, someone join the group.
* data (str|None): The actually message or metadata.
* quoted_data (str|None): The actually message that being replied.
* mime (str|None): The MIME type of the media.
* caption (str|None): The caption along with media.