---
title: "Uso de imagens dinâmicas e personalizadas"
slug: "builder-dynamic-images"
updated: 2026-06-12T10:30:54Z
published: 2026-06-12T10:30:54Z
canonical: "docs.xtremepush.com/builder-dynamic-images"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Uso de imagens dinâmicas e personalizadas

Personalize suas campanhas de e-mail com imagens geradas dinamicamente

Imagens dinâmicas são imagens que mudam dependendo de um ou mais valores que são "passados" para o sistema que as entrega.

![600](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/eda51a7-niftyimages_cupcake_niftyimages(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A15Z&se=2026-11-04T09%3A57%3A15Z&sr=c&sp=r&sig=6xbmIkdI89s3LqFYW3iSSG%2FsBF0EE0UGSryFxAnvIGg%3D)

Imagem cortesia da [NiftyImages](https://niftyimages.com/)

O link para a imagem acima não é mais uma URL estática como esta:

`https://xtremepush.com/images/logo-white.png`

mas sim uma URL que contém algumas variáveis, como endereço de e-mail, ID de cliente, data, etc.

```DynamicURLusingcustomerID
https://xtremepush.com/images/?imageBanner={{customer_ID}}
```

As variáveis são tags de fusão na URL, e são substituídas por valores reais (por exemplo, o ID de um cliente, o endereço de e-mail do destinatário, o nome da pessoa) no momento em que o e-mail é enviado ou a página de destino é renderizada. Veja este [guia](/documentation/docs/pt-br/dynamic-programmable-content) para saber mais sobre as diferentes funções disponíveis em nossa plataforma.

> [!TIP]
> Incluir o protocolo
> 
> Ao carregar uma imagem de uma URL externa, certifique-se de incluir o protocolo HTTPS no link. Por exemplo, `https://xtremepush.com/images/?imageBanner={{user_ID}}`.

## Objetivos

Os principais objetivos deste recurso são

- Facilite o uso de imagens como conteúdo dinâmico
- Permita que o designer aplique configurações de imagem normalmente com qualquer imagem estática
- Permita que o designer trabalhe com uma imagem de exemplo no editor para fins de design e pré-visualização
- Evite o uso dos recursos de bloco HTML personalizado e de mesclar conteúdo quando uma imagem dinâmica for necessária, para manter as coisas simples e eliminar a necessidade de introduzir código HTML externo.

## Exemplos

Alguns exemplos de imagens dinâmicas incluem:

- Cartas personalizadas
- Temporizadores de contagem regressiva
- Anúncios dinâmicos
- Recomendações de produtos

Vamos dar uma olhada em algumas...

### Cartões de aniversário personalizados

Um dos usos das imagens dinâmicas pode ser enviar um cartão de aniversário personalizado com o primeiro nome do cliente. Existem serviços que podem gerar imagens personalizadas (por exemplo, que incluem o nome do cliente) "em tempo real", como [o Niftyimages](https://niftyimages.com/). Existem outros serviços que você pode usar, como [o CountdownMail](https://countdownmail.com) e muitos outros.

![2292](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/284ce78-eb-personalised-card(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A15Z&se=2026-11-04T09%3A57%3A15Z&sr=c&sp=r&sig=6xbmIkdI89s3LqFYW3iSSG%2FsBF0EE0UGSryFxAnvIGg%3D)

O editor de arrastar e soltar oferece suporte fácil para imagens dinâmicas, *tornando isso muito* fácil para você.

Um nome codificado fixamente (`Allan`) é usado na *URL* normal (ou seja, a URL "placeholder"), enquanto uma variável, como a `{{firstname}}` usada na *URL dinâmica*, deve ser substituída no momento de enviar (ou renderização, se for uma landing page) pelo nome do destinatário da imagem (ou do visualizador da página).

### Temporizadores dinâmicos de contagem regressiva

Outra ótima aplicação para imagens dinâmicas são os temporizadores regressivos. Para isso, você pode passar a data de um evento na *URL Dinâmica*, por exemplo, o horário da *grande inauguração* de uma nova loja ou a data e hora do término de uma promoção. O sistema do outro lado gerará automaticamente uma animação GIF que parecerá um cronômetro regressivo, sinalizando o tempo restante para o evento.

![2440](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/9dbc0b5-eb-countdown(1).png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A57%3A15Z&se=2026-11-04T09%3A57%3A15Z&sr=c&sp=r&sig=6xbmIkdI89s3LqFYW3iSSG%2FsBF0EE0UGSryFxAnvIGg%3D)

Uma imagem provisória pode ser usada na *URL*enquanto você projeta a mensagem (ou página), para que você saiba exatamente como o resultado final vai ficar.