--- title: "Diretrizes criativas para mensagens dentro do aplicativo" slug: "in-app-message-creative-guidelines" updated: 2026-06-12T10:30:57Z published: 2026-06-12T10:30:57Z canonical: "docs.xtremepush.com/in-app-message-creative-guidelines" --- > ## 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. # Diretrizes criativas para mensagens dentro do aplicativo > [!NOTE] > Tamanho máximo do arquivo > > Todos os arquivos enviados para a plataforma devem ter menos que 2MB. Fornecemos modelos para criar criativos para mensagens no aplicativo retrato e paisagem. Na tela criativa do assistente de mensagens do aplicativo, você pode adicionar uma imagem de fundo e alguns botões opcionais, que o Xtremepush redimensiona para todos os dispositivos. As imagens abaixo fornecem algumas diretrizes para tamanhos ideais de imagens para mensagens dentro do app; Use-as como base para suas próprias imagens. O Xtremepush utiliza zonas seguras para permitir que você otimize o conteúdo das mensagens de imagem em todo o espectro de dispositivos. Imagens modelo para fundos de retrato e paisagem são fornecidas abaixo. Clique nas imagens para baixá-las. **A zona segura para seu conteúdo é a área azul.** Se o conteúdo principal da sua criativa estiver dentro da zona segura, então funcionará em todos os dispositivos ([veja exceção: iPhone X](/documentation/docs/pt-br/in-app-message-creative-guidelines#iphone-x1)). **Você sempre pode testar se seu conteúdo está visível na área de visualização do assistente.** - **Dimensões sugeridas**: 1500x2000 px (retrato); 2000x1500 px (paisagem) - **Formatos de imagem válidos**: PNG, JPG (JPEG), GIF (também animado) ![1500](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/7db56e6-inapp_portrait_template(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Modelo de retrato** ![2000](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/069f517-inapp_landscape_template(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Modelo de paisagem** ## Botões Os botões precisam ser dimensionados corretamente para permanecer na área segura. Eles serão redimensionados com a imagem principal, então, uma vez que trabalham dentro do seu design, trabalharão na mensagem final. É sempre útil colocar uma cruz ou outro marcador na imagem principal para posicionar os botões de forma mais fácil ([veja a segunda metade do tutorial - criação de campanha](/documentation/docs/pt-br/in-app-message-creative-guidelines#video-tutorial1)). Aqui estão alguns exemplos de imagens de botões de teste, [disponíveis para download abaixo](/documentation/docs/pt-br/in-app-message-creative-guidelines#resources1). ![389](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/e81aa5c-inapp_button_portrait(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Este botão de exemplo serve no marcador que colocamos na imagem retrato** ![763](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/0a452e8-inapp_button_landscape(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Este botão de exemplo serve para o marcador que colocamos na imagem paisagem** ## Por que há três faixas e apenas uma área segura? O Xtremepush vai redimensionar a imagem **principal mantendo 100% do seu lado mais longo**. Portanto, a largura será cortada e **a parte recortada dependerá da proporção do dispositivo, não da resolução**. ![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/36f8e64-inapp_3bands_image(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) Se você quiser rodar uma campanha em todos os dispositivos, a área azul garante que seu conteúdo será exibido. Se você se interessa apenas por certos dispositivos, digamos apenas iPads, **a área segura pode ser maior**, já que todos os iPads têm proporção de aspecto 4:3 e você pode usar a imagem inteira como quiser. ![1006](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/03d9b6c-inapp_mobile_aspect(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Proporções de aspecto móveis e áreas seguras** ![1006](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/5fca7ac-inapp_tablet_aspect(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) **Proporções de aspecto e áreas seguras para tablets** ## iPhone X Por padrão, esse modelo restringiria a visualização web usada para exibir a mensagem em uma área central 16:9. De qualquer forma, ele pode ser forçado a exibir a mensagem usando a tela cheia. Nesse caso, a mensagem deve ser projetada usando uma área segura mais estreita, evitando também a área superior devido à presença da barra de notificações e do top notch. A mensagem será exibida em uma tela de proporção 2:1. ![461](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/2a98ad6-inapp_iphone_x(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) ## Bandeiras As áreas seguras ainda são válidas, mas você precisa especificar uma altura diferente para cada largura usada para caber no banner em cada dispositivo. Por exemplo, se definido como a partir da imagem: - 50px enquanto MIN LARGURA = 0 - 100px enquanto MIN LARGURA = 480 - 60px enquanto MIN LARGURA = 728 ![668](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/9305295-Screenshot_2022-10-14_at_10.23.26(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) O resultado será o seguinte: ![1000](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/41306c0-inapp_banners_example(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A29%3A01Z&se=2026-11-04T10%3A29%3A01Z&sr=c&sp=r&sig=tzDklXCMQ0UbhG4ewL6jK%2FdSbSV%2FDNCHJCeA4sChZaM%3D) Cada imagem criativa pode ser diferente, caso contrário, uma imagem será usada para tamanhos de tela diferentes. Nesse caso, cada imagem criativa manterá a altura especificada e a imagem irá: - Tenha espaço na lateral (se for menor que o lado da tela) - Seja cortado das especificações das áreas seguras (se for maior que o lado da tela). Um botão padrão de fechamento será colocado pelo Xtremepush no banner em uma posição acessível. ## Tutorial em vídeo Confira o tutorial a seguir para aprender como criar as imagens perfeitas para suas mensagens no aplicativo e como enviá-las para sua campanha. ## Recursos Todos os assets são testados e podem ser baixados e usados como base para sua criação: - [Imagem de Retrato](https://files.readme.io/bb83702-inapp_resource_portrait.png) - [Imagem de paisagem](https://files.readme.io/4c3b6fd-inapp_resource_landscape.png) - [Imagem do Botão 1](https://files.readme.io/0208b12-inapp_resource_button1.jpg) - [Imagem do Botão 2](https://files.readme.io/0228fec-inapp_resource_button2.jpg)