Saltar al contenido principal
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

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.
Asegúrese de reemplazar Your_Project_ID_Here con el ID de su Proyecto.
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 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.
Asegúrese de reemplazar Your_Project_ID_Here con el ID de su Proyecto.
    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 una App Next.js

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:
    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. Add the following <div> tag in the component where you want the Chat Window to appear. <div id="odin-chatbot"></div>
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:
    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. 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>

​
Integrar a una App React.js

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

​
Integrar a un Proyecto Angular

  1. Add the following script to the index.html file located in the public folder.
    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. Add the following <div> tag in the page or component where you want the Chat Window to appear.
    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. Add the following script to the index.html file located in the public folder.
    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. 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>

​
Integrar a un Sitio WordPress

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:
    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 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:
    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;
}
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.