# Criar 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.
## Criar 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 de HTML personalizado ou criar 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 **Adicionar modelo**.
3. Insira um nome para o modelo.
4. Escolha como criar o modelo:
* **Criar novo modelo:** crie um modelo no editor integrado.
* **Carregar ZIP:** [carregue um arquivo ZIP](/pt/developer/guides/content/rich-media-templates-syntax) com sua mensagem in-app em HTML.
* **Criar rich media nativo:** crie um in-app nativo renderizado pelo SDK. [Saiba mais](/pt/product/content/in-apps/create-native-in-app-messages/)
5. Selecione **Criar novo modelo**.
6. Clique em **Adicionar modelo**.
## Explorar 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) e a largura de visualização para celular ou desktop. Consulte [Configurar a aparência do in-app 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 [Localizar o modelo](#localize-the-template).
Abra o menu **⋮** na barra superior para mais ações:
#### Visualização
**Visualização** 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 reportados, mas 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 para ver ambos os layouts. Clique em **Reiniciar** para mostrar a mensagem desde o início novamente. Para sair da visualização, pressione Esc ou clique fora do painel.
#### Brand book
* **Brand book:** abra o [Brand book](/pt/product/content/brand-book/) da sua conta.
* **Aplicar estilos do brand book:** reestilize o modelo para corresponder ao seu Brand book (depois de configurar um).
* **Redefinir estilos personalizados:** remova as sobreposições de estilo no modelo e retorne aos padrões.
### Canvas
Edite a mensagem no canvas: clique em textos, imagens e botões para alterá-los. Use o alternador de celular/desktop na barra superior para verificar como o layout fica em cada largura. O alternador apenas muda a visualização, não o layout em si.
### Camadas
O painel de Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem que no canvas. 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 prompt.
## Adicionar blocos de conteúdo
1. Abra a aba **Blocos** no painel direito.
2. Arraste um bloco para o canvas 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 da [Galeria 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).
### Mostrar 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 no canvas, abra a **Condição de exibição** no painel direito e ative **Mostrar este bloco condicionalmente**. [Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localizar o modelo
Um modelo multilíngue armazena textos localizados para cada idioma em um único design in-app. Use o seletor de idioma na barra superior para adicionar idiomas e editar o conteúdo por idioma. Clique em **Tradução automática** para gerar traduções. Para saber como as mensagens multilíngues funcionam em todos os canais, consulte [Mensagens multilíngues](/pt/product/personalization/multi-language/).
## Configurar as definições do modelo
Use dois locais 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/)
## Salvar 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.
3. Insira um nome para o modelo.
4. Escolha como criar o modelo:
* **Criar novo modelo:** crie um modelo no editor integrado.
* **Carregar ZIP:** [carregue um arquivo ZIP](/pt/developer/guides/content/rich-media-templates-syntax) com sua mensagem in-app em HTML.
* **Criar rich media nativo:** crie um in-app nativo renderizado pelo SDK. [Saiba mais](/pt/product/content/in-apps/create-native-in-app-messages/)
5. Selecione **Criar novo modelo**.
6. Clique em **Adicionar modelo**.
## Explorar 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) e a largura de visualização para celular ou desktop. Consulte [Configurar a aparência do in-app 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 [Localizar o modelo](#localize-the-template).
Abra o menu **⋮** na barra superior para mais ações:
#### Visualização
**Visualização** 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 reportados, mas 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 para ver ambos os layouts. Clique em **Reiniciar** para mostrar a mensagem desde o início novamente. Para sair da visualização, pressione Esc ou clique fora do painel.
#### Brand book
* **Brand book:** abra o [Brand book](/pt/product/content/brand-book/) da sua conta.
* **Aplicar estilos do brand book:** reestilize o modelo para corresponder ao seu Brand book (depois de configurar um).
* **Redefinir estilos personalizados:** remova as sobreposições de estilo no modelo e retorne aos padrões.
### Canvas
Edite a mensagem no canvas: clique em textos, imagens e botões para alterá-los. Use o alternador de celular/desktop na barra superior para verificar como o layout fica em cada largura. O alternador apenas muda a visualização, não o layout em si.
### Camadas
O painel de Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem que no canvas. 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 prompt.
## Adicionar blocos de conteúdo
1. Abra a aba **Blocos** no painel direito.
2. Arraste um bloco para o canvas 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 da [Galeria 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).
### Mostrar 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 no canvas, abra a **Condição de exibição** no painel direito e ative **Mostrar este bloco condicionalmente**. [Saiba mais](/pt/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
## Localizar o modelo
Um modelo multilíngue armazena textos localizados para cada idioma em um único design in-app. Use o seletor de idioma na barra superior para adicionar idiomas e editar o conteúdo por idioma. Clique em **Tradução automática** para gerar traduções. Para saber como as mensagens multilíngues funcionam em todos os canais, consulte [Mensagens multilíngues](/pt/product/personalization/multi-language/).
## Configurar as definições do modelo
Use dois locais 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/)
## Salvar 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.