> ## 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 el Chatbot de EKB a Su Sitio Web y Apps

> Integración Fluida, Donde la Necesite

Lleve el chatbot conversacional de IA de EKB directamente a su experiencia digital con facilidad. Ya sea que desee agregarlo a un sitio web, Next.js, React.js, Angular o WordPress, el proceso de integración es simple y está diseñado para encajar perfectamente en su configuración existente. Esta guía lo guía a través de cada opción, ayudándole a ofrecer una interacción más inteligente con los clientes y soporte en tiempo real justo donde sus usuarios lo necesitan.

## Integrar a Su Sitio Web

<AccordionGroup>
  <Accordion title="Ventana de Chat">
    Para agregar el chatbot en cualquier parte de su sitio web, use el siguiente script HTML para agregar el chatbot en un formato de "nueva ventana" para mejorar su sitio web con chatbots impulsados por IA que pueden manejar las consultas de los visitantes sin problemas.
    Agregue este script a su código HTML.\
    <Warning>Asegúrese de reemplazar `Your_Project_ID_Here` con el ID de su Proyecto.</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="Burbuja de Chat">
    Para agregar el chatbot como una burbuja de chat en la parte inferior derecha de su sitio web, use el siguiente script HTML. Esto es ideal para proporcionar soporte instantáneo, permitiendo a los usuarios interactuar con el chatbot de EKB fácilmente.
    Agregue este script a su código HTML.
    <Warning>Asegúrese de reemplazar `Your_Project_ID_Here` con el ID de su Proyecto.</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 una App Next.js

<AccordionGroup>
  <Accordion title="Ventana de Chat">
    Para integrar el chatbot de EKB en su app Next.js como una ventana de chat, siga estas instrucciones:

    1. Coloque el siguiente script en el `rootLayout` o **archivo 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. Add the following `<div>` tag in the component where you want the Chat Window to appear.
       `<div id="odin-chatbot"></div>`
  </Accordion>

  <Accordion title="Burbuja de Chat">
    Para integrar el chatbot de EKB en su app Next.js como una burbuja de chat, siga estas instrucciones:

    1. Coloque el siguiente script en el `rootLayout` o **archivo 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. Si previamente agregó el Chatbot como Ventana de Chat, asegúrese de eliminar la siguiente etiqueta `<div>` mientras usa el widget de chat.
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## Integrar a una App React.js

<AccordionGroup>
  <Accordion title="Ventana de Chat">
    1. Agregue el siguiente script dentro de la etiqueta `<head>` del archivo index.html ubicado en la carpeta 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. Add the following `<div>` tag in the page or component where you want the Chat Window to appear.
       ```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">Llegadas de Nueva Temporada</h5>
                           </div>
                       </div>
                   </div>
                   <div id="odin-chatbot"></div>
               </div>
           );
       };
       ```
  </Accordion>

  <Accordion title="Burbuja de Chat">
    1. Agregue el siguiente script dentro de la etiqueta `<head>` del archivo index.html ubicado en la carpeta 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. Si previamente agregó el Chatbot como Ventana de Chat, asegúrese de eliminar la siguiente etiqueta `<div>` mientras usa el widget de chat.
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## Integrar a un Proyecto Angular

<AccordionGroup>
  <Accordion title="Ventana de Chat">
    1. Add the following script to the index.html file located in the public folder.
       ```<!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. Add the following `<div>` tag in the page or component where you want the Chat Window to appear.
       ```<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="Burbuja de Chat">
    1. Add the following script to the index.html file located in the public folder.
       ```<!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. Si previamente agregó el Chatbot como Ventana de Chat, asegúrese de eliminar la siguiente etiqueta `<div>` mientras usa el widget de chat.
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## Integrar a un Sitio WordPress

<AccordionGroup>
  <Accordion title="Ventana de Chat">
    Para agregar el chatbot a su sitio WordPress, puede agregar el siguiente script jQuery a la página usando el bloque `Custom HTML` en el editor de 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="Burbuja de Chat">
    Para agregar el chatbot como una burbuja de chat a su sitio WordPress, puede agregar el script de **Ventana de Chat**, mencionado arriba, a la página usando el bloque `Custom HTML` en el editor de WordPress y luego agregar el siguiente 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>Si desea agregar la Burbuja de Chat en el pie de página, primero debe agregar el script en el bloque `Custom HTML` del pie de página junto con el código CSS.</Note>
  </Accordion>
</AccordionGroup>