> ## Documentation Index
> Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integre o Chatbot do EKB ao Seu Site e Aplicativos

> Integração Contínua, Onde Você Precisar

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

<AccordionGroup>
  <Accordion title="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.\
    <Warning>Certifique-se de substituir `Your_Project_ID_Here` pelo ID do seu Projeto.</Warning>

    ```<div id="odin-chatbot"></div> theme={null}
    <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>
    ```
  </Accordion>

  <Accordion title="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.
    <Warning>Certifique-se de substituir `Your_Project_ID_Here` pelo ID do seu Projeto.</Warning>

    ```<script> theme={null}
        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>
    ```
  </Accordion>
</AccordionGroup>

## Integrar a um Aplicativo Next.js

<AccordionGroup>
  <Accordion title="Janela de Chat">
    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**:
       ```import Script from "next/script" theme={null}
       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>`
  </Accordion>

  <Accordion title="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:

    1. Coloque o seguinte script no `rootLayout` ou no **Arquivo App**:
       ```import Script from "next/script" theme={null}
       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>`
  </Accordion>
</AccordionGroup>

## Integrar a um Aplicativo React.js

<AccordionGroup>
  <Accordion title="Janela de Chat">
    1. Adicione o seguinte script dentro da tag `<head>` do arquivo index.html localizado na pasta public.

    ```<script> theme={null}
            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>
    ```

    2. Adicione a seguinte tag `<div>` na página ou componente onde você deseja que a Janela de Chat apareça.
       ```import React from "react"; theme={null}
       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>
           );
       };
       ```
  </Accordion>

  <Accordion title="Balão de Chat">
    1. Adicione o seguinte script dentro da tag `<head>` do arquivo index.html localizado na pasta public.

    ```<script> theme={null}
        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>
    ```

    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>`
  </Accordion>
</AccordionGroup>

## Integrar a um Projeto Angular

<AccordionGroup>
  <Accordion title="Janela de Chat">
    1. Adicione o seguinte script ao arquivo index.html localizado na pasta public.
       ```<!doctype html> theme={null}
       <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.
       ```<div class="contents"> theme={null}
           <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>
       ```
  </Accordion>

  <Accordion title="Balão de Chat">
    1. Adicione o seguinte script ao arquivo index.html localizado na pasta public.
       ```<!doctype html> theme={null}
       <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>`
  </Accordion>
</AccordionGroup>

## Integrar a um Site WordPress

<AccordionGroup>
  <Accordion title="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:

    ```<script> theme={null}
        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>
    ```
  </Accordion>

  <Accordion title="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:

    ```.opbcb-chat-container { theme={null}
        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;
    }
    ```

    <Note>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.</Note>
  </Accordion>
</AccordionGroup>