Intégrer le Chatbot EKB à vos sites web et applications

Apportez le chatbot IA conversationnel d'EKB directement dans votre expérience numérique avec facilité. Que vous souhaitiez l'ajouter à un site web, Next.js, React.js, Angular ou WordPress, le processus d'intégration est simple et conçu pour s'adapter de manière transparente à votre configuration existante. Ce guide vous accompagne à travers chaque option, vous aidant à fournir un engagement client plus intelligent et un support en temps réel là où vos utilisateurs en ont besoin.

Intégrer à votre site web

Fenêtre de chat

Pour ajouter le chatbot n'importe où sur votre site web, utilisez le script HTML ci-dessous pour ajouter le chatbot dans un format de « nouvelle fenêtre » afin d'améliorer votre site web avec des chatbots alimentés par l'IA qui peuvent traiter les demandes des visiteurs de manière transparente. Ajoutez ce script à votre code HTML.

attention

Assurez-vous de remplacer Your_Project_ID_Here par l'identifiant de votre projet.

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

Bulle de chat

Pour ajouter le chatbot sous forme de bulle de chat en bas à droite de votre site web, utilisez le script HTML ci-dessous. Ceci est idéal pour fournir un support instantané, permettant aux utilisateurs d'interagir facilement avec le chatbot EKB. Ajoutez ce script à votre code HTML.

attention

Assurez-vous de remplacer Your_Project_ID_Here par l'identifiant de votre projet.

    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>

Intégrer à une application Next.js

Fenêtre de chat

Pour intégrer le chatbot EKB dans votre application Next.js en tant que fenêtre de chat, suivez ces instructions :

Placez le script suivant dans le fichier rootLayout ou App :

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

Ajoutez la balise <div> suivante dans le composant où vous souhaitez que la fenêtre de chat s'affiche. <div id="odin-chatbot"></div>

Bulle de chat

Pour intégrer le chatbot EKB dans votre application Next.js en tant que bulle de chat, suivez ces instructions :

Placez le script suivant dans le fichier rootLayout ou App :

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 vous avez précédemment ajouté le Chatbot en tant que fenêtre de chat, assurez-vous de supprimer la balise <div> suivante lors de l'utilisation du widget de chat. <div id="odin-chatbot"></div>

Intégrer à une application React.js

Fenêtre de chat

Ajoutez le script suivant dans la balise <head> du fichier index.html situé dans le dossier 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>

Ajoutez la balise <div> suivante dans la page ou le composant où vous souhaitez que la fenêtre de chat s'affiche.

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

Bulle de chat

Ajoutez le script suivant dans la balise <head> du fichier index.html situé dans le dossier 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 vous avez précédemment ajouté le Chatbot en tant que fenêtre de chat, assurez-vous de supprimer la balise <div> suivante lors de l'utilisation du widget de chat. <div id="odin-chatbot"></div>

Intégrer à un projet Angular

Fenêtre de chat

Ajoutez le script suivant au fichier index.html situé dans le dossier public.

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

Ajoutez la balise <div> suivante dans la page ou le composant où vous souhaitez que la fenêtre de chat s'affiche.

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

Bulle de chat

Ajoutez le script suivant au fichier index.html situé dans le dossier public.

<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 vous avez précédemment ajouté le Chatbot en tant que fenêtre de chat, assurez-vous de supprimer la balise <div> suivante lors de l'utilisation du widget de chat. <div id="odin-chatbot"></div>

Intégrer à un site WordPress

Fenêtre de chat

Pour ajouter le chatbot à votre site WordPress, vous pouvez ajouter le script jQuery suivant à la page en utilisant le bloc Custom HTML dans l'éditeur 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>

Bulle de chat

Pour ajouter le chatbot en tant que bulle de chat à votre site WordPress, vous pouvez ajouter le script Fenêtre de chat mentionné ci-dessus à la page en utilisant le bloc Custom HTML de l'éditeur WordPress, puis ajouter le script CSS suivant :

    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 vous souhaitez ajouter la bulle de chat au bas de la page, vous devez d'abord ajouter le script dans le bloc Custom HTML du pied de page avec le code CSS.

Intégrer à votre site web​

Intégrer à une application Next.js​

Intégrer à une application React.js​

Intégrer à un projet Angular​

Intégrer à un site WordPress​

Intégrer à votre site web

Intégrer à une application Next.js

Intégrer à une application React.js

Intégrer à un projet Angular

Intégrer à un site WordPress