# Crie mensagens in-app no editor integrado
Crie um modelo de mensagem in-app no editor integrado da Pushwoosh sem escrever código. Você obtém um layout reutilizável com blocos de conteúdo, imagens, botões e texto personalizado que pode exibir em uma Customer Journey, como um in-app único ou a partir de um push.
## Crie um novo modelo in-app
Um modelo in-app é um design reutilizável que você cria uma vez e depois exibe para os usuários em campanhas. Você pode criar um no editor integrado, carregar um ZIP HTML personalizado ou construir um modelo de rich media nativo. Este artigo aborda a criação de um modelo do zero no editor integrado. Siga os mesmos passos para personalizar um modelo existente.
1. Vá para **Conteúdo** → **In-apps**.
2. Clique em **Criar in-app**. O editor integrado abre diretamente.
Clique na seta ao lado de **Criar in-app** para criar um modelo de outra forma:
* **Carregar ZIP:** [carregue um arquivo ZIP](/pt/developer/guides/content/rich-media-templates-syntax) com sua mensagem in-app em HTML.
* **In-app nativo:** construa uma mensagem renderizada pelo SDK usando layouts prontos. [Saiba mais](/pt/product/content/in-apps/create-native-in-app-messages/)
## Explore o layout do editor
O editor integrado tem quatro áreas. Cada uma tem uma função clara.
### Barra superior
A barra superior é onde você gerencia o modelo como um todo: seu nome, histórico de desfazer, status de salvamento, como ele aparece no dispositivo (**Configurações do in-app**), idiomas (**Tradução automática** e o seletor de idioma), largura da visualização para celular ou desktop (o celular oferece **360**, **390**, **393** ou **430 px**, correspondendo às larguras comuns de dispositivos) e um seletor de tela clara/escura (**ícone de sol/lua**). Consulte [Configure como o in-app aparece no dispositivo](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) e [Localize o modelo](#localize-the-template).
Abra o menu **⋮** na barra superior para mais ações:
#### Visualizar
**Visualizar** permite que você experimente a mensagem antes de salvá-la: toque em botões, navegue por fluxos de várias telas e verifique o layout no celular ou desktop.
O que funciona na visualização:
* Botões e fluxos de várias telas funcionam de verdade.
* Links e deep links são relatados, não abertos.
* Chamadas do SDK e estatísticas de abertura/clique permanecem desativadas.
* O idioma corresponde ao seletor de idioma. As Merge Tags permanecem como placeholders.
No cabeçalho da visualização, alterne entre celular e desktop, e entre claro e escuro, para ver todos os layouts resultantes. Clique em **Reiniciar** para mostrar a mensagem desde o início novamente. Para sair da visualização, pressione Esc ou clique fora do painel.
#### Verificar
**Verificar** abre a **Verificação inteligente** e examina o modelo em busca de problemas comuns.
A Verificação inteligente procura por:
* Botões, itens de menu e links de imagem sem URL, ou com uma URL que não seja um endereço http(s), `mailto:`, `tel:` ou deep link (por exemplo, `myapp://promo`)
* Blocos de placeholder de IA inacabados
* Espaços de imagem ou vídeo vazios e texto alternativo ausente
* Cartões de produto com um link ausente ou inválido
* Contraste de texto que não atende ao WCAG AA
* Conteúdo não traduzido
* Um cronômetro de contagem regressiva cuja data final já passou
* Uma [condição de exibição](#show-blocks-to-specific-users) com uma regra quebrada ou vazia, um ramo que perdeu o bloco ao qual se conecta, ou uma condição que não será aplicada porque o conteúdo dinâmico está desativado para a conta
Clique em um achado para ir diretamente para o elemento afetado na tela. Se não houver nada de errado, o painel mostra **Todas as verificações passaram — o conteúdo parece pronto para salvar.**
#### Brand book
* **Brand book:** abra o [Brand book](/pt/product/content/brand-book/) desta aplicação.
* **Aplicar estilos do brand book:** reestilize o modelo para corresponder ao seu Brand book (depois de configurá-lo).
* **Redefinir estilos personalizados:** remova as substituições de estilo no modelo e retorne aos padrões.
#### Baixar .zip
**Baixar .zip** salva o modelo como um arquivo ZIP. Ele baixa a última versão salva, então salve suas alterações primeiro. O item de menu aparece apenas depois que o modelo foi salvo pelo menos uma vez — modelos novos e não salvos não o mostram.
### Tela
Edite a mensagem na tela: clique em textos, imagens e botões para alterá-los. Use o seletor de celular/desktop na barra superior para verificar como o layout fica em cada largura. O seletor apenas altera a visualização, não o layout em si.
Use o **ícone de sol/lua** na barra superior para continuar editando a tela enquanto ela é renderizada em claro ou escuro. Funciona mesmo sem uma **Variante de modo escuro** configurada — as cores escuras são derivadas automaticamente até que você defina as suas próprias. Esta é uma visualização de edição ao vivo, não o painel de **Visualização** somente leitura.
### Camadas
O painel Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem da tela. Abra-o na borda esquerda para selecionar um bloco aninhado (por exemplo, um botão dentro de um grupo) ou arraste as linhas para reordenar o conteúdo.
### Painel direito
Alterne entre três abas:
* **Blocos:** adicione conteúdo à mensagem. Consulte a [Referência de blocos do editor in-app](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Configurações:** aplique estilos a todo o modelo de uma vez. Consulte [Configurar as definições do modelo in-app](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** converse com o assistente de IA para gerar ou editar conteúdo a partir de um comando.
## Adicione blocos de conteúdo
1. Abra a aba **Blocos** no painel direito.
2. Arraste um bloco para a tela ou clique em um bloco para adicioná-lo ao final do modelo.
3. Continue adicionando blocos até que o layout esteja pronto.
Cada tipo de bloco serve a um propósito diferente na mensagem:
* **[Título](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** títulos e cabeçalhos curtos
* **[Texto](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** corpo do texto e descrições mais longas
* **[Botão](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** uma chamada para ação clicável
* **[Imagem](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** imagens do [Armazenamento de mídia](/pt/product/content/media-store/), upload ou URL
* **[Vídeo](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** uma miniatura de vídeo clicável que abre um vídeo do YouTube ou Vimeo
* **[Cartão](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** uma imagem com título, texto e botão em um único layout
* **[Divisor](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** uma linha que separa seções
* **[Colunas](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** layouts lado a lado (2, 3 ou 4 colunas iguais, ou divisões de 33/67 e 67/33)
* **[Cronômetro](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** uma contagem regressiva para ofertas e prazos
* **[Menu](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** uma linha ou coluna de links de navegação ou contato
* **[Social](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** ícones que levam aos seus perfis sociais
* **[HTML](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** HTML personalizado, como um formulário, pesquisa ou vídeo incorporado
* **[Produtos](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** uma grade de cartões de produtos do seu [Catálogo de Produtos](/pt/product/content/product-catalog/) ou do carrinho abandonado de um usuário
Consulte a [Referência de blocos do editor in-app](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para as configurações de cada bloco e [como salvar e reutilizar blocos](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Exiba blocos para usuários específicos
Nem todo usuário precisa ver os mesmos blocos. Defina uma **condição de exibição** em um bloco para que ele seja exibido ou ocultado com base nas [Tags](/pt/product/audience-data-and-segmentation/user-data-tags/tags/) do usuário. Você ainda envia um único modelo, mas cada pessoa vê apenas as partes que se aplicam a ela.
Selecione o bloco na tela, abra a **Condição de exibição** no painel direito e ative **Exibir este bloco condicionalmente**. [Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localize o modelo
Um modelo multilíngue armazena cópias localizadas para cada idioma em um único design in-app. Para saber como as mensagens multilíngues funcionam em todos os canais, consulte [Mensagens multilíngues](/pt/product/personalization/multi-language/).
Para configurar o conteúdo multilíngue:
1. Clique no seletor de idioma na barra superior para abrir a lista de idiomas.
2. Selecione os idiomas que deseja adicionar e clique em **Aplicar**.
3. Use o seletor de idioma para alternar entre os idiomas e editar o conteúdo de cada bloco para o idioma selecionado.
4. Clique em **Tradução automática** para preencher as traduções ausentes automaticamente — revise o texto gerado por IA antes de salvar.
## Configure as definições do modelo
Use dois lugares para estilizar e posicionar a mensagem:
* Aba **Configurações** (painel direito): tamanho do documento, cores, tipografia e estilos padrão para os blocos.
* **Configurações do in-app** (barra superior): posição na tela, animações e o botão de fechar.
[Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Salve o modelo
Clique em **Salvar** na barra superior para salvar suas alterações. Use **Desfazer**/**Refazer** na barra superior para avançar e retroceder em suas edições.
## Atualize as traduções a partir dos seus próprios sistemas
Sua equipe de desenvolvimento pode atualizar as traduções de um modelo salvo por meio da [API da Pushwoosh](/pt/developer/api-reference/) ou de um cliente de IA conectado ao [servidor ManyMoney AI MCP](/pt/product/pushwoosh-ai/manymoney-mcp-server/), sem reenviar o HTML ou o design do modelo.
Isso só funciona em um modelo que já foi salvo uma vez (consulte [Salve o modelo](#save-the-template) acima). Um modelo sem conteúdo salvo não tem nada para mesclar traduções.
A atualização mescla apenas os idiomas e as chaves de texto enviadas no campo `localization`. Todos os outros idiomas, chaves e o design visual permanecem como salvos.
- Enviar uma chave sem valor remove essa chave de seu idioma.
- Enviar um idioma sem valor remove todo o idioma do modelo.
- O idioma padrão pode ser alterado para qualquer idioma restante no modelo após a atualização.
- A atualização é rejeitada se remover todos os idiomas do modelo, ou se o idioma padrão solicitado não for um dos idiomas restantes após a mesclagem.
Para isso, você precisará da ajuda de sua equipe de desenvolvimento.
Clique na seta ao lado de **Criar in-app** para criar um modelo de outra forma:
* **Carregar ZIP:** [carregue um arquivo ZIP](/pt/developer/guides/content/rich-media-templates-syntax) com sua mensagem in-app em HTML.
* **In-app nativo:** construa uma mensagem renderizada pelo SDK usando layouts prontos. [Saiba mais](/pt/product/content/in-apps/create-native-in-app-messages/)
## Explore o layout do editor
O editor integrado tem quatro áreas. Cada uma tem uma função clara.
### Barra superior
A barra superior é onde você gerencia o modelo como um todo: seu nome, histórico de desfazer, status de salvamento, como ele aparece no dispositivo (**Configurações do in-app**), idiomas (**Tradução automática** e o seletor de idioma), largura da visualização para celular ou desktop (o celular oferece **360**, **390**, **393** ou **430 px**, correspondendo às larguras comuns de dispositivos) e um seletor de tela clara/escura (**ícone de sol/lua**). Consulte [Configure como o in-app aparece no dispositivo](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) e [Localize o modelo](#localize-the-template).
Abra o menu **⋮** na barra superior para mais ações:
#### Visualizar
**Visualizar** permite que você experimente a mensagem antes de salvá-la: toque em botões, navegue por fluxos de várias telas e verifique o layout no celular ou desktop.
O que funciona na visualização:
* Botões e fluxos de várias telas funcionam de verdade.
* Links e deep links são relatados, não abertos.
* Chamadas do SDK e estatísticas de abertura/clique permanecem desativadas.
* O idioma corresponde ao seletor de idioma. As Merge Tags permanecem como placeholders.
No cabeçalho da visualização, alterne entre celular e desktop, e entre claro e escuro, para ver todos os layouts resultantes. Clique em **Reiniciar** para mostrar a mensagem desde o início novamente. Para sair da visualização, pressione Esc ou clique fora do painel.
#### Verificar
**Verificar** abre a **Verificação inteligente** e examina o modelo em busca de problemas comuns.
A Verificação inteligente procura por:
* Botões, itens de menu e links de imagem sem URL, ou com uma URL que não seja um endereço http(s), `mailto:`, `tel:` ou deep link (por exemplo, `myapp://promo`)
* Blocos de placeholder de IA inacabados
* Espaços de imagem ou vídeo vazios e texto alternativo ausente
* Cartões de produto com um link ausente ou inválido
* Contraste de texto que não atende ao WCAG AA
* Conteúdo não traduzido
* Um cronômetro de contagem regressiva cuja data final já passou
* Uma [condição de exibição](#show-blocks-to-specific-users) com uma regra quebrada ou vazia, um ramo que perdeu o bloco ao qual se conecta, ou uma condição que não será aplicada porque o conteúdo dinâmico está desativado para a conta
Clique em um achado para ir diretamente para o elemento afetado na tela. Se não houver nada de errado, o painel mostra **Todas as verificações passaram — o conteúdo parece pronto para salvar.**
#### Brand book
* **Brand book:** abra o [Brand book](/pt/product/content/brand-book/) desta aplicação.
* **Aplicar estilos do brand book:** reestilize o modelo para corresponder ao seu Brand book (depois de configurá-lo).
* **Redefinir estilos personalizados:** remova as substituições de estilo no modelo e retorne aos padrões.
#### Baixar .zip
**Baixar .zip** salva o modelo como um arquivo ZIP. Ele baixa a última versão salva, então salve suas alterações primeiro. O item de menu aparece apenas depois que o modelo foi salvo pelo menos uma vez — modelos novos e não salvos não o mostram.
### Tela
Edite a mensagem na tela: clique em textos, imagens e botões para alterá-los. Use o seletor de celular/desktop na barra superior para verificar como o layout fica em cada largura. O seletor apenas altera a visualização, não o layout em si.
Use o **ícone de sol/lua** na barra superior para continuar editando a tela enquanto ela é renderizada em claro ou escuro. Funciona mesmo sem uma **Variante de modo escuro** configurada — as cores escuras são derivadas automaticamente até que você defina as suas próprias. Esta é uma visualização de edição ao vivo, não o painel de **Visualização** somente leitura.
### Camadas
O painel Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem da tela. Abra-o na borda esquerda para selecionar um bloco aninhado (por exemplo, um botão dentro de um grupo) ou arraste as linhas para reordenar o conteúdo.
### Painel direito
Alterne entre três abas:
* **Blocos:** adicione conteúdo à mensagem. Consulte a [Referência de blocos do editor in-app](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/).
* **Configurações:** aplique estilos a todo o modelo de uma vez. Consulte [Configurar as definições do modelo in-app](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/).
* **IA:** converse com o assistente de IA para gerar ou editar conteúdo a partir de um comando.
## Adicione blocos de conteúdo
1. Abra a aba **Blocos** no painel direito.
2. Arraste um bloco para a tela ou clique em um bloco para adicioná-lo ao final do modelo.
3. Continue adicionando blocos até que o layout esteja pronto.
Cada tipo de bloco serve a um propósito diferente na mensagem:
* **[Título](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** títulos e cabeçalhos curtos
* **[Texto](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** corpo do texto e descrições mais longas
* **[Botão](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** uma chamada para ação clicável
* **[Imagem](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** imagens do [Armazenamento de mídia](/pt/product/content/media-store/), upload ou URL
* **[Vídeo](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** uma miniatura de vídeo clicável que abre um vídeo do YouTube ou Vimeo
* **[Cartão](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** uma imagem com título, texto e botão em um único layout
* **[Divisor](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** uma linha que separa seções
* **[Colunas](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** layouts lado a lado (2, 3 ou 4 colunas iguais, ou divisões de 33/67 e 67/33)
* **[Cronômetro](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** uma contagem regressiva para ofertas e prazos
* **[Menu](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** uma linha ou coluna de links de navegação ou contato
* **[Social](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** ícones que levam aos seus perfis sociais
* **[HTML](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** HTML personalizado, como um formulário, pesquisa ou vídeo incorporado
* **[Produtos](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** uma grade de cartões de produtos do seu [Catálogo de Produtos](/pt/product/content/product-catalog/) ou do carrinho abandonado de um usuário
Consulte a [Referência de blocos do editor in-app](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) para as configurações de cada bloco e [como salvar e reutilizar blocos](/pt/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks).
### Exiba blocos para usuários específicos
Nem todo usuário precisa ver os mesmos blocos. Defina uma **condição de exibição** em um bloco para que ele seja exibido ou ocultado com base nas [Tags](/pt/product/audience-data-and-segmentation/user-data-tags/tags/) do usuário. Você ainda envia um único modelo, mas cada pessoa vê apenas as partes que se aplicam a ela.
Selecione o bloco na tela, abra a **Condição de exibição** no painel direito e ative **Exibir este bloco condicionalmente**. [Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localize o modelo
Um modelo multilíngue armazena cópias localizadas para cada idioma em um único design in-app. Para saber como as mensagens multilíngues funcionam em todos os canais, consulte [Mensagens multilíngues](/pt/product/personalization/multi-language/).
Para configurar o conteúdo multilíngue:
1. Clique no seletor de idioma na barra superior para abrir a lista de idiomas.
2. Selecione os idiomas que deseja adicionar e clique em **Aplicar**.
3. Use o seletor de idioma para alternar entre os idiomas e editar o conteúdo de cada bloco para o idioma selecionado.
4. Clique em **Tradução automática** para preencher as traduções ausentes automaticamente — revise o texto gerado por IA antes de salvar.
## Configure as definições do modelo
Use dois lugares para estilizar e posicionar a mensagem:
* Aba **Configurações** (painel direito): tamanho do documento, cores, tipografia e estilos padrão para os blocos.
* **Configurações do in-app** (barra superior): posição na tela, animações e o botão de fechar.
[Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
## Salve o modelo
Clique em **Salvar** na barra superior para salvar suas alterações. Use **Desfazer**/**Refazer** na barra superior para avançar e retroceder em suas edições.
## Atualize as traduções a partir dos seus próprios sistemas
Sua equipe de desenvolvimento pode atualizar as traduções de um modelo salvo por meio da [API da Pushwoosh](/pt/developer/api-reference/) ou de um cliente de IA conectado ao [servidor ManyMoney AI MCP](/pt/product/pushwoosh-ai/manymoney-mcp-server/), sem reenviar o HTML ou o design do modelo.
Isso só funciona em um modelo que já foi salvo uma vez (consulte [Salve o modelo](#save-the-template) acima). Um modelo sem conteúdo salvo não tem nada para mesclar traduções.
A atualização mescla apenas os idiomas e as chaves de texto enviadas no campo `localization`. Todos os outros idiomas, chaves e o design visual permanecem como salvos.
- Enviar uma chave sem valor remove essa chave de seu idioma.
- Enviar um idioma sem valor remove todo o idioma do modelo.
- O idioma padrão pode ser alterado para qualquer idioma restante no modelo após a atualização.
- A atualização é rejeitada se remover todos os idiomas do modelo, ou se o idioma padrão solicitado não for um dos idiomas restantes após a mesclagem.
Para isso, você precisará da ajuda de sua equipe de desenvolvimento.