> For the complete documentation index, see [llms.txt](https://docs.sprinthub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sprinthub.com/topicos/converter/pop-up/pop-up-integracao-com-site-externo.md).

# Pop-up - Integração com Site Externo

Na SprintHub você utilizar o Pop-up dentro do Site Externo, assim consegue gerenciar em um único local seus atendimentos e finalizar suas vendas.

Para utilizar o "Pop-up" no Site Externo siga o passo a passo:

Selecione em todos os serviços, clicando em **"Converte"**  e após **"Pop-up",** caso desejar pode digitar na barra de pesquisas **"Pop-up".**&#x20;

Com o seu **"Pop-up"** já criado, clique no nome do **"Titulo"**

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2Ffhc1WXjlgZW3O88kIyY8%2Fimage.png?alt=media&amp;token=b3e72858-5d40-4ebe-83b4-99734aacac89" alt=""><figcaption></figcaption></figure>

Será redirecionado para o acompanhamento de registros, onde verifica as atividades recentes modificadas e as estatísticas de visualizações por dias e totais.

**Atividades recentes:** Todas as modificações realizadas.

**Estatísticas:** Para acompanhar as visualizações tanto dividuais e totais, conseguindo definir o período que deseja.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F5SKiLiCkD1OXGjkYRRZ7%2Fimage.png?alt=media&amp;token=7ae9edc5-7ccd-438f-9167-3dabe8f669a9" alt=""><figcaption></figcaption></figure>

Logo abaixo, possuímos o passo a passo para a instalação em  Site Externo:&#x20;

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FJjDpot1vEiqtpedQt5pk%2Fimage.png?alt=media&amp;token=af5ed678-2240-4c91-a68a-41faaea06b18" alt=""><figcaption></figcaption></figure>

Precisando de ajuda para criação de **"Landing Pages"** ? Temos um passo a passo para auxiliar em sua dúvida:

{% embed url="<https://docs.sprinthub.com/tutoriais/atrair/landing-page/landing-page-como-criar-uma-landing-page>" %}

Para inserir "Pop-up" na "Landing Pages" criada no SprintHub, você pode usar o próprio editor de "Landing Pages", porém caso você queira um pouco mais de flexibilidade ou esteja utilizando um website externo, siga um dos métodos abaixo.

Para mostrar o **"Pop-up"** de forma manual, utilize a seguinte função na sua página:

**window\.show\_popup\_Y2--KUX78SmlVNqtQQS32()**

Na SprintHub possuímos dois métodos para utilização:

\
**Método Automático(Recomendado):** Conseguindo gerar o **"Pop-up"** automaticamente no seu website, fazendo com que ele sempre esteja atualizado, mesmo com você realizando modificações nele. Copie o código abaixo e cole-o em seu website, na posição onde deseja que seu **"Pop-up"** fique.

```javascript
<script type="text/javascript" src="https://sprinthub-api-master.sprinthub.app/popup/Y2--KUX78SmlVNqtQQS32?i=g4.sprinthub.app"></script>
```

**Método Manual:** Sempre que você modificar o **"Pop-up"**&#x6E;o SprintHub, você precisará realizar novamente a atualização d&#x6F;**"Pop-up"** no website manualmente. Apesar disso, você terá mais flexibilidade para alterar o código como desejar.\
\
Copie e cole o código abaixo dentro da tag ou do seu documento.

```javascript
<script type="text/javascript" src="https://sprinthub-api-master.sprinthub.app/popup/Y2--KUX78SmlVNqtQQS32?man=1&i=g4.sprinthub.app"></script>
```

Copie o código abaixo e cole-o em seu website, na posição onde deseja que seu **"Pop-up"** fique.

```javascript
<style>.cust-3ae0a-lPvtxgRT5Ku6Pa9{max-width:none;max-height:none;flex-direction:column}</style><div id="Y2--KUX78SmlVNqtQQS32" class="shub-notification cust-3ae0a-lPvtxgRT5Ku6Pa9" style="top:5px;right:5px;display:none"><div class="shub-popup-icon" id="Y2--KUX78SmlVNqtQQS32-closebtn" style="top:5px;right:5px;bottom:unset;left:unset;width:20px;height:20px;color:#333"><span class="iconify-inline" data-icon="material-symbols:close" style="width:100%;height:100%"></span></div></div>
```
