Pular para o conteúdo principal
Leve o chatbot de IA conversacional do EKB diretamente à sua experiência digital com facilidade. Seja para adicioná-lo a um site, Next.js, React.js, Angular ou WordPress, o processo de integração é simples e projetado para se encaixar perfeitamente na sua configuração existente. Este guia orienta você em cada opção, ajudando a oferecer engajamento mais inteligente do cliente e suporte em tempo real onde seus usuários precisam.

​
Integrar ao Seu Site

Para adicionar o chatbot em qualquer lugar do seu site, use o script HTML abaixo para adicionar o chatbot em formato de “nova janela” para aprimorar seu site com chatbots alimentados por IA que podem atender consultas de visitantes de forma contínua. Adicione este script ao seu código HTML.
Certifique-se de substituir Your_Project_ID_Here pelo ID do seu Projeto.
id="odin-chatbot"></div>
<script>
    window.project_id = "Your_Project_ID_Here";
    window.frame_type = "window";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
></script>
Para adicionar o chatbot como um balão de chat no canto inferior direito do seu site, use o script HTML abaixo. Isso é ideal para fornecer suporte instantâneo, permitindo que os usuários interajam facilmente com o chatbot do EKB. Adicione este script ao seu código HTML.
Certifique-se de substituir Your_Project_ID_Here pelo ID do seu Projeto.
    window.project_id = "Your_Project_ID_Here";
    window.frame_type = "widget";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="widget"
    defer
></script>

​
Integrar a um Aplicativo Next.js

Para integrar o chatbot do EKB ao seu aplicativo Next.js como uma janela de chat, siga estas instruções:
  1. Coloque o seguinte script no rootLayout ou no Arquivo App:
    Script from
    export default function TalkToEKB() {
    return (
        <div className="chatbot-talk py-10 lg:pb-20 lg:pt-[70px]">
            <div className="p-3 md:p-4">
                <h4 className="mb-12 text-center text-[24px] md:text-[54px]">
                    <span className="gradient-title">Talk to EKB Now</span>
                </h4>
                <div id="odin-chatbot"></div>
                <Script>
                    {`window.project_id = "Your_Project_ID_Here";
                    window.frame_type = "window";`}
                </Script>
                <Script
                    src="https://app.getodin.ai/loader.min.js"
                    project_id="Your_Project_ID_Here"
                    frame_type="window"
                    defer
                ></Script>
            </div>
        </div>
    )
}
  2. Adicione a seguinte tag <div> no componente onde você deseja que a Janela de Chat apareça. <div id="odin-chatbot"></div>
Para integrar o chatbot do EKB ao seu aplicativo Next.js como um balão de chat, siga estas instruções:
  1. Coloque o seguinte script no rootLayout ou no Arquivo App:
    Script from
    export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body>{children}</body>
            <Script>
                {`window.project_id = "Your_Project_ID_Here";
                    window.frame_type = "widget";`}
            </Script>
            <Script
                src="https://app.getodin.ai/loader.min.js"
                project_id="Your_Project_ID_Here"
                frame_type="widget"
                defer
            ></Script>
        </html>
    )
}
  2. Se você adicionou o chatbot como Janela de Chat anteriormente, certifique-se de remover a seguinte tag <div> ao usar o widget de chat. <div id="odin-chatbot"></div>

​
Integrar a um Aplicativo React.js

  1. Adicione o seguinte script dentro da tag <head> do arquivo index.html localizado na pasta public.
        window.project_id="Your_Project_ID_Here";
        window.frame_type="window";
    </script>
    <script
        src="https://app.getodin.ai/loader.min.js"
        project_id="Your_Project_ID_Here"
        frame_type="window"
        defer
    ></script>
  1. Adicione a seguinte tag <div> na página ou componente onde você deseja que a Janela de Chat apareça.
    React from "react";
    export default function Home() {
    return (
        <div>
            <div className="card bg-dark text-white border-0 mx-3">
                <img
                    className="card-img img-fluid"
                    src="./assets/main.png.jpg"
                    alt="Card"
                    height={500}
                />
                <div className="card d-flex align-items-center">
                    <div className="container">
                        <h5 className="card-title">New Season Arrivals</h5>
                    </div>
                </div>
            </div>
            <div id="odin-chatbot"></div>
        </div>
    );
};
  1. Adicione o seguinte script dentro da tag <head> do arquivo index.html localizado na pasta public.
    window.project_id="Your_Project_ID_Here";
    window.frame_type="window";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
></script>
  1. Se você adicionou o chatbot como Janela de Chat anteriormente, certifique-se de remover a seguinte tag <div> ao usar o widget de chat. <div id="odin-chatbot"></div>

​
Integrar a um Projeto Angular

  1. Adicione o seguinte script ao arquivo index.html localizado na pasta public.
    html>
    <html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
    <script>
    window.project_id="Your_Project_ID_Here";
    window.frame_type="window";
    </script>
    <script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
    ></script>
</body>
  2. Adicione a seguinte tag <div> na página ou componente onde você deseja que a Janela de Chat apareça.
    class="contents">
        <div class="side">
        <img src="assets/logo.svg" width="200" height="200" />
        <h1>EKB Chatbot</h1>
        <p>Congratulations! Your app is running. 🎉</p>
    </div>
    <div id="odin-chatbot" style="width: 380px"></div>
</div>
  1. Adicione o seguinte script ao arquivo index.html localizado na pasta public.
    html>
    <html lang="en">
<head>
    <meta charset="utf-8">
    <title>Angular</title><base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
    <script>
        window.project_id="Your_Project_ID_Here";
        window.frame_type="widget";
    </script>
    <script
        src="https://app.getodin.ai/loader.min.js"
        project_id="Your_Project_ID_Here"
        frame_type="widget"
        defer>
    </script>
</body>
  2. Se você adicionou o chatbot como Janela de Chat anteriormente, certifique-se de remover a seguinte tag <div> ao usar o widget de chat. <div id="odin-chatbot"></div>

​
Integrar a um Site WordPress

Para adicionar o chatbot ao seu site WordPress, você pode adicionar o seguinte script jQuery à página usando o bloco Custom HTML no editor do WordPress:
    setTimeout(function() {
        var scriptContent = jQuery('#opbcb-odin-chatbot-root');

        if (scriptContent.length) {
            jQuery('#odin-chatbot').append(scriptContent);
        } else {
            console.log('Element not found: #opbcb-odin-chatbot-root');
        }
    }, 
    1000);
</script>
Para adicionar o chatbot como um balão de chat ao seu site WordPress, você pode adicionar o script da Janela de Chat mencionado acima à página usando o bloco Custom HTML no editor do WordPress e, em seguida, adicionar o seguinte script CSS:
    border-radius: 20px;
    bottom: 90px;
    height: 88% !important;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    max-height: 750px;
    max-width: 450px;
    position: fixed;
    right: 5px;
    transition: all .3s ease;
    width: 100%;
    z-index: 999;
    top: 30px !important;
}
Se você quiser adicionar o Balão de Chat no rodapé da página, será necessário primeiro adicionar o script no bloco Custom HTML do rodapé junto com o código CSS.