# Popup de Newsletter O recurso de Popup de Newsletter é utilizado para capturar o contato dos clientes, adicionando esse contato a uma lista de pessoas que deseja receber informações enviadas pela loja. **Observações**: O modal será exibido apenas uma vez no período de 24 horas. Ele será exibido após 5 segundos do carregamento da página. Vamos ao passo a passo **Passo 1 -** Adicione o arquivo `modal.css` dentro da pasta css do tema, esse arquivo é responsável pela estilização do modal, dessa forma fique a vontade para realizar a personalização do recurso através deste arquivo (verificar **Arquivos** no final dessa página). **Passo 2** - Adicione o arquivo `modal.js` dentro da pasta js do tema, esse arquivo é responsável por toda as ações disponíveis no recurso (verificar **Arquivos** no final dessa página). **Passo 3** - Adicione o arquivo `js-cookie.min.js` dentro da pasta js do tema, esse arquivo é responsável por criar um cookie encarregado de quando será exibido novamente o modal (verificar **Arquivos** no final dessa página). **Passo 4** - Crie o arquivo `modal-newsletter.html` dentro da pasta elements do tema, é através desse arquivo que será montada toda a estrutura do popup. Nesse arquivo adicione o código abaixo: ```html ``` **Passo 5 -** Acesse o arquivo `default.html` localizado na pasta layout, nesse arquivo será necessário adicionar as referencias dos arquivos adicionados nos passos anteriores. Nesse arquivo, dentro da tag `` adicione a chamada do arquivo `modal.css`, como abaixo: ```html ``` Ainda nesse arquivo, adicione ao final do arquivo, antes da tag `` as chamadas abaixo: ```html {% element 'modal-newsletter' %} ``` Após adicionado, ao carregar a pagina e se passar 5 segundos, o modal será exibido. Lembrando que será exibido apenas uma vez por dia, ou então até que os cookies da página sejam limpos. ## Arquivos Segue abaixo o link para download do arquivo compactado com os arquivos `modal.css, modal.js` e `js-cookie.min.js` {% file src="/files/ksuMMdRdgJ6WjfmqPxcY" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/popup-de-newsletter.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.