Studio

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:

  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.

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 WebSDKNextFacebook Messenger

Last updated

Was this helpful?