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

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

> Intégration transparente, partout où vous en avez besoin

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

<AccordionGroup>
  <Accordion title="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.\
    <Warning>Assurez-vous de remplacer `Your_Project_ID_Here` par l'identifiant de votre projet.</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="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.
    <Warning>Assurez-vous de remplacer `Your_Project_ID_Here` par l'identifiant de votre projet.</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>

## Intégrer à une application Next.js

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

    1. Placez le script suivant dans le fichier `rootLayout` ou **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. Ajoutez la balise `<div>` suivante dans le composant où vous souhaitez que la fenêtre de chat s'affiche.
       `<div id="odin-chatbot"></div>`
  </Accordion>

  <Accordion title="Bulle de chat">
    Pour intégrer le chatbot EKB dans votre application Next.js en tant que bulle de chat, suivez ces instructions :

    1. Placez le script suivant dans le fichier `rootLayout` ou **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 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>`
  </Accordion>
</AccordionGroup>

## Intégrer à une application React.js

<AccordionGroup>
  <Accordion title="Fenêtre de chat">
    1. Ajoutez le script suivant dans la balise `<head>` du fichier index.html situé dans le dossier 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. Ajoutez la balise `<div>` suivante dans la page ou le composant où vous souhaitez que la fenêtre de chat s'affiche.
       ```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="Bulle de chat">
    1. Ajoutez le script suivant dans la balise `<head>` du fichier index.html situé dans le dossier 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 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>`
  </Accordion>
</AccordionGroup>

## Intégrer à un projet Angular

<AccordionGroup>
  <Accordion title="Fenêtre de chat">
    1. Ajoutez le script suivant au fichier index.html situé dans le dossier 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. Ajoutez la balise `<div>` suivante dans la page ou le composant où vous souhaitez que la fenêtre de chat s'affiche.
       ```<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="Bulle de chat">
    1. Ajoutez le script suivant au fichier index.html situé dans le dossier 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. 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>`
  </Accordion>
</AccordionGroup>

## Intégrer à un site WordPress

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

    ```<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="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 :

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