Integre o Chatbot do EKB ao Seu Site e Aplicativos

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

Janela de Chat

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>

Balão de Chat

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

Janela de Chat

Para integrar o chatbot do EKB ao seu aplicativo Next.js como uma janela de chat, siga estas instruções:

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>
    )
}

Adicione a seguinte tag <div> no componente onde você deseja que a Janela de Chat apareça. <div id="odin-chatbot"></div>

Balão de Chat

Para integrar o chatbot do EKB ao seu aplicativo Next.js como um balão de chat, siga estas instruções:

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>
    )
}

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

Janela de Chat

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>

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>
    );
};

Balão de Chat

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>

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

Janela de Chat

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>

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>

Balão de Chat

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>

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

Janela de Chat

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>

Balão de Chat

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.

Get Started!

Offerings

Chat

Agents

Knowledge Base

Workflows

Public Chatbot

Project Settings

My Account

Platform Admin

SDK

General Information

Integre o Chatbot do EKB ao Seu Site e Aplicativos

Integrar ao Seu Site

Integrar a um Aplicativo Next.js

Integrar a um Aplicativo React.js

Integrar a um Projeto Angular

Integrar a um Site WordPress

​Integrar ao Seu Site

​Integrar a um Aplicativo Next.js

​Integrar a um Aplicativo React.js

​Integrar a um Projeto Angular

​Integrar a um Site WordPress

Integrar ao Seu Site

Integrar a um Aplicativo Next.js

Integrar a um Aplicativo React.js

Integrar a um Projeto Angular

Integrar a um Site WordPress