Tellergy Card Reader Animations

Advanced Features
Tellergy card reader

Overview

This guide explains how to add and manage Lottie animations within the Wescom Resources website using code blocks. We primarily use this for the animated Tellergy for Verifone card reader machine demos, which display the various screens shown to customers during transactions.

What is Lottie?

Lottie is a lightweight animation format that renders animations in real-time. Unlike video files, Lottie animations:

  • Load faster and use less bandwidth
  • Scale without quality loss
  • Can be interactive
  • Support transparency

Adding a Lottie Animation

Step 1: Prepare Your Animation File

  1. Ensure your Lottie animation is exported as a .json file
  2. Upload the file to the media library or host it on a CDN

Step 2: Add the Animation Using a Custom HTML Block

  1. In the WordPress editor, add a new block and search for “Code”
  2. Select the “Custom HTML” block
  3. Paste the lottie embed code:

Troubleshooting

Animation Not Displaying:

  • Verify the JSON file URL is correct and accessible
  • Check that the Lottie player script is loading (no console errors)
  • Try adding the renderer="svg" attribute to the player

Animation Performance Issues:

  • Optimize your Lottie JSON file size
  • Consider setting renderSettings={"preserveAspectRatio":"xMidYMid slice"} for better scaling
  • Add loading states: <lottie-player ... loading="true">