DEV Community

Cover image for How to Display NFT Gift Animations in Telegram
apiTON
apiTON

Posted on

2

How to Display NFT Gift Animations in Telegram

How to Display NFT Gift Animations in Telegram

The introduction of NFT gifts in Telegram has raised numerous questions among developers, particularly regarding integration with the TON (The Open Network) blockchain. In this article, we’ll explore the technical aspects of working with animated NFTs and demonstrate how to implement their display in your projects.

I am the developer of the TON Blockchain Explorer, integrated into Telegram, and will guide you through one key question:

How to display NFT animations in your own projects.

Let’s examine the following NFT contract:

0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da


NFT Contract Data Example

From this contract, we can extract data such as attributes, descriptions, and other metadata:

https://nft.fragment.com/gift/hexpot-10348.json

By clicking the More button, you can retrieve all available information directly:

Metadata Interface

Here, you’ll find a URL with a key and filename:

https://nft.fragment.com/gift/hexpot-10348.lottie.json


Lottie Format Basics

The animation uses the Lottie format:

Lottie is a library developed by Airbnb that renders animations in JSON format, created using Adobe After Effects. It allows developers to easily integrate high-quality animations into mobile and web apps while maintaining smooth performance and scalability.

Web Implementation Example:

https://jsfiddle.net/w5dsp16v/

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

<body>
    <div id="animation-container"></div>

    <script>
        const animation = lottie.loadAnimation({
            container: document.getElementById('animation-container'),
            path: 'https://nft.fragment.com/gift/hexpot-10348.lottie.json'
        });
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

lottie.min.js example


Telegram-Specific Solution

Telegram uses the .tgs format for stickers:

.tgs files are gzipped Lottie JSON files, playable via the rlottie library.

Implementation Workflow:

  1. Download Lottie JSON
  2. Compress with GZIP
  3. Send as Telegram document

Go Code Example:

package main

import (
    "bytes"
    "compress/gzip"
    "github.com/aaapi-net/hog"
    tele "gopkg.in/telebot.v3"
)

func getTgsAnimation(lottieUrl string) ([]byte, error) {
    data, err := hog.Get(lottieUrl).AsBytes()
    if err != nil {
        return nil, err
    }

    gz, err := compress(data)
    if err != nil {
        return nil, err
    }

    return gz, nil
}

func compress(data []byte) ([]byte, error) {
    var buf bytes.Buffer

    writer := gzip.NewWriter(&buf)
    _, err := writer.Write(data)
    if err != nil {
        return nil, err
    }

    if err := writer.Close(); err != nil {
        return nil, err
    }

    return buf.Bytes(), nil
}

func sendLottieAnimation(c tele.Context, lottieUrl string) error {
    tgsAnimation, err := getTgsAnimation(lottieUrl)
    if err != nil {
        panic(err)
    }

    file := tele.FromReader(bytes.NewReader(tgsAnimation))

    photo := &tele.Document{
        File:                 file,
        MIME:                 "application/x-tgsticker",
        FileName:             "hexpot-10348.tgs",
        DisableTypeDetection: true,
    }

    return c.Send(photo)
}
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  1. Use native .tgs format for Telegram compatibility
  2. Avoid MP4/GIF conversions to preserve quality
  3. Leverage Telegram's built-in Lottie support

Feel free to contact about TON Blockchain development @apitonDev.

Share your implementations below!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs