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

# अपनी वेबसाइट और ऐप्स में EKB चैटबॉट एकीकृत करें

> सहज एकीकरण, जहाँ भी आपको आवश्यकता हो

आसानी से EKB का संवादी AI चैटबॉट सीधे अपने डिजिटल अनुभव में लाएँ। चाहे आप इसे वेबसाइट, Next.js, React.js, Angular या WordPress में जोड़ना चाहते हों, एकीकरण प्रक्रिया सरल है और आपके मौजूदा सेटअप में सहजता से फ़िट होने के लिए डिज़ाइन की गई है। यह गाइड प्रत्येक विकल्प के माध्यम से आपका मार्गदर्शन करता है, जिससे आप अपने उपयोगकर्ताओं की आवश्यकता के स्थान पर स्मार्ट ग्राहक संलग्नता और वास्तविक समय समर्थन प्रदान कर सकते हैं।

## अपनी वेबसाइट में एकीकृत करें

<AccordionGroup>
  <Accordion title="चैट विंडो">
    चैटबॉट को अपनी वेबसाइट पर कहीं भी जोड़ने के लिए, नीचे दिए गए HTML स्क्रिप्ट का उपयोग करें ताकि चैटबॉट को "नई विंडो" प्रारूप में जोड़ा जा सके और विज़िटर के प्रश्नों को सहजता से संभालने वाले AI-संचालित चैटबॉट्स के साथ अपनी वेबसाइट को बेहतर बनाया जा सके।
    इस स्क्रिप्ट को अपने HTML कोड में जोड़ें।\
    <Warning>सुनिश्चित करें कि `Your_Project_ID_Here` को अपनी परियोजना के ID से बदलें।</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="चैट बुलबुला">
    चैटबॉट को अपनी वेबसाइट के निचले दाएँ कोने में चैट बुलबुले के रूप में जोड़ने के लिए, नीचे दिए गए HTML स्क्रिप्ट का उपयोग करें। तत्काल समर्थन प्रदान करने के लिए यह आदर्श है, जिससे उपयोगकर्ता आसानी से EKB चैटबॉट के साथ बातचीत कर सकते हैं।
    इस स्क्रिप्ट को अपने HTML कोड में जोड़ें।
    <Warning>सुनिश्चित करें कि `Your_Project_ID_Here` को अपनी परियोजना के ID से बदलें।</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>

## Next.js ऐप में एकीकृत करें

<AccordionGroup>
  <Accordion title="चैट विंडो">
    EKB चैटबॉट को चैट विंडो के रूप में अपने Next.js ऐप में एकीकृत करने के लिए, इन निर्देशों का पालन करें:

    1. निम्नलिखित स्क्रिप्ट को `rootLayout` या **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. उस कंपोनेंट में निम्नलिखित `<div>` टैग जोड़ें जहाँ आप चैट विंडो देखना चाहते हैं।
       `<div id="odin-chatbot"></div>`
  </Accordion>

  <Accordion title="चैट बुलबुला">
    EKB चैटबॉट को चैट बुलबुले के रूप में अपने Next.js ऐप में एकीकृत करने के लिए, इन निर्देशों का पालन करें:

    1. निम्नलिखित स्क्रिप्ट को `rootLayout` या **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. यदि आपने पहले चैटबॉट को चैट विंडो के रूप में जोड़ा है, तो चैट विजेट का उपयोग करते समय निम्नलिखित `<div>` टैग को हटा दें।
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## React.js ऐप में एकीकृत करें

<AccordionGroup>
  <Accordion title="चैट विंडो">
    1. public फ़ोल्डर में स्थित index.html फ़ाइल के `<head>` टैग के भीतर निम्नलिखित स्क्रिप्ट जोड़ें।

    ```<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. उस पेज या कंपोनेंट में निम्नलिखित `<div>` टैग जोड़ें जहाँ आप चैट विंडो देखना चाहते हैं।
       ```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="चैट बुलबुला">
    1. public फ़ोल्डर में स्थित index.html फ़ाइल के `<head>` टैग के भीतर निम्नलिखित स्क्रिप्ट जोड़ें।

    ```<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. यदि आपने पहले चैटबॉट को चैट विंडो के रूप में जोड़ा है, तो चैट विजेट का उपयोग करते समय निम्नलिखित `<div>` टैग को हटा दें।
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## Angular परियोजना में एकीकृत करें

<AccordionGroup>
  <Accordion title="चैट विंडो">
    1. public फ़ोल्डर में स्थित index.html फ़ाइल में निम्नलिखित स्क्रिप्ट जोड़ें।
       ```<!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. उस पेज या कंपोनेंट में निम्नलिखित `<div>` टैग जोड़ें जहाँ आप चैट विंडो देखना चाहते हैं।
       ```<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="चैट बुलबुला">
    1. public फ़ोल्डर में स्थित index.html फ़ाइल में निम्नलिखित स्क्रिप्ट जोड़ें।
       ```<!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. यदि आपने पहले चैटबॉट को चैट विंडो के रूप में जोड़ा है, तो चैट विजेट का उपयोग करते समय निम्नलिखित `<div>` टैग को हटा दें।
       `<div id="odin-chatbot"></div>`
  </Accordion>
</AccordionGroup>

## WordPress साइट में एकीकृत करें

<AccordionGroup>
  <Accordion title="चैट विंडो">
    चैटबॉट को अपनी WordPress साइट में जोड़ने के लिए, आप WordPress एडिटर में `Custom HTML` ब्लॉक का उपयोग करके पेज में निम्नलिखित jQuery स्क्रिप्ट जोड़ सकते हैं:

    ```<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="चैट बुलबुला">
    चैटबॉट को अपनी WordPress साइट में चैट बुलबुले के रूप में जोड़ने के लिए, आप WordPress एडिटर में `Custom HTML` ब्लॉक का उपयोग करके पेज में ऊपर उल्लिखित **चैट विंडो** स्क्रिप्ट जोड़ सकते हैं और फिर निम्नलिखित 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>यदि आप पेज के फ़ुटर में चैट बुलबुला जोड़ना चाहते हैं, तो आपको पहले फ़ुटर के `Custom HTML` ब्लॉक में CSS कोड के साथ स्क्रिप्ट जोड़ना होगा।</Note>
  </Accordion>
</AccordionGroup>