Integre el Chatbot de EKB a Su Sitio Web y Apps

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

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.

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>

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.

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

Ventana de Chat

Para integrar el chatbot de EKB en su app Next.js como una ventana de chat, siga estas instrucciones:

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

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

Burbuja de Chat

Para integrar el chatbot de EKB en su app Next.js como una burbuja de chat, siga estas instrucciones:

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

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

Ventana de Chat

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>

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

Burbuja de Chat

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>

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

Ventana de Chat

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>

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>

Burbuja de Chat

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>

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

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:

    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>

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:

    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.

Get Started!

Offerings

Chat

Agents

Knowledge Base

Workflows

Interfaces

Public Chatbot

Project Settings

My Account

Platform Admin

SDK

General Information

Integre el Chatbot de EKB a Su Sitio Web y Apps

Integrar a Su Sitio Web

Integrar a una App Next.js

Integrar a una App React.js

Integrar a un Proyecto Angular

Integrar a un Sitio WordPress

​Integrar a Su Sitio Web

​Integrar a una App Next.js

​Integrar a una App React.js

​Integrar a un Proyecto Angular

​Integrar a un Sitio WordPress

Integrar a Su Sitio Web

Integrar a una App Next.js

Integrar a una App React.js

Integrar a un Proyecto Angular

Integrar a un Sitio WordPress