Como incluir o WebSDK em um aplicativo

Esta documentação explica como incluir o WebSDK da Hyperflow em um aplicativo de forma simples. O WebSDK permite a integração de um chatbot diretamente na interface do seu app.asd

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:

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

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.

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. 🚀

PreviousConfigurações da WebSDK NextFacebook Messenger

Last updated 1 month ago

Was this helpful?

<!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>