मुख्य सामग्री पर जाएं

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

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

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

चैट विंडो

चैटबॉट को अपनी वेबसाइट पर कहीं भी जोड़ने के लिए, नीचे दिए गए HTML स्क्रिप्ट का उपयोग करें ताकि चैटबॉट को "नई विंडो" प्रारूप में जोड़ा जा सके और विज़िटर के प्रश्नों को सहजता से संभालने वाले AI-संचालित चैटबॉट्स के साथ अपनी वेबसाइट को बेहतर बनाया जा सके। इस स्क्रिप्ट को अपने HTML कोड में जोड़ें।

warning
सुनिश्चित करें कि Your_Project_ID_Here को अपनी परियोजना के ID से बदलें।
<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>
चैट बुलबुला

चैटबॉट को अपनी वेबसाइट के निचले दाएँ कोने में चैट बुलबुले के रूप में जोड़ने के लिए, नीचे दिए गए HTML स्क्रिप्ट का उपयोग करें। तत्काल समर्थन प्रदान करने के लिए यह आदर्श है, जिससे उपयोगकर्ता आसानी से EKB चैटबॉट के साथ बातचीत कर सकते हैं। इस स्क्रिप्ट को अपने HTML कोड में जोड़ें।

warning
सुनिश्चित करें कि Your_Project_ID_Here को अपनी परियोजना के ID से बदलें।
<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>

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

चैट विंडो

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

  1. निम्नलिखित स्क्रिप्ट को rootLayout या App फ़ाइल में रखें: 
    import Script from "next/script"
    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>
चैट बुलबुला

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

  1. निम्नलिखित स्क्रिप्ट को rootLayout या App फ़ाइल में रखें: 
    import Script from "next/script"
    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>

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

चैट विंडो
  1. public फ़ोल्डर में स्थित index.html फ़ाइल के <head> टैग के भीतर निम्नलिखित स्क्रिप्ट जोड़ें।
<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>
  1. उस पेज या कंपोनेंट में निम्नलिखित <div> टैग जोड़ें जहाँ आप चैट विंडो देखना चाहते हैं। 
    import 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">New Season Arrivals</h5>
                        </div>
                    </div>
                </div>
                <div id="odin-chatbot"></div>
            </div>
        );
    };
चैट बुलबुला
  1. public फ़ोल्डर में स्थित index.html फ़ाइल के <head> टैग के भीतर निम्नलिखित स्क्रिप्ट जोड़ें।
<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>
  1. यदि आपने पहले चैटबॉट को चैट विंडो के रूप में जोड़ा है, तो चैट विजेट का उपयोग करते समय निम्नलिखित <div> टैग को हटा दें। <div id="odin-chatbot"></div>

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

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

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

चैट विंडो

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

<script>
    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>
चैट बुलबुला

चैटबॉट को अपनी WordPress साइट में चैट बुलबुले के रूप में जोड़ने के लिए, आप WordPress एडिटर में Custom HTML ब्लॉक का उपयोग करके पेज में ऊपर उल्लिखित चैट विंडो स्क्रिप्ट जोड़ सकते हैं और फिर निम्नलिखित CSS स्क्रिप्ट जोड़ें:

.opbcb-chat-container {
    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;
}
जानकारी
यदि आप पेज के फ़ुटर में चैट बुलबुला जोड़ना चाहते हैं, तो आपको पहले फ़ुटर के Custom HTML ब्लॉक में CSS कोड के साथ स्क्रिप्ट जोड़ना होगा।