डैशबोर्ड पर वापस जाएं

दस्तावेज़ीकरण

Asyntai का उपयोग करना सीखें

कस्टम ओपन बटन

चैट विजेट खोलने के लिए अपनी साइट पर कहीं भी एक बटन या लिंक जोड़ें

डिफ़ॉल्ट रूप से, विज़िटर आपके पेज के कोने में फ्लोटिंग चैट आइकन पर क्लिक करके चैट खोलते हैं। लेकिन आप अपना स्वयं का कस्टम बटन या लिंक भी जोड़ सकते हैं — अपने नेविगेशन बार, हीरो अनुभाग, CTA क्षेत्र, या कहीं भी — जो क्लिक करने पर चैट विजेट खोलता है।

सुझाव: यह आपकी साइट के नेविगेशन बार में "हमसे चैट करें" लिंक, उत्पाद पेज पर "सहायता प्राप्त करें" बटन, या एक CTA जोड़ने के लिए बेहतरीन है जो सीधे चैट खोलता है।

यह कैसे काम करता है

एक बार जब Asyntai विजेट स्क्रिप्ट आपके पेज पर इंस्टॉल हो जाती है, तो यह window.AsyntaiWidget पर एक वैश्विक JavaScript API उजागर करती है। आप चैट विजेट को प्रोग्रामेटिक रूप से नियंत्रित करने के लिए इसकी विधियों को कॉल कर सकते हैं।

उपलब्ध विधियाँ

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

बुनियादी उदाहरण

अपने HTML में कहीं भी एक बटन जोड़ें और एक क्लिक हैंडलर संलग्न करें जो window.AsyntaiWidget.open() को कॉल करता है:

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

बस इतना ही। जब कोई विज़िटर बटन पर क्लिक करता है, तो चैट विजेट खुल जाएगा।

नेविगेशन बार उदाहरण

अपनी साइट के नेविगेशन में "हमसे चैट करें" लिंक जोड़ें:

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

नोट: क्लिक करने पर पेज को शीर्ष पर स्क्रॉल होने से रोकने के लिए एंकर लिंक पर event.preventDefault() का उपयोग करें।

स्टाइल्ड बटन उदाहरण

कस्टम स्टाइलिंग के साथ एक अधिक प्रमुख CTA बटन बनाएं:

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

टॉगल बटन उदाहरण

यदि आप एक ही बटन चाहते हैं जो चैट खोले और बंद करे:

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

जांचना कि विजेट तैयार है या नहीं

विजेट एसिंक्रोनस रूप से लोड होता है, इसलिए यदि विजेट लोडिंग पूरी होने से पहले आपका बटन क्लिक किया जा सकता है, तो आपको पहले initialized प्रॉपर्टी जांचनी चाहिए:

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

सुझाव: अधिकांश पेजों पर, विजेट एक सेकंड के भीतर इनिशियलाइज़ हो जाता है। initialized जांच केवल तभी आवश्यक है जब आपका बटन पेज पर बहुत जल्दी दिखाई देता है (उदा., तेज़-लोडिंग साइट पर फोल्ड के ऊपर)।

डिफ़ॉल्ट चैट आइकन छुपाना

यदि आप फ्लोटिंग चैट आइकन को पूरी तरह से अपने कस्टम बटन से बदलना चाहते हैं, तो आप इसे CSS से छुपा सकते हैं:

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

चेतावनी: यदि आप डिफ़ॉल्ट चैट आइकन छुपाते हैं, तो सुनिश्चित करें कि आपका कस्टम बटन हर पेज पर स्पष्ट रूप से दिखाई दे। अन्यथा विज़िटर्स को पता नहीं चलेगा कि चैट उपलब्ध है।

पूर्ण API संदर्भ

विधि विवरण
AsyntaiWidget.open() चैट विजेट खोलता है
AsyntaiWidget.close() चैट विजेट बंद करता है
AsyntaiWidget.toggle() चैट खोलता या बंद करता है
AsyntaiWidget.initialized Boolean — true जब विजेट तैयार होता है