# Como incluir o WebSDK em um aplicativo

### Criando a página HTML 📝

Para renderizar o WebSDK em tela cheia dentro do seu aplicativo, é necessário criar uma página HTML simples que carregue o chat:

```
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSDK Hyperflow</title>
</head>
<body>
    <div id="full"></div>
    <script src="https://webchat.hyperflow.global/sdk.js"></script>
    <script>
        Hyperflow.init("SEU_TOKEN", {component: "full"});
    </script>
</body>
</html>
```

### Explicação do código 👩‍💻

* O elemento `<div id="full"></div>` serve como o contêiner onde o WebSDK será carregado.
* O script `https://webchat.hyperflow.global/sdk.js` carrega o SDK da Hyperflow.
* A função `Hyperflow.init("SEU_TOKEN", {component: "full"})` inicializa o WebSDK utilizando um token de autenticação e define que ele ocupará toda a tela.

### Publicando a página 🌍

Após criar o arquivo HTML, é necessário hospedá-lo em um servidor para que seja acessível online. Você pode utilizar serviços como:

* AWS S3
* Vercel
* GitHub Pages
* Firebase Hosting
* Qualquer outro serviço de hospedagem estática

### Obtendo o host do site 🔎

Para resgatar o host do site onde a página HTML está hospedada, siga os passos abaixo:

1. Acesse o site onde a página foi publicada.
2. Clique com o botão direito do mouse e selecione **Inspecionar**.
3. No painel do desenvolvedor, vá até a aba **Console**.
4. Digite `window.location.host` e pressione **Enter**.
5. O console exibirá o host do site.

{% hint style="danger" %}
**Atenção:** O host obtido será utilizado na configuração da conexão do WebSDK na Hyperflow, dentro da aba "Avançado". Certifique-se de copiá-lo corretamente para evitar problemas na integração.
{% endhint %}

### Integração com o aplicativo 📲

Depois que a página estiver hospedada e acessível por uma URL pública, basta renderizá-la dentro do seu aplicativo utilizando uma WebView (para aplicativos mobile) ou um iframe (para aplicações web). Isso garantirá que o WebSDK funcione corretamente dentro do seu ambiente.

### Prontinho! Agora seu app terá um chat totalmente funcional. 🚀


---

# 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://help.hyperflow.global/docs/canais-de-atendimento/websdk/como-incluir-o-websdk-em-um-aplicativo.md?ask=<question>
```

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.
