# 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 uma notificação push.

<Aside type="note">
Antes de começar, integre o SDK da Pushwoosh para que as mensagens in-app possam aparecer no seu aplicativo. [Saiba mais](/pt/product/messaging-channels/in-apps/)
</Aside>

## Crie um novo modelo de in-app

Um modelo de in-app é um design reutilizável que você cria uma vez e depois exibe aos usuários em campanhas. Você pode criar um enviando um ZIP HTML personalizado ou construindo-o no editor integrado. 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 **Content** → **In-apps**.
2. Clique em **Add template**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="Página de Conteúdo In-apps com o botão Adicionar modelo no canto superior direito da lista de modelos"/>

3. Insira um nome para o modelo.
4. Escolha como criar o modelo:
   * **Upload ZIP:** [faça o upload de um arquivo ZIP](/pt/developer/guides/content/rich-media-templates-syntax) com sua mensagem in-app em HTML.
   * **Create new template:** construa um modelo no editor integrado.
5. Selecione **Create new template**.
6. Clique em **Add template**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="Formulário de novo modelo com campo de nome, opção de Upload ZIP e Criar novo modelo selecionado"/>


### Explore o layout do editor

O editor integrado tem quatro áreas. Cada uma tem uma função clara.

**Barra superior**

Use a barra superior para renomear o modelo, desfazer erros, salvar seu trabalho ou abrir as **In-app settings** quando precisar alterar como a mensagem aparece no dispositivo. Consulte [Configurar a aparência do in-app no dispositivo](#configure-how-the-in-app-looks-on-device).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="Barra superior do editor de in-app com nome do modelo, Desfazer, Refazer, Configurações do In-app e Salvar"/>

**Canvas**

Use o canvas para ver a mensagem como os usuários a verão e para editar texto, imagens e botões diretamente no layout. Um modelo vazio mostra **Start with a block**. Acima do canvas, um seletor de telefone/tablet alterna a largura da visualização — isso não altera seu layout, apenas a largura da tela em que você está visualizando.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="Canvas vazio no editor de in-app com o prompt Comece com um bloco no centro" width="480"/>

**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 quando quiser selecionar um bloco aninhado (por exemplo, um botão dentro de um grupo) ou arrastar linhas para alterar a ordem do conteúdo.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Painel de Camadas listando Cartão, Imagem, Título, Texto, Temporizador, Botões e Rodapé em uma árvore"/>

**Painel direito**

Use **Blocks** no painel direito para adicionar conteúdo à mensagem e **Settings** quando quiser um estilo que se aplique a todo o modelo de uma vez. Consulte [Configurar estilo para todo o modelo](#configure-template-wide-styling).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="Aba Blocos no painel direito com Título, Texto, Botão, Imagem e outros blocos de conteúdo" width="320"/>

### Comece a construir o modelo

Depois de criar um modelo, o editor abre com um canvas vazio e a aba **Blocks** à direita.

1. Arraste um bloco do painel **Blocks** para o canvas ou clique em um bloco no painel para adicioná-lo.
2. Continue adicionando blocos da mesma forma até que o layout esteja pronto.
3. Abra a aba **Settings** quando precisar de um estilo para todo o modelo.


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="Editor de in-app vazio com Comece com um bloco no canvas e o painel Blocos aberto"/>

### Adicionar blocos de conteúdo

Os blocos de conteúdo são as peças de construção de um modelo de in-app no editor integrado. Você combina títulos, texto, imagens, botões e outros blocos em um único layout.

Abra a aba **Blocks** e arraste um bloco para o canvas, ou clique em um bloco para adicioná-lo. Blocos disponíveis:

* **[Título](#heading-and-text):** títulos e manchetes curtas na mensagem
* **[Texto](#heading-and-text):** corpo do texto e descrições mais longas
* **[Botão](#button):** uma chamada para ação clicável
* **[Imagem](#image):** imagens da [Loja de Mídia](/pt/product/content/media-store/), upload ou URL
* **[Divisor](#divider):** uma linha que separa seções visualmente
* **[2 colunas](#columns):** duas colunas iguais lado a lado
* **[3 colunas](#columns):** três colunas iguais lado a lado
* **[4 colunas](#columns):** quatro colunas iguais lado a lado
* **[33 / 67](#columns):** duas colunas onde a esquerda ocupa cerca de 33% da largura e a direita cerca de 67%
* **[67 / 33](#columns):** duas colunas onde a esquerda ocupa cerca de 67% da largura e a direita cerca de 33%
* **[Temporizador](#countdown-timer):** uma contagem regressiva para ofertas e prazos
* **[Menu](#menu):** uma linha ou coluna de links, como navegação ou contatos
* **[Social](#social):** ícones que levam aos seus perfis sociais
* **[HTML](#html):** HTML personalizado, como um formulário ou vídeo incorporado

### Título e texto

Os blocos **Título** e **Texto** contêm o texto que os usuários leem na mensagem in-app. Edite o texto no canvas e formate-o com a barra de ferramentas.

Clique em um bloco de **Título** ou **Texto** para editar seu conteúdo no canvas. Selecione um texto para abrir a barra de ferramentas de formatação: negrito, itálico, sublinhado, alinhamento, um botão de link e um menu suspenso de **estilo de texto**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="Bloco de Título selecionado no canvas com a barra de ferramentas de formatação de texto mostrando opções de estilo e formatação"/>

Merge Tags são marcadores que inserem um valor de [Tag](/pt/product/audience-data-and-segmentation/user-data-tags/tags/) do perfil do usuário na mensagem, para que cada assinante veja um texto personalizado. Para adicionar uma, selecione o texto, clique em **Merge Tags** na barra de ferramentas e escolha uma Tag da sua conta. [Saiba mais sobre mensagens in-app personalizadas](/pt/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### Imagem

Um bloco de **Imagem** exibe uma imagem no modelo de in-app. Selecione-o no canvas para abrir as configurações de **Imagem** no painel direito.

* **Add image** / **Replace image:** clique em **Add image** quando o bloco estiver vazio, ou **Replace image** quando uma imagem já estiver definida. Você pode fazer upload de um arquivo ou escolher um da sua [Loja de Mídia](/pt/product/content/media-store/).
* **Image URL:** cole um link hospedado para a imagem.
* **Alt text:** descreva a imagem para acessibilidade.
* **Link URL:** abra um site quando a imagem for tocada.
* **Link target:** abra o link na mesma aba ou em uma nova.
* **File:** depois de adicionar uma imagem, mostra o caminho do arquivo em uso.

Em **Spacing**, ative **Padding** para adicionar espaço ao redor da imagem. Use **All sides** para o mesmo preenchimento em todos os lados, ou ative **More options** para definir cada lado separadamente.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="Bloco de Imagem vazio no canvas com as configurações de Imagem mostrando Adicionar imagem, URL da imagem, Texto alternativo, URL do link e Espaçamento" width="600"/>

### Botão

Um **Botão** é uma chamada para ação clicável na mensagem in-app. Use-o para abrir uma URL, executar JavaScript personalizado ou fechar a mensagem.

Clique em um bloco de **Botão** para editar seu rótulo no canvas. Use a barra de ferramentas para alterar o tamanho da fonte, cor do texto, negrito, itálico, sublinhado e alinhamento.

Para definir o que acontece quando o usuário toca no botão:

1. Clique no ícone de link na barra de ferramentas para abrir **Insert/Edit Link**.
2. Escolha um **Action type**.
3. Preencha os campos para essa ação (veja abaixo).
4. Clique em **Save**.

#### Abrir um site

**Open Website** abre um link quando o usuário toca no botão. Insira o endereço em **URL**. O que você pode inserir:

* Um site: `https://example.com`
* Um link de aplicativo que abre uma tela dentro do seu aplicativo: `myapp://promo`
* Fechar o in-app sem JavaScript: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="Caixa de diálogo Inserir/Editar Link para um Botão com o tipo de ação Abrir Site e um campo de URL"/>

#### Executar JavaScript personalizado

**Custom Javascript** executa código quando o usuário toca no botão. Insira o código no campo **onClick**.

Use-o quando um toque deve fazer algo na Pushwoosh, não apenas abrir um link. A pessoa no aplicativo ainda vê um botão normal. Ela não vê tags ou eventos. Você decide o que acontece a seguir na tela: deixar a mensagem aberta ou fechá-la no mesmo **onClick**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="Caixa de diálogo Inserir/Editar Link para um Botão com o tipo de ação JavaScript Personalizado e onClick definido para closeInApp"/>

**Métodos disponíveis em onClick**

* `pushwoosh.closeInApp()`: fecha a mensagem in-app. Omita-o para manter a mensagem aberta após o toque.
* `pushwoosh.sendTags({...})`: salva valores como [tags de dispositivo](/pt/product/audience-data-and-segmentation/user-data-tags/tags/) para campanhas futuras.
* `pushwoosh.postEvent(...)`: envia um [evento personalizado](/pt/product/audience-data-and-segmentation/events/custom-events/), por exemplo, para iniciar uma Customer Journey.
* `pushwoosh.getTags(...)`: lê as tags atuais. Útil em HTML personalizado para alterar o que a mensagem mostra.
* `pushwoosh.getCustomData()`: lê dados personalizados passados da notificação push que abriu este in-app.

##### Exemplo: permitir que os usuários escolham um interesse e o salvem para campanhas futuras

1. Adicione uma pergunta em um bloco de **Texto** ou **Título**, por exemplo: "Qual esporte você gosta?"
2. Adicione um **Botão** por opção, por exemplo: **Yoga** e **Academia**.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="Modelo de in-app com botões de Yoga e Academia e onClick de JavaScript Personalizado para o botão de Yoga"/>

3. Defina **Action type** como **Custom Javascript** para cada botão.
4. Para o botão **Yoga**, cole isto em **onClick**:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. Para o botão **Academia**, cole isto em **onClick**:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


Quando o usuário toca em **Yoga**, a Pushwoosh grava a tag `interest` em seu dispositivo e fecha o in-app. Você pode então segmentar esse usuário em um [segmento](/pt/product/audience-data-and-segmentation/segmentation/) ou [Customer Journey](/pt/product/customer-journey/journey-elements/#in-app).

<LinkCard title="Saiba mais sobre como criar in-apps com JavaScript" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### Divisor

Um **Divisor** é uma linha horizontal entre os blocos de conteúdo. Use-o para separar seções visualmente no modelo.

Configure o **estilo da linha** (Sólida, Tracejada, Pontilhada), **cor**, **espessura** e **largura** no painel de configurações.

### HTML

O bloco **HTML** permite que você cole HTML personalizado em um modelo de in-app. Use-o para um formulário personalizado, pesquisa ou vídeo incorporado quando não houver um bloco de Formulário dedicado para mensagens in-app.


##### Exemplos

Os exemplos abaixo mostram maneiras comuns de usar o bloco HTML em um modelo de in-app: um formulário de lead, uma pesquisa e um vídeo incorporado.

<Aside type="note">
Os exemplos de formulário e pesquisa salvam tags de dispositivo e enviam eventos através da Pushwoosh. Crie os eventos personalizados em sua conta antes de usá-los em campanhas.
</Aside>

<Tabs>
<TabItem label="Formulário de lead">

Este formulário de lead grava nome e e-mail como tags, envia um evento `promo_requested`, mostra uma mensagem de agradecimento e, em seguida, fecha o in-app.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="Formulário de lead HTML no editor de in-app com campos de nome e e-mail e um botão Envie-me o código" width="360"/>

<details>
<summary>Código HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Pesquisa">

Esta pesquisa salva o horário de treino selecionado como uma tag, envia um evento `schedule_survey_completed`, mostra uma mensagem de agradecimento e, em seguida, fecha o in-app.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="Pesquisa HTML no editor de in-app perguntando quando o usuário prefere treinar com quatro opções de horário" width="360"/>

<details>
<summary>Código HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="Vídeo">

Este exemplo incorpora um vídeo do YouTube na mensagem in-app.

<details>
<summary>Código HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### Menu

O bloco **Menu** coloca vários itens clicáveis em uma linha ou coluna. Use-o para uma barra de navegação ou uma lista de contatos da empresa.

Para cada item do menu, defina:

* **Label:** o texto que os usuários veem
* **URL:** para onde o item abre
* **Target:** mesma aba ou uma nova aba

Nas configurações do bloco, você também pode definir:

* **Direction:** Horizontal ou Vertical
* **Alignment:** Esquerda, Centro ou Direita
* **Separator:** um divisor opcional entre os itens
* Fonte, tamanho, peso, espaçamento entre letras e cores de link/texto

### Social

O bloco **Social** exibe uma linha de ícones de mídia social que levam aos seus perfis. Use-o para enviar usuários para o Facebook, Instagram, X e outras plataformas a partir da mensagem in-app.

Adicione entradas de plataforma e, em seguida, defina o alinhamento, o tamanho do ícone e o espaço entre os ícones.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="Configurações do bloco Social com links para TikTok, Instagram e Facebook, além de Alinhamento, Tamanho do ícone e Espaçamento" width="320"/>

### Temporizador de contagem regressiva

O bloco **Timer** é uma contagem regressiva na mensagem in-app. Use-o para ofertas por tempo limitado, vendas relâmpago e lembretes de eventos.

Para configurá-lo:

1. Em **Countdown**, defina **End date** e **End time**, depois escolha o **Timezone** e **Language** para os rótulos do temporizador.
2. Ative **Labels** para mostrar legendas "dias / horas / minutos / segundos" sob os dígitos, ou desative para apenas números.
3. Em **Appearance**, defina **Background**, **Digits color**, **Labels color** e o tamanho da fonte para os dígitos (padrão 40px) e rótulos (padrão 16px).
4. Ajuste o **Spacing** (preenchimento) conforme necessário.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="Configurações do bloco Temporizador com data e hora de término da contagem regressiva, Rótulos, Aparência e opções de Espaçamento"/>

### Colunas

**Colunas** dividem o canvas em seções lado a lado para que você possa colocar conteúdo um ao lado do outro em uma única linha.

Arraste um destes blocos para o canvas:

* **2 colunas:** duas colunas iguais
* **3 colunas:** três colunas iguais
* **4 colunas:** quatro colunas iguais
* **33 / 67:** coluna esquerda com cerca de 33% de largura, direita com cerca de 67%
* **67 / 33:** coluna esquerda com cerca de 67% de largura, direita com cerca de 33%

Em seguida, adicione conteúdo a cada coluna. Para alterar o espaçamento de todas as colunas no modelo, abra **Settings** → **Columns defaults** e ajuste o preenchimento externo, o preenchimento da coluna e o espaço entre as colunas.

## Configurar estilo para todo o modelo

As configurações do modelo controlam o estilo de todo o modelo de in-app: tamanho e fundo do documento, aparência do pop-up e estilos padrão para os blocos.

Abra a aba **Settings** no painel direito.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="Aba Configurações com seções de Documento, Pop-up e estilo padrão para blocos e colunas" width="320"/>

Seções disponíveis:

* **Document:** tamanho e aparência de toda a área da mensagem: largura, preenchimento, cor de fundo ou imagem, cor do texto, família da fonte e o espaço entre os blocos.
* **Popup:** como a mensagem se posiciona sobre o fundo escurecido: raio do canto, além da cor e opacidade da sobreposição.
* **Block defaults:** estilos iniciais compartilhados para blocos que você adiciona posteriormente, para que o novo conteúdo corresponda ao modelo até que você substitua um bloco no canvas.
* **Columns defaults:** espaçamento para todos os layouts de Colunas: preenchimento externo, preenchimento dentro de cada coluna e o espaço entre as colunas.
* **Card defaults:** aparência inicial para contêineres de Cartão que agrupam conteúdo no layout, aplicada até que você estilize um cartão individualmente.
* **Button group defaults:** espaçamento e alinhamento quando vários botões estão juntos como um grupo.
* **Button defaults:** aparência inicial para novos blocos de Botão, para que os CTAs permaneçam consistentes em todo o modelo até que você estilize um separadamente.
* **Divider defaults:** estilo de linha inicial, cor, espessura e largura para novos blocos de Divisor.

Os padrões se aplicam onde um bloco individual não os substitui.


<Aside type="note">
Não há configuração de altura. O pop-up cresce com seu conteúdo. Para uma mensagem em tela cheia, defina a **Width** em **Settings** e escolha **Fullscreen** em **In-app settings**.
</Aside>

## Localizar o modelo

Um modelo multilíngue armazena o conteúdo localizado para cada idioma em um único design de in-app. Use o seletor de idioma acima do canvas para adicionar idiomas e editar o conteúdo por idioma. Para saber como o envio de mensagens multilíngues funciona em todos os canais, consulte [Mensagens multilíngues](/pt/product/personalization/multi-language/).

O conteúdo que você ainda não traduziu para o idioma atual aparece esmaecido. Comece a digitar para criar a tradução. O idioma padrão continuará sendo exibido até que você o faça.

<Aside type="note">
Qualquer bloco que você adicionar aparecerá com o mesmo conteúdo para todos os idiomas. Lembre-se de traduzir novos textos e rótulos de botões para todos os idiomas que você usa em seu modelo.
</Aside>

## Configurar a aparência do in-app no dispositivo

As **In-app settings** controlam como a mensagem aparece e se comporta no dispositivo: posição, animações, gestos de deslizar e o botão de fechar. Essas configurações se aplicam apenas ao iOS e Android Nativo.

Clique em **In-app settings** na barra superior:

* **Position on Screen:** Fullscreen, Top, Center ou Bottom.
* **Present Animation** / **Close Animation:** None, Fade, Left, Right, Up ou Down, ou Default para usar o padrão do SDK do seu aplicativo.

<Aside type="note">
**None** e **Fade** atualmente funcionam no Android. No iOS, a mensagem aparece e desaparece instantaneamente (alinhamento em breve).
</Aside>

* **Animation Duration (MS):** 100 a 3000 milissegundos. Deixe em branco para usar o tempo padrão do SDK.
* **Swipe to Close:** habilite qualquer combinação de Left, Right, Up e Down.
* **Show close button:** ative ou desative o controle de fechar. Quando ativado, defina a **Position** (Top right, Top left, Bottom right, Bottom left), **Background** (uma cor ou **Transparent**) e **Icon Color**. Ao contrário das outras configurações neste modal, a aparência do botão de fechar é renderizada na própria mensagem e aparece em todas as plataformas, não apenas no iOS e Android Nativo.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="Modal de configurações de in-app com opções de posição, animações, deslizar para fechar e botão de fechar"/>

Clique em **Apply** para salvar suas escolhas ou em **Cancel** para descartá-las.

## Salvar o modelo

Clique em **Save** na barra superior para salvar suas alterações. Use **Undo**/**Redo** na barra superior para retroceder e avançar em suas edições.

<Aside type="note">
Salvar armazena seu modelo de in-app em **Content** → **In-apps**. A partir daí, você pode visualizar, editar e gerenciar modelos. [Saiba mais](/pt/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## Usar o modelo salvo

Depois de salvar um modelo de in-app, você pode exibi-lo aos usuários em uma Customer Journey, como um in-app único ou quando um usuário toca em uma notificação push.

* [Mostrar um in-app como parte de uma jornada do cliente](/pt/product/customer-journey/journey-elements/#in-app)
* [Enviar uma notificação push que abre um in-app quando clicada](/pt/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [Exibir um único in-app para seus usuários](/pt/product/messaging-channels/in-apps/)