How to Display NFT Gift Animations in Telegram

Displaying Animated NFT Gifts in Telegram: A Developer's Guide

The integration of NFT gifts into Telegram presents exciting opportunities, but also technical challenges, especially when working with the TON blockchain. This article provides a practical guide to displaying animated NFTs in your Telegram projects. We'll focus on leveraging Telegram's built-in capabilities for optimal performance and user experience.

Consider this example NFT contract:

0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da

This contract's metadata, including animation data, can be accessed via a URL like this:

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

Clicking "More" reveals a crucial URL containing the animation in Lottie JSON format:

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

Understanding Lottie Animations

Lottie, created by Airbnb, renders animations from JSON files (often generated from Adobe After Effects). Its efficiency makes it ideal for mobile and web applications. A simple web implementation using Lottie is shown below:

Web Implementation Example

Telegram Integration: The .tgs Approach

Telegram utilizes the .tgs format for stickers, which are essentially gzipped Lottie JSON files. This ensures native compatibility and optimal performance within the Telegram environment.

Implementation Steps:

1. Download Lottie JSON: Retrieve the .lottie.json file from the NFT metadata.
2. Compress with GZIP: Compress the JSON using GZIP compression.
3. Send as Telegram Document: Send the compressed file to Telegram as a document with the application/x-tgsticker MIME type.

Go Code Example:

This Go code snippet demonstrates the process of fetching the Lottie JSON, compressing it, and sending it as a Telegram document:

package main

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

// ... (getTgsAnimation and compress functions as provided in the original text) ...

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)
}

Key Considerations

• Use the native .tgs format for seamless Telegram integration.
• Avoid converting to MP4 or GIF, as this can compromise animation quality.
• Take advantage of Telegram's built-in Lottie support for optimal performance.

For assistance with TON blockchain development, contact @apitonDev. Share your implementations and experiences in the comments below!

The above is the detailed content of How to Display NFT Gift Animations in Telegram. For more information, please follow other related articles on the PHP Chinese website!