Multiple Users

Manage Multiple User Profiles

आपके संगठन, उपयोगकर्ताओं, क्लाइंट्स, या ब्रांड्स के लिए कई खाता प्रोफ़ाइल्स को बनाने और प्रबंधित करने के दो तरीके हैं - डैशबोर्ड या API के माध्यम से।

डैशबोर्ड केवल आपकी आंतरिक टीम के लिए है। Launch, Business, और Enterprise प्लान्स पर, डैशबोर्ड वह जगह है जहाँ आपकी टीम User Profiles बनाती और प्रबंधित करती है, परीक्षण करती है, और क्लाइंट की ओर से पोस्ट करती है। आपके ग्राहकों को कभी भी डैशबोर्ड एक्सेस नहीं दिया जाता है — वे अपने सोशल खातों को व्हाइट-लेबल किए गए JWT URL कनेक्ट पेज के माध्यम से कनेक्ट करते हैं। प्रोडक्शन में, API के साथ प्रोग्रामेटिक रूप से प्रोफ़ाइल्स बनाएँ और प्रबंधित करें। (सिंगल-यूज़र Premium प्लान अपवाद है: वहाँ कोई मल्टी-यूज़र लेयर नहीं है, इसलिए आप डैशबोर्ड का उपयोग सीधे स्वयं करते हैं।)

डैशबोर्ड का उपयोग करना

यदि आपके Ayrshare खाते को कई प्रोफ़ाइल्स प्रबंधित करने का अधिकार है, तो आपको बाएँ हाथ के नेविगेशन में User Profiles का विकल्प दिखाई देगा।

यदि आपके खाते में प्रोफ़ाइल्स प्रबंधित करने का विकल्प नहीं है, तो अपग्रेड करने के लिए अपने Ayrshare प्रतिनिधि से संपर्क करें या हमसे संपर्क करें।

एक नई प्रोफ़ाइल बनाएँ

Add Profile बटन पर क्लिक करें और अपना User Profile Title दर्ज करें।

नई प्रोफ़ाइल पर स्विच करें

आपको Active Profiles सेक्शन में नई प्रोफ़ाइल दिखाई देगी। अब आप उस User Profile पर स्विच करने के लिए switch to this profile आइकन पर क्लिक कर सकते हैं। जब आप एक भिन्न User Profile पर स्विच करते हैं, तो आपको वह प्रोफ़ाइल नाम प्रोफ़ाइल आइकन के नीचे स्क्रीन के ऊपरी बाईं ओर दिखाई देगा। आप हमेशा Primary Profile के बगल में switch profile लिंक पर क्लिक करके या User Profiles पेज के शीर्ष पर Switch to Primary बटन पर क्लिक करके अपनी प्राथमिक खाता प्रोफ़ाइल पर वापस स्विच कर सकते हैं। यहाँ से आप अपने क्लाइंट/उपयोगकर्ता के रूप में कार्य कर रहे हैं और Post पेज पर जाकर उनकी ओर से पोस्ट कर सकते हैं।

Profile Key प्राप्त करें

Profile Key का उपयोग API के साथ प्रोफ़ाइल की ओर से पोस्ट करने के लिए किया जाता है। एक User Profile पर स्विच करें और उस प्रोफ़ाइल की Key प्राप्त करने के लिए डैशबोर्ड के बाएँ हाथ के नेविगेशन में Profile Key page पर जाएँ। API कॉल करते समय, हेडर में अपनी API_KEY और PROFILE_KEY शामिल करना सुनिश्चित करें। जब आप /profiles/profile endpoint का उपयोग करके एक नई User Profile बनाते हैं तो आपको Profile Key भी प्राप्त होती है। यह Profile Key प्राप्त करने का पसंदीदा तरीका है।

किसी टीम सदस्य को आमंत्रित करें

आप अपनी टीम के सदस्यों के लिए User Profiles बना सकते हैं। डिफ़ॉल्ट रूप से, Team Members के पास डैशबोर्ड तक पूर्ण एक्सेस/एडमिन अधिकारों वाला Ayrshare खाता होता है और वे एक नई User Profile के रूप में गिने जाते हैं। कृपया ध्यान दें, आप Primary Profile को लॉक करके एक्सेस को प्रतिबंधित कर सकते हैं।

आप केवल उन टीम सदस्यों को आमंत्रित कर सकते हैं जो अभी तक Ayrshare के साथ पंजीकृत नहीं हुए हैं। यदि आप पहले से पंजीकृत ईमेल का उपयोग करना चाहते हैं, तो कृपया उपयोगकर्ता को डैशबोर्ड में लॉगिन करने के लिए कहें, Account पेज पर जाएँ, और Delete बटन पर क्लिक करें।

User Profiles पेज में, अपनी Primary Profile पर स्विच करें और पेज के शीर्ष पर + Add Profile बटन पर क्लिक करें। पॉप-अप मोडल में, “Create a team member profiles with admin rights” चेकबॉक्स पर क्लिक करें और अपने टीम सदस्य का ईमेल पता दर्ज करें। Add Team Profile पर क्लिक करें और टीम सदस्य के ईमेल पते पर उनके खाते को सक्रिय करने के लिए लिंक के साथ एक ईमेल भेजा जाता है।

टीम सदस्य की स्थिति

जब टीम सदस्य ने आमंत्रण स्वीकार कर लिया है तो आपको Team Member टैग के बगल में एक हरा चेक मार्क दिखाई देगा। यदि टीम सदस्य ने अभी तक आमंत्रण स्वीकार नहीं किया है तो आप मेल आइकन पर क्लिक करके इसे पुनः भेज सकते हैं।

टीम सदस्य सहायता से संपर्क करना

सुरक्षा के लिए, केवल पंजीकृत टीम सदस्य ही किसी व्यवसाय की ओर से सहायता से संपर्क कर सकते हैं। यदि वे आपके व्यवसाय के टीम सदस्य के रूप में पंजीकृत और सत्यापित नहीं हैं तो हम सहायता करने में सक्षम नहीं होंगे।

किसी निलंबित User Profile को पुनः सक्रिय करें

निलंबन का कारण

जब किसी User Profile को सोशल नेटवर्क उल्लंघन (जैसे Facebook community standards violation) के कारण निलंबित किया जाता है, तो आपको एक विस्तृत अधिसूचना ईमेल प्राप्त होगा। इस ईमेल में निलंबन के बारे में महत्वपूर्ण जानकारी होती है, जिसमें विशिष्ट कारण और प्रभावित User Profile शामिल है। इस अधिसूचना ईमेल को खोजने के लिए:

निलंबित User Profile के RefId का उपयोग करके अपना इनबॉक्स खोजें
ईमेल का विषय स्पष्ट रूप से इंगित करेगा कि एक निलंबन हुआ है

वैकल्पिक रूप से, आप प्रभावित User Profile के बगल में दिखाई देने वाले “Suspended” टैग पर क्लिक करके सीधे डैशबोर्ड में निलंबन विवरण देख सकते हैं। उस User Profile के लिए सभी API कॉल्स 403 HTTP स्टेटस कोड लौटाएँगी।

किसी निलंबित User Profile को पुनः सक्रिय करें

आप User Profile को पुनः सक्रिय, यानी निलंबन हटा सकते हैं, इसके द्वारा:

Dashboard में लॉग इन करके User Profiles पेज पर जाएँ।
“Suspended” टैब पर क्लिक करके या ईमेल में शामिल User Profile के RefId से खोज कर निलंबित User Profiles ढूँढें।
“Unsuspended” बटन पर क्लिक करके User Profile का निलंबन हटाएँ।
अनुपालन प्रमाणन की समीक्षा करें और स्वीकार करें।

किसी User Profile के पहले निलंबन के लिए, अनुपालन प्रमाणन स्वीकार करते ही User Profile का निलंबन तुरंत हटाया जा सकता है। हालाँकि, बाद के निलंबनों के लिए User Profile को अनुपालन प्रमाणन स्वीकार करने के 48 घंटे बाद पुनः बहाल किया जाएगा।

हम अनुशंसा करते हैं कि आप अपनी Primary Profile को नियमित User Profile के रूप में उपयोग न करें। यदि Primary Profile निलंबित हो जाती है, तो सभी उपयोगकर्ता प्रोफ़ाइल्स भी निलंबित हो जाएँगी।

सक्रिय User Profiles का प्रबंधन

Ayrshare में एक कुशल प्रणाली बनाए रखने के लिए User Profiles का प्रभावी प्रबंधन आवश्यक है। हम अनुशंसा करते हैं कि आप अपनी व्यावसायिक आवश्यकताओं के आधार पर निष्क्रिय User Profiles को हटाने की एक नीति लागू करें। उदाहरण के लिए, यदि किसी उपयोगकर्ता ने कुछ समय अवधि तक सामग्री पोस्ट करके, एनालिटिक्स का अनुरोध करके आपके प्लेटफ़ॉर्म के साथ जुड़ाव नहीं किया है, या किसी सोशल नेटवर्क को कनेक्ट नहीं किया है, तो उनकी Ayrshare User Profile को डिलीट करने पर विचार करें, इस प्रकार अपने उपयोगकर्ता आधार को वर्तमान रखते हुए भविष्य की लागतों को कम करें। आप उनके पोस्टिंग इतिहास और API उपयोग और कनेक्शन की समीक्षा करके जाँच सकते हैं कि क्या कोई User Profile वर्तमान महीने में सक्रिय रही है। यदि आप इसे निष्क्रिय निर्धारित करते हैं, तो User Profile को डिलीट करें।

Connect Accounts पेज को व्हाइट-लेबल करें

Connect accounts (सोशल लिंकिंग) पेज एकमात्र Ayrshare इंटरफ़ेस है जिसे आपके ग्राहक कभी देखते हैं, इसलिए आप इसे अपने ब्रांड से मेल खाने के लिए व्हाइट-लेबल कर सकते हैं। नीचे दी गई सेटिंग्स को आपकी टीम द्वारा Primary Profile से एक बार कॉन्फ़िगर किया जाता है और उस पेज पर लागू होती हैं जिसे आपके उपयोगकर्ता JWT URL के माध्यम से खोलते हैं। Launch, Business, और Enterprise प्लान्स पर उपलब्ध:

अपना कंपनी लोगो जोड़ें या हटाएँ और उसकी ऊँचाई सेट करें।
चुनें कि कौन से सोशल नेटवर्क्स आपके उपयोगकर्ता कनेक्ट कर सकते हैं।
पेज की भाषा सेट करें।
अपने स्वयं के सहायता लिंक दिखाएँ या Ayrshare के छिपाएँ।
प्रत्येक User Profile के लिए शीर्ष और उप-हेडर सेट करें (जैसे क्लाइंट का नाम या व्यवसाय)।
Close बटन के रीडायरेक्ट को नियंत्रित करें अपने ऐप पर वापस।
Instagram और Telegram मोडल्स को अनुकूलित करें अपने स्वयं के HTML के साथ।

Max Pack के साथ उपलब्ध (और Enterprise के साथ शामिल):

एक कस्टम CSS फ़ाइल लागू करें रंगों, फ़ॉन्ट्स, और यह नियंत्रित करने के लिए कि कौन सी सुविधाएँ दिखाई देती हैं, documented class hooks का उपयोग करके connect बटन को स्वयं restyle करने के लिए।
लिंकिंग डायलॉग्स को रंगें — page pickers, credential forms, और confirmations — ताकि वे आपके पेज से मेल खाएँ।
अपना स्वयं का पेज शीर्षक, Close बटन टेक्स्ट, और favicon सेट करें।
कस्टम फ़ूटर टेक्स्ट या HTML जोड़ें।

यह आपके उपयोगकर्ता के दृष्टिकोण से कैसा दिखता है, यह देखने के लिए User Integration पेज देखें।

सेटिंग्स

User Profiles पेज में अपनी प्रोफ़ाइल्स के लिए वैश्विक सेटिंग्स तक पहुँचने के लिए “⚙️ Settings” बटन का चयन करें। सेटिंग्स तक पहुँचने के लिए पहले अपनी Primary Profile पर स्विच करना सुनिश्चित करें।

लिंकिंग पेज अनुकूलन विकल्पों का वीडियो डेमो

User Profile एक्सेस को प्रतिबंधित करें

Primary Profile एक्सेस को प्रतिबंधित करें

Primary Profile को लॉक करके उपयोगकर्ता और टीम सदस्य प्रोफ़ाइल्स से Primary Profile तक पहुँच को प्रतिबंधित करें। यदि आप टीम सदस्यों या उपयोगकर्ता प्रोफ़ाइल्स को Profile Settings या Account/Billing पेज तक पहुँचने से रोकना चाहते हैं तो Primary Profile lock सक्रिय करें। जब सक्रिय होता है, तो टीम सदस्य और उपयोगकर्ता प्रोफ़ाइल्स Primary Profile पर स्विच नहीं कर पाएँगी, लेकिन अन्य टीम सदस्य या उपयोगकर्ता प्रोफ़ाइल्स पर स्विच कर सकती हैं।

टीम सदस्य एक्सेस को प्रतिबंधित करें

टीम सदस्य प्रोफ़ाइल्स को उनके खाते को लॉक करके एक्सेस से प्रतिबंधित करें। यह टीम सदस्य को किसी भी अन्य User Profile पर स्विच करने से रोकता है। टीम सदस्य प्रोफ़ाइल के ऊपरी दाईं ओर या आइकन पर क्लिक करके लॉक सक्षम करें। आप प्रोफ़ाइल बनाते समय भी टीम सदस्य को लॉक कर सकते हैं।

सोशल लिंकिंग पेज पर लोगो अपडेट करें

अपना स्वयं का लोगो जोड़ें और सोशल लिंकिंग पेज के लिए लोगो की ऊँचाई सेट करें। व्यक्तिगत User Profiles Create Profile और Update Profile पर hideLogo पैरामीटर के माध्यम से अपने स्वयं के लिंकिंग पेज पर इस लोगो को दबा सकती हैं। हर अन्य प्रोफ़ाइल पर खाता-व्यापी लोगो अप्रभावित रहता है। यह तब उपयोगी होता है जब कोई एजेंसी अपनी बाकी प्रोफ़ाइल्स पर ब्रांडिंग रखते हुए एक पार्टनर को व्हाइट-लेबल करती है।

सोशल नेटवर्क्स एक्सेस सेट करें

अपने उपयोगकर्ताओं/प्रोफ़ाइल्स से उपलब्ध सोशल नेटवर्क्स तक पहुँच हटाएँ या प्रदान करें। डिफ़ॉल्ट रूप से सभी सोशल नेटवर्क्स सक्रिय और उपलब्ध हैं।

अनुमतियाँ आपकी सभी उपयोगकर्ता प्रोफ़ाइल्स में वैश्विक हैं। अक्षम करने से केवल आपके उपयोगकर्ता के Social Accounts व्यू से नेटवर्क हटता है और स्थापित लिंक नहीं हटाए जाते।

User Profile स्तर पर सोशल नेटवर्क्स को अक्षम करने के बारे में अधिक जानकारी के लिए create a profile एंडपॉइंट देखें।

सोशल लिंकिंग के लिए भाषा सेट करें

सोशल लिंकिंग पेज के लिए भाषा सेट करें। डिफ़ॉल्ट अंग्रेज़ी है। उपलब्ध भाषाएँ हैं:

English
Arabic
Chinese (Simplified)
French
German
Italian
Japanese
Portuguese
Spanish

यदि आपको कोई ऐसी भाषा चाहिए जो सूचीबद्ध नहीं है, तो कृपया हमसे संपर्क करें। अतिरिक्त अनुवाद विकल्पों के लिए यहाँ देखें:

पेज लोकेशन प्रदर्शित करें

सोशल लिंकिंग पेज पर, यदि किसी Meta (Facebook या Instagram) या Google Business Profile Page के साथ कोई लोकेशन जुड़ी है, तो उस लोकेशन जानकारी को Page के नाम के साथ प्रदर्शित करें। यह अतिरिक्त लोकेशन संदर्भ उन परिदृश्यों में सहायक होता है जहाँ समान नामों वाले कई Pages होते हैं, क्योंकि यह उपयोगकर्ताओं को उनके बीच अधिक आसानी से अंतर करने की अनुमति देता है। Page लोकेशन, यदि उपलब्ध हो, सोशल लिंकिंग पेज में Page के नाम के नीचे प्रदर्शित की जाएगी:

सहायता लिंक दृश्यमान

अपने उपयोगकर्ताओं के सोशल लिंकिंग पेज पर Ayrshare सहायता दस्तावेज़ों के लिंक की दृश्यता को सक्षम या अक्षम करें। आप अपने सार्वजनिक रूप से उपलब्ध दस्तावेज़ों के URL को दर्ज करके अपने स्वयं का भी उपयोग कर सकते हैं।

अलर्ट्स के लिए वैकल्पिक ईमेल्स

अलर्ट्स वितरित करने के लिए विभिन्न ईमेल पते चुनें, जैसे कि अनलिंक किए गए खाते। अधिक अनुकूलन, जैसे शीर्षक, /profiles endpoint के माध्यम से किया जा सकता है।

Instagram लॉगिन

सोशल लिंकिंग पेज पर Instagram लॉगिन को सक्षम या अक्षम करें। चुनें कि क्या डायरेक्ट Instagram लॉगिन लिंकिंग सक्षम करें जिसमें प्रमाणीकरण के लिए एक कनेक्ट किए गए Facebook Page की आवश्यकता नहीं है। यदि अक्षम है, तो Instagram लिंकिंग के लिए प्रमाणीकरण के लिए कनेक्ट किए गए Facebook Page की आवश्यकता होगी।

Instagram Login डिफ़ॉल्ट रूप से सक्षम है। यदि आपको नीचे सूचीबद्ध उन्नत सुविधाओं (हैशटैग खोज, सहयोग, लोकेशन टैगिंग, या ब्रांड डेटा) की आवश्यकता है, तो आपको Facebook Page प्रमाणीकरण का उपयोग करने के लिए इस विकल्प को मैन्युअल रूप से अक्षम करना होगा।

डायरेक्ट Instagram लॉगिन बनाम Facebook Page प्रमाणीकरण

डायरेक्ट Instagram लॉगिन Instagram Login के साथ Instagram API Instagram पेशेवरों (व्यवसायों और क्रिएटर्स) को एक संबद्ध Facebook Page की आवश्यकता के बिना अपने खातों को सीधे लिंक करने की अनुमति देता है। यह एक सरलीकृत प्रमाणीकरण फ़्लो प्रदान करता है। Facebook Page प्रमाणीकरण (पारंपरिक विधि) उपयोगकर्ताओं को पहले एक Facebook Page को कनेक्ट करने की आवश्यकता होती है जो उनके Instagram पेशेवर खाते से लिंक है।

डायरेक्ट Instagram लॉगिन के साथ फ़ीचर सीमाएँ

जबकि डायरेक्ट Instagram लॉगिन सुविधा प्रदान करता है, कुछ फ़ीचर्स इस विधि का उपयोग करते समय उपलब्ध नहीं हैं:

Brand/User Data - brand एंडपॉइंट्स के माध्यम से Instagram खाता जानकारी प्राप्त नहीं की जा सकती।
Hashtag Search - Instagram पर हैशटैग्स के लिए खोज नहीं की जा सकती।
Collaborations - Instagram पोस्ट्स पर सहयोगियों को आमंत्रित नहीं किया जा सकता।
Location Tagging - Instagram पोस्ट्स पर लोकेशन टैग नहीं जोड़े जा सकते।
idId- Legacy Instagram User ID - Instagram सोशल एनालिटिक्स के लिए फ़ील्ड नहीं लौटाई जाती।

आपको कौन सी विधि चुननी चाहिए?

डायरेक्ट Instagram लॉगिन सक्षम करें यदि आपको केवल बुनियादी पोस्टिंग कार्यक्षमता चाहिए और ऊपर सूचीबद्ध उन्नत सुविधाओं की आवश्यकता नहीं है।
डायरेक्ट Instagram लॉगिन अक्षम करें (Facebook Page प्रमाणीकरण का उपयोग करें) यदि आपको हैशटैग खोज, सहयोग, लोकेशन टैगिंग, या ब्रांड डेटा प्राप्ति सहित सभी Instagram सुविधाओं तक पहुँच चाहिए।

अधिकांश क्लाइंट्स के लिए, पसंदीदा विधि डायरेक्ट Instagram लॉगिन प्रमाणीकरण का उपयोग करना है। यदि आप अनिश्चित हैं कि कौन सी विधि का उपयोग करें, तो हम सभी सुविधाओं तक पहुँच सुनिश्चित करने के लिए Direct Instagram Login को अक्षम करने की अनुशंसा करते हैं। यदि आप निर्धारित करते हैं कि उन्नत सुविधाओं की आवश्यकता नहीं है, तो आप हमेशा इसे बाद में सक्षम कर सकते हैं।

कस्टम मोडल्स

आप सोशल लिंकिंग पेज पर Instagram और Telegram मोडल्स में दिखाई गई सामग्री को अपने स्वयं के कस्टम HTML से अनुकूलित कर सकते हैं, जैसे कि सामग्री को विभिन्न भाषाओं में प्रदर्शित करना। Telegram के लिए, आपकी सामग्री मोडल के डिफ़ॉल्ट निर्देशों की जगह लेती है। Instagram के लिए, मोडल केवल तभी दिखाई देता है जब आप कस्टम सामग्री प्रदान करते हैं — अन्यथा, Instagram पर क्लिक करने से सीधे कॉन्फ़िगर किया गया लॉगिन फ़्लो खुलता है: Instagram लॉगिन, या यदि Instagram Login अक्षम है, तो Facebook लॉगिन। आपकी कस्टम सामग्री में आपकी आवश्यकताओं के अनुरूप स्वरूपित टेक्स्ट, इमेज, या दोनों का संयोजन शामिल हो सकता है। उदाहरण के लिए, एंकर लिंक के साथ अपना कस्टम टेक्स्ट जोड़ें:

Custom HTML Modal

<div>
  <span class="underline">
    Everyone agrees that
    <a target="_blank" href="https://www.ayrshare.com">Ayrshare Rocks!</a>
  </span>
</div>

Your Custom CSS file

span.underline {
  color: blue;
  text-decoration: underline;
}
span.underline a {
  color: blue;
  text-decoration: none;
}

HTML को <div> टैग्स के भीतर संलग्न होना चाहिए।इसे क्लास नामों के साथ स्टाइल करें और नियमों को अपनी कस्टम CSS फ़ाइल में रखें। मोडल HTML के अंदर <style> ब्लॉक और style एट्रिब्यूट्स मोडल प्रदर्शित होने से पहले हटा दिए जाते हैं, इसलिए स्टाइलिंग आपकी CSS फ़ाइल से आनी चाहिए। <script> टैग्स और <link> टैग्स भी हटा दिए जाते हैं।

API का उपयोग करना

प्रोफ़ाइल्स बनाएँ और प्रबंधित करें

आप /profiles एंडपॉइंट्स का उपयोग करके API के माध्यम से अपनी प्रोफ़ाइल्स बना, डिलीट, और प्रबंधित कर सकते हैं। कृपया विवरण के लिए नीचे देखें।

Profile

Profile Key प्राप्त करें

जब आप /profile एंडपॉइंट का उपयोग करके API के माध्यम से एक नई प्रोफ़ाइल बनाते हैं तो Profile Key लौटाई जाती है। यदि आपको फिर से profile key प्राप्त करने की आवश्यकता है, तो पुनः प्राप्त करने के लिए Dashboard पर जाएँ। ऊपर देखें।

मैसेजिंग सक्षम करें

आप Account पेज में अपने Ayrshare खाते के लिए मैसेजिंग सक्षम कर सकते हैं। अधिक विवरण के लिए कृपया यहाँ देखें:

Messages

Max Pack अनुकूलन

Ayrshare Dashboard पेज User Profile -> Setting में, आप सोशल लिंकिंग पेज के पहलुओं को अनुकूलित कर सकते हैं। क्षमताओं और सुविधाओं के विवरण के लिए कृपया Max Pack देखें।

CSS अनुकूलित करें

सोशल खाता पेज के लुक और फ़ील को अनुकूलित करने के लिए अपनी स्वयं की CSS फ़ाइल का उपयोग करें: रंग, फ़ॉन्ट्स, सुविधाएँ छिपाएँ, बटन बदलें, और बहुत कुछ। एक CSS फ़ाइल पेज को light color scheme पर भी स्थिर कर देती है। जिस सोशल लिंकिंग पेज पर CSS फ़ाइल लगी हो, उस पर आपके उपयोगकर्ताओं को light/dark स्विच नहीं दिखाया जाता, इसलिए पेज कैसा दिखेगा यह केवल आपकी stylesheet ही तय करती है। जिन पेजों पर CSS फ़ाइल नहीं है, वे स्विच बनाए रखते हैं।

CSS Class Hooks

पेज पर stable class names मौजूद हैं ताकि आपकी stylesheet के पास select करने के लिए कुछ हो: पेज पर, उस grid पर जिसमें कार्ड लेआउट होते हैं, और प्रत्येक social network कार्ड पर। ये नाम एक contract हैं: इनके आधार पर लिखी गई stylesheet dashboard के releases के आर-पार काम करती रहती है, इसलिए आप इन पर सुरक्षित रूप से निर्माण कर सकते हैं।

अपनी स्वयं की stylesheet होस्ट करना Max Pack के साथ उपलब्ध है (और Enterprise में शामिल है)। इसके बिना Custom CSS फ़ील्ड read-only है। ये class names उस white-labeled सोशल लिंकिंग पेज पर लागू होते हैं जिसे आपके उपयोगकर्ता खोलते हैं, आपके अपने dashboard पर नहीं।

इस पेज पर जो भी सूचीबद्ध नहीं है, वह contract नहीं है। विशेष रूप से, पेज के अपने जनरेट किए गए class names को select न करें (वे बिना सूचना के बदल जाते हैं)। Updating an older stylesheet देखें। पेज elements

Selector	किस पर लागू होता है
`.main-content`	पेज कंटेंट wrapper, edge to edge — अपनी पेज background यहाँ रखें
`.social-linking-page-column`	उसके भीतर centred, width-capped column जिसमें कंटेंट बैठता है
`.social-linking-header`	header band जिसमें आपका logo, शीर्षक और निर्देश ब्लॉक होते हैं
`.company-logo`	आपका logo, जब आपने एक सेट किया हो
`.heading-social-accounts`	पेज शीर्षक, एक `<h1>` element
`.additional-info`	शीर्षक के नीचे निर्देश ब्लॉक
`.additional-info__body`	वही element जो `.additional-info` है; नीचे नोट देखें
`.additional-info-text`	उस ब्लॉक के भीतर निर्देश text
`.troubleshooting-guide`	”Having trouble?” link, जब help links चालू हों
`.close-button`	Close बटन जो लिंकिंग समाप्त करता है

.main-content और .social-linking-page-column अलग-अलग elements हैं, और यही अंतर आपको अपनी background को संकीर्ण किए बिना कंटेंट को चौड़ा करने देता है। column अधिकतम चौड़ाई कैरी करता है; wrapper पूरे पेज तक फैलता है। कार्ड को डिफ़ॉल्ट से चौड़ा चलाने के लिए, चौड़ाई column पर सेट करें:

.social-linking-page-column {
  max-width: none !important;
}

कार्ड लेआउट ये दोनों नए हैं, इसलिए कोई पुरानी stylesheet इन्हें select नहीं करती। दोनों containers हैं: वे बदलते हैं कि कार्ड कहाँ बैठते हैं और वे कितने चौड़े हैं, न कि कार्ड कैसा दिखता है। Change the Card Layout देखें।

Selector	किस पर लागू होता है
`.social-accounts-grid`	वह grid जो कार्ड को लेआउट करता है, और उनके बीच का `gap`
`.social-account-card-wrapper`	एक कार्ड को होल्ड करने वाला grid cell, वह element जो उस कार्ड की चौड़ाई का मालिक है

Social network कार्ड

Selector	किस पर लागू होता है
`.social-account-card`	प्रत्येक social network कार्ड, connected हो या न हो
`.connected-card`	एक कार्ड जिसका network connected है
`.unlinked-card`	एक कार्ड जिसका network अभी connected नहीं है
`.social-account-icon`	कार्ड पर network का logo रखने वाला square
`.social-account-name`	कार्ड पर network का नाम
`.social-account-avatar`	connected कार्ड पर connected खाते की profile picture
`.click-to-link`	unconnected कार्ड पर “Click to link” call-to-action text
`[data-platform="<network>"]`	किसी एक विशिष्ट network का कार्ड; नीचे देखें

प्रत्येक कार्ड में .social-account-card के साथ ठीक .connected-card या .unlinked-card में से एक होता है, इसलिए connected और unconnected states को स्वतंत्र रूप से style किया जा सकता है। .social-account-icon square है, उसके भीतर बना logo नहीं। किसी logo का आकार बदलने के लिए, दोनों का आकार सेट करें — केवल square का आकार सेट करने से logo अपने मूल आकार पर ही रहता है और overflow हो जाता है:

.social-account-icon {
  width: 24px !important;
  height: 24px !important;
}
.social-account-icon :is(svg, img) {
  width: 21px !important;
  height: 21px !important;
}

Status badge रंग connected कार्ड पर “Connected” और “Messaging” badges दो custom properties पढ़ते हैं। इन्हें badge से ऊपर कहीं भी सेट करें — .social-account-card स्वाभाविक जगह है — और उस कार्ड पर हर badge उसी का अनुसरण करता है:

Property	क्या सेट करता है
`--ayr-pill-bg`	badge background
`--ayr-pill-fg`	badge text और icon

.social-account-card {
  --ayr-pill-bg: #1b3a2b;
  --ayr-pill-fg: #79bd96;
}

यहाँ !important की ज़रूरत नहीं है, क्योंकि custom property किसी जनरेट किए गए rule से प्रतिस्पर्धा नहीं कर रही है। इन्हें unset छोड़ने पर डिफ़ॉल्ट रंग render होते हैं।

Warning badges — “Relink required”, “Reconnect”, “Identity check” — जानबूझकर इन properties को अनदेखा करते हैं और अपने खुद के रंग बनाए रखते हैं। ये आपके उपयोगकर्ता को बताते हैं कि किसी खाते ने काम करना बंद कर दिया है और उस पर ध्यान देने की ज़रूरत है, और “Connected” जैसे रंग में रंगी हुई चेतावनी आश्वस्त करने वाली पढ़ी जाती है। उन badges का अपना कोई selector इसी वजह से नहीं है।

Elements कैसे नेस्ट होते हैं एक कार्ड .main-content से पाँच स्तर नीचे होता है, और उनमें से एक स्तर का अपना कोई class name नहीं है:

<div class="main-content">
  <div class="social-linking-page-column">
    <div class="social-linking-header">
      <div><img class="company-logo" /></div>
      <div>
        <h1 class="heading-social-accounts">…</h1>
        <div class="additional-info additional-info__body">…</div>
      </div>
    </div>
    <div class="social-accounts-grid">
      <div class="social-account-card-wrapper">
        <div>
          <!-- unnamed clickable wrapper, always the full width of the cell -->
          <div class="social-account-card unlinked-card" data-platform="tiktok">
            <div>
              <div class="social-account-icon">…</div>
              <div>
                <p class="social-account-name">TikTok</p>
                <p class="click-to-link">…</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      …
    </div>
    <div><button class="close-button">…</button></div>
  </div>
</div>

ऊपर दिखाया गया कार्ड एक unconnected कार्ड है। एक connected कार्ड .unlinked-card के बजाय .connected-card कैरी करता है और अंतिम दो टुकड़ों को स्वैप कर देता है: .click-to-link की जगह status badges आ जाते हैं, और text column के बाद connected खाते की तस्वीर रखने वाला .social-account-avatar जुड़ जाता है। इसलिए .click-to-link और .social-account-avatar एक ही कार्ड पर कभी एक साथ नहीं दिखते। नामित elements को select करें, बीच वाले बिना नाम के elements को नहीं। unnamed स्तर contract का हिस्सा नहीं हैं और यही कारण है कि .main-content से स्तर गिनने वाला rule (.main-content > div, .main-content > div > div > div, .main-content > div:not(.additional-info)) grid या कार्ड पर नहीं, बल्कि अपने टारगेट से एक-दो स्तर दूर जा गिरता है। अगर आपकी stylesheet में इस आकार के rules हैं, तो Updating an older stylesheet देखें। कार्ड को स्वयं .social-account-card से style करें, और जब आप कार्ड नहीं बल्कि लेआउट बदलना चाहें, तो .social-accounts-grid या .social-account-card-wrapper का सहारा लें। Change the Card Layout देखें। पेज का क्रम बदलें पेज के पूरे ब्लॉक्स को इधर-उधर करने के लिए — उदाहरण के लिए निर्देश ब्लॉक को सबसे नीचे रखने के लिए — पेज column और उन टुकड़ों के बीच के containers को flatten करें जिन्हें आप order करना चाहते हैं, फिर उन्हें order करें:

.social-linking-page-column {
  display: flex !important;
  flex-direction: column !important;
}
.social-linking-header {
  display: contents !important;
}
/* Your logo, the instruction block and the Close button each sit inside a
   further wrapper that has no name of its own. Flatten those too, or `order`
   below has nothing to compare. */
.social-linking-header > div,
.social-linking-page-column > div:has(> .close-button) {
  display: contents !important;
}

.company-logo {
  order: 0 !important;
}
.social-accounts-grid {
  order: 1 !important;
}
.close-button {
  order: 2 !important;
}
.additional-info {
  order: 3 !important;
}

display: contents किसी container को layout से हटा देता है और उसके children को रखता है, यही आपके logo, grid और Close बटन को उसी स्तर पर लाता है ताकि order उन्हें compare कर सके। order केवल उन items पर लागू होता है जो किसी flex container के सीधे children हैं, इसलिए बीच के हर wrapper को flatten करना ज़रूरी है — बीच का rule यही करता है। शीर्षक और निर्देश ब्लॉक एक ही box साझा करते हैं, इसलिए वे साथ में चलते हैं; अगर आप केवल निर्देश ब्लॉक चाहते हैं तो .heading-social-accounts { display: none !important } से शीर्षक छिपा दें।

बीच वाले rule के दो selectors इस पेज पर वह एकमात्र जगह हैं जहाँ आपको अभी भी ऐसे element तक पहुँचना होता है जिसका कोई नाम नहीं है। वे एक स्तर ऊपर के नामित elements से anchored हैं, इसलिए .main-content से नीचे गिनने की तुलना में कहीं अधिक टिकाऊ हैं — लेकिन अगर कोई भावी release पेज के reorder होने का तरीका बदलता है, तो पहले इन्हीं rules की जाँच करें।

वे elements जो किसी setting पर निर्भर हैं (आपका logo, “Having trouble?” link, Close बटन) पेज में तभी मौजूद होते हैं जब वह setting चालू हो, इसलिए उनमें से किसी को टारगेट करने वाला rule तब तक बस निष्क्रिय रहता है।

प्रभावी होने के लिए आपके rules को !important की ज़रूरत है। पेज की अपनी styles एक सामान्य class selector की तुलना में उच्च specificity के साथ जनरेट होती हैं, इसलिए !important के बिना declaration चुपचाप अनदेखा कर दिया जाता है।

.click-to-link को restyle करें, इसे छिपाएँ नहीं। एक unconnected कार्ड पर यही एकमात्र चीज़ है जो आपके उपयोगकर्ता को बताती है कि network अभी connected नहीं है और यह कि कार्ड पर क्लिक किया जा सकता है। .click-to-link { display: none !important } जैसा एक rule कार्ड पर network नाम के अलावा कुछ नहीं छोड़ता, जो निष्क्रिय जैसा पढ़ा जाता है। अगर आप इसके बजाय अपने शब्द या badge चाहते हैं, तो text को छिपाकर कहीं और replacement पर निर्भर रहने के बजाय उसे कार्ड में .unlinked-card::after से जोड़ें।

.additional-info और .additional-info__body एक ही element से match करते हैं। ये पहले दो नेस्टेड elements थे, इसलिए अगर आपकी stylesheet दोनों पर एक ही property के लिए अलग-अलग values सेट करती है, तो अब वे एक ही element पर प्रतिस्पर्धा करते हैं और दोनों के लागू होने के बजाय अधिक specific rule जीतता है। इन्हें एक ही rule में मिलाएँ।

Linking Dialog Colors

लिंकिंग पेज पर मौजूद डायलॉग्स — unlink confirmation, Facebook और LinkedIn के page pickers, Bluesky और X के credential forms, और Telegram activation code box — दस custom properties पढ़ते हैं। जो आप सेट करना चाहते हैं वे सेट करें और बाकी को छोड़ दें; जो आप सेट नहीं करते वह अपना default बनाए रखता है। इन्हें :root या body पर सेट करें, .social-account-card पर नहीं। डायलॉग्स पेज कंटेंट के बाहर render होते हैं, इसलिए किसी कार्ड या .main-content पर सेट किया गया मान उन तक कभी नहीं पहुँचता। यह अब तक का सबसे आम कारण है कि कोई dialog rule कुछ भी नहीं करता प्रतीत होता है।

Property	क्या सेट करता है
`--ayr-dialog-backdrop`	डायलॉग के पीछे की overlay
`--ayr-dialog-bg`	डायलॉग पैनल का background
`--ayr-dialog-fg`	डायलॉग का शीर्षक, और Cancel / Close बटन का label — इसमें वह स्थिति भी शामिल है जब वह बटन disabled हो, जहाँ यही रंग कम strength पर उपयोग होता है
`--ayr-dialog-muted-fg`	Secondary text: उपशीर्षक, body copy, field labels, और placeholders — और किसी page picker में अचयनित radio buttons और checkboxes
`--ayr-dialog-border`	डायलॉग पैनल की border
`--ayr-dialog-radius`	डायलॉग पैनल का corner radius
`--ayr-dialog-accent`	किसी page picker में चयनित radio button या checkbox, और primary button (Submit / Yes)
`--ayr-dialog-link`	डायलॉग के text में मौजूद लिंक
`--ayr-dialog-input-bg`	Text field का background, और Telegram code box
`--ayr-dialog-input-fg`	field में टाइप किया गया text, और Telegram code और Copy बटन
`--ayr-dialog-input-border`	Text field का outline, और Telegram code box की border

हर property सेट किया हुआ एक पूरा dark उदाहरण:

:root {
  --ayr-dialog-backdrop: rgba(10, 10, 10, 0.66);
  --ayr-dialog-bg: #161616;
  --ayr-dialog-fg: #e7eae6;
  --ayr-dialog-muted-fg: #9aa0a6;
  --ayr-dialog-border: #262626;
  --ayr-dialog-radius: 22px;
  --ayr-dialog-accent: #79bd96;
  --ayr-dialog-input-bg: #0f0f0f;
  --ayr-dialog-input-fg: #e7eae6;
  --ayr-dialog-input-border: #3a3a3a;
}

!important की ज़रूरत नहीं है, क्योंकि custom property किसी जनरेट किए गए rule से प्रतिस्पर्धा नहीं कर रही है।

--ayr-dialog-fg और --ayr-dialog-muted-fg को अलग-अलग रखें। शीर्षक और secondary text डिफ़ॉल्ट रूप से अलग tones में होते हैं, और दोनों को एक ही मान पर सेट करने से hierarchy चपटी हो जाती है। अगर आप केवल एक ही सेट करते हैं, तो --ayr-dialog-fg सेट करें — एक darkened पैनल जिसका शीर्षक उसका अनुसरण न करे, heading को अपठनीय छोड़ सकता है।

आप --ayr-dialog-accent को जो भी सेट करें, primary button का label सफ़ेद ही रहता है। ऐसा accent चुनें जिस पर सफ़ेद text पढ़ा जा सके — एक हल्का accent label को पढ़ने में मुश्किल छोड़ देता है, और इसके लिए कोई अलग property नहीं है। उसके बगल का Cancel बटन इसके बजाय --ayr-dialog-fg का अनुसरण करता है।

अगर आप --ayr-dialog-bg को गहरा करते हैं, तो --ayr-dialog-fg, --ayr-dialog-muted-fg और --ayr-dialog-accent भी सेट करें। --ayr-dialog-bg केवल डायलॉग पैनल को ही repaint करता है — डैशबोर्ड अपनी light theme में ही रहता है, इसलिए जो कुछ भी अब तक किसी default रंग पर है वह ऐसा मान बनाए रखता है जो एक सफ़ेद पैनल के लिए चुना गया था। ऊपर की तीन properties page picker के radio buttons और disabled बटन के labels को वहन करती हैं, यही वे हिस्से हैं जिन्हें एक dark पैनल पढ़ने में सबसे मुश्किल छोड़ देता है। --ayr-dialog-muted-fg जहाँ संभव हो --ayr-dialog-fg पर fall back करती है, इसलिए केवल इन दोनों को सेट करना पठनीय controls पाने के लिए काफ़ी है। --ayr-dialog-link भी सेट करें: जब तक आप ऐसा नहीं करते तब तक लिंक अपना default रंग बनाए रखते हैं, क्योंकि वह default एक सफ़ेद पैनल के लिए चुना गया गहरा नीला है और उस पर वही सही रंग है। ऐसा tone उपयोग करें जो आपके पैनल पर पठनीय रहे, न कि --ayr-dialog-accent को दोबारा उपयोग करें — accent surfaces को paint करता है, एक चयनित radio button और primary button, जिन्हें text की तुलना में कम contrast के मानक पर रखा जाता है।

ये properties केवल रंग और radius वहन करती हैं। डायलॉग्स के पास कोई class hooks नहीं हैं, इसलिए एक stylesheet किसी पैनल, page list, या confirm और cancel बटन को छिपा नहीं सकती। डायलॉग वह जगह है जहाँ आपका उपयोगकर्ता चुनता है कि किस Facebook Page को लिंक करना है या किसी unlink की पुष्टि करता है, और उसका कोई हिस्सा छिपाना उन्हें बीच-मंझधार में बिना किसी रास्ते के छोड़ देगा।Primary action बटन --ayr-dialog-accent का अनुसरण करता है, और वही property उस तक पहुँचने का एकमात्र रास्ता है। इसकी surface एक gradient के रूप में paint की जाती है, इसलिए आपका अपना background-color rule उसके नीचे लागू होता है और अदृश्य रह जाता है — इसके बजाय property सेट करें।

Updating an Older Stylesheet

अगर आपने dashboard को दोबारा बनाए जाने से पहले अपनी stylesheet लिखी थी, तो हो सकता है कि कुछ rules अब match न करें। ऊपर documented selectors पर बने rules काम करते रहते हैं। बाकी किसी पर बने rules काम नहीं करते और उन्हें बहाल नहीं किया जा सकता:

पेज के अपने जनरेट किए गए class names। वे class names जो आपने browser developer tools से कॉपी किए होंगे (उदाहरण के लिए chakra- से शुरू होने वाला कुछ भी) उस framework के हैं जिससे पेज बना है, किसी सार्वजनिक contract के नहीं। वे class names अब मौजूद नहीं हैं और उनके बदले में कुछ भी नहीं है। rule को ऊपर तालिकाओं के selectors के अनुसार फिर से लिखें।
खाली element या attribute selectors जैसे div > div या button[type="button"]। पेज की संरचना contract नहीं है और बदल गई है, इसलिए .main-content से स्तर गिनने वाला rule अब पहले से अलग element पर जा गिरता है। यह लेआउट rule के कुछ न करने या अप्रत्याशित करने का सबसे आम कारण है।
कार्ड grid तक पहुँचने के लिए elements गिनने वाले positional rules। grid और cells के नाम होने से पहले, उन तक पहुँचने का एकमात्र तरीका .main-content से स्तर गिनना था, .main-content > div, .main-content > div > div, .main-content > div > div > div या .main-content > div:not(.additional-info) जैसे आकार के rules का उपयोग करके। वे rules अब भी कुछ न कुछ match करते हैं, यही कारण है कि उन्हें आसानी से भुला दिया जाता है: .main-content अभी भी है, लेकिन कार्ड अब उसके पाँच स्तर नीचे बैठता है, इसलिए प्रत्येक rule अपने टारगेट से एक-दो स्तर दूर जा गिरता है। grid पर लक्षित एक rule पेज header को होल्ड करने वाले wrapper पर जा सकता है, और एक कार्ड पर लक्षित rule एक साथ हर कार्ड का आकार बदल सकता है। इसके लिए अब मौजूद दो नामों से उन्हें बदलें: grid के लिए .social-accounts-grid, और एक कार्ड को होल्ड करने वाले cell के लिए .social-account-card-wrapper। Change the Card Layout देखें।
वे rules जो केवल किसी flex item पर काम करते हैं: z-index, order, align-self, flex। इन्हें पहचानना सबसे मुश्किल होता है, क्योंकि selector फिर भी match करता है और declaration फिर भी valid होती है — बस उसका कोई असर नहीं होता। पुराने पेज पर आपका logo, शीर्षक, निर्देश ब्लॉक और Close बटन .main-content के सीधे children थे, जिसे आपकी stylesheet ने एक flex container बना रखा था, इसलिए इनमें से हर एक एक flex item था। कोई flex item position के बिना भी z-index का पालन करता है, और order तथा align-self का भी पालन करता है। दोबारा बनाए गए पेज पर ये चारों wrappers के भीतर बैठते हैं, इसलिए वे अब flex items नहीं हैं और चारों properties उन पर लागू होना बंद कर देती हैं। लक्षण आमतौर पर कुछ हिलने के बजाय गायब होने का होता है। उदाहरण के लिए, आपके logo पर एक z-index वही था जो उसे .main-content::before से बने एक fixed header bar के ऊपर उठाकर रखता था — इसके बिना वह bar सीधे logo के ऊपर paint हो जाता है और logo पूरी तरह गायब लगने लगता है, जबकि वह ठीक से load हुआ है और सही आकार में है। दो उपाय, कोई भी ठीक है:
/* 1. Give the element a position, so z-index applies on its own. */ .company-logo { position: relative; z-index: 2; }
/* 2. Or flatten the wrappers, which makes these elements flex items again and restores z-index, order and align-self together. This is the same recipe as Change the order of the page, above. */ .social-linking-page-column { display: flex !important; flex-direction: column !important; } .social-linking-header { display: contents !important; } .social-linking-header > div, .social-linking-page-column > div:has(> .close-button) { display: contents !important; }
.linked-tag। पुराने पेज पर यह connected कार्ड के status badges पर होता था। यह जानबूझकर ऊपर के contract का हिस्सा नहीं है: एक connected कार्ड अब “Relink required” या “Identity check” भी दिखा सकता है, इसलिए .linked-tag को छिपाने वाला rule एक चेतावनी को छिपा देगा जिस पर आपके उपयोगकर्ता को कार्रवाई करनी होगी। अगर आपकी stylesheet .linked-tag को छिपाकर अपना खुद का replacement badge बनाती है, तो वह replacement दिखाई नहीं देगा। इसके बजाय .connected-card को स्वयं style करें, और status badges को दिखाई देने दें।

अगर आप निश्चित नहीं हैं कि आपकी stylesheet अभी भी काम करती है या नहीं, तो अपना लिंकिंग पेज खोलें और जाँचें कि प्रत्येक rule प्रभावी होता है। stylesheet दोनों तरह से load होती है, इसलिए वे rules जो अब match नहीं करते, error रिपोर्ट किए बिना चुपचाप विफल हो जाते हैं। अगर आप किसी को फिर से लिखने में मदद चाहते हैं तो सहायता से संपर्क करें।

Target a Single Network

:nth-child जैसे position-based selector के बजाय data-platform attribute का उपयोग करें। आपके उपयोगकर्ताओं के लिए उपलब्ध networks को प्रति खाता या प्रति User Profile filter किया जा सकता है, जो बदलता है कि कितने कार्ड render होते हैं और किस क्रम में। जब वह filter बदलता है तो position-based selectors टूट जाते हैं, और data-platform नहीं टूटता।

.social-account-card[data-platform="tiktok"] {
  /* ... */
}

value इस पेज पर network की key है: bluesky, facebook, gmb, instagramApi, linkedin, pinterest, reddit, snapchat, telegram, threads, tiktok, twitterByok, whatsapp, youtube

इनमें से दो उन platform names से अलग हैं जिन्हें आप API को भेजते हैं: इस पेज पर Instagram instagramApi है और X/Twitter twitterByok है।

Change the Card Layout

डिफ़ॉल्ट रूप से कार्ड एक responsive grid में बहते हैं: फोन पर एक कॉलम, tablet पर दो, और desktop पर तीन। दो selectors उस लेआउट को नियंत्रित करते हैं, और आपको कौन सा चाहिए यह इस पर निर्भर करता है कि आप क्या बदल रहे हैं:

.social-accounts-grid grid स्वयं है। यह एक flex row है जो wrap होता है, और कार्ड के बीच की जगह उसका gap है। इसका उपयोग उस spacing को बदलने के लिए, या लेआउट को पूरी तरह से बदलने के लिए करें।
.social-account-card-wrapper एक कार्ड को होल्ड करने वाला cell है। इसकी width वह है जो तय करती है कि प्रति row कितने कार्ड फिट होते हैं, और पेज उस चौड़ाई को प्रति screen size सेट करता है।

एक कार्ड की चौड़ाई, या प्रति row कार्ड की संख्या, को बदला जा सकने वाला cell एकमात्र element है। cell और कार्ड के बीच सब कुछ पहले से ही cell की पूरी चौड़ाई भरता है, इसलिए .social-account-card (या उनके बीच के unnamed wrapper) पर सेट की गई width कार्ड को उस cell के भीतर repaint करती है जो हिला नहीं है, और कॉलम बिल्कुल वहीं रह जाते हैं जहाँ थे। इनमें से कोई भी कार्ड नहीं है। एक कार्ड के border, background, या text को restyle करने के लिए, पहले की तरह .social-account-card का उपयोग करें। केवल कार्ड के बीच की जगह बदलने के लिए:

.social-accounts-grid {
  gap: 24px !important;
}

प्रत्येक कार्ड को अपनी full-width row पर रखने के लिए, एक rule हर screen size को कवर करता है, क्योंकि !important उन widths पर भी जीतता है जिन्हें पेज अपने screen-size rules में सेट करता है:

.social-account-card-wrapper {
  width: 100% !important;
}

अपनी खुद की column count सेट करने के लिए, grid को पूरी तरह से अपने हाथ में लें। cell चौड़ाई को भी छोड़ना होगा, अन्यथा वह उन columns से लड़ती है जिन्हें आपने अभी परिभाषित किया:

.social-accounts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.social-accounts-grid .social-account-card-wrapper {
  width: auto !important;
}

अगर आपने पेज को प्रतिबंधित एक या दो networks तक कर दिया है, तो row अपने columns को नहीं भरती, और पेज इसे आपके लिए center कर देता है। .social-accounts-grid पर यह एक width और एक max-width सेट करता है जो grid को उन कार्ड तक संकीर्ण कर देता है जो उसके पास वास्तव में हैं, और उस संकीर्ण box को center करने के लिए align-self: center, fallback के रूप में automatic side margins के साथ। प्रत्येक .social-account-card-wrapper पर यह तदनुसार व्यापक width सेट करता है, ताकि कार्ड वह आकार बनाए रखें जो उनके पास पूरी row में होता है। यह सब केवल उन screen sizes पर लागू होता है जहाँ row वास्तव में छोटी होती है। तीन या अधिक networks के साथ row हमेशा पूरी होती है और इनमें से कुछ भी सेट नहीं होता। आपके अपने rules किसी भी element को सामान्य रूप से !important के साथ override करते हैं, लेकिन ध्यान दें कि centering करने वाली declaration align-self है: एक छोटी row को अलग तरीके से align करने के लिए, widths के साथ-साथ उसे भी override करें।

ऐसे selectors से बचें जो elements गिनते हैं, जैसे .main-content > div > div > div। पेज की संरचना contract नहीं है और releases के बीच बदलती है, इसलिए ऐसा rule आपकी stylesheet बदले बिना एक अलग element, या एक साथ हर कार्ड, से match करना शुरू कर सकता है। ऊपर के दो selectors stable हैं और लेआउट तक पहुँचने का समर्थित तरीका हैं।

Example: Hide the Page Heading

heading एक <h1> element है, इसलिए अगर आप tag-qualified selector पसंद करते हैं तो वह भी काम करता है:

h1.heading-social-accounts {
  display: none !important;
}

Example: Restyle Unconnected Cards as Buttons

डिफ़ॉल्ट रूप से एक unconnected कार्ड धीमे text के साथ एक धँसी हुई ग्रे सतह होती है, जिसे कुछ उपयोगकर्ता क्लिक करने योग्य के बजाय अनुपलब्ध के रूप में पढ़ते हैं। नीचे के rules प्रत्येक unconnected कार्ड को आपके ब्रांड रंग में एक outlined बटन में बदल देते हैं और connected कार्ड को अछूता छोड़ देते हैं।

/* Unconnected cards become outlined buttons. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* An !important rule also wins over the page's own hover styles,
   so restate the hover state you want. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* The muted call to action becomes the button label. */
.social-account-card.unlinked-card .click-to-link {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

इसके बजाय solid fill के लिए, कार्ड background सेट करें और उसके text का रंग बदलें। केवल ऊपर तालिका के selectors ही contract हैं, इसलिए network नाम को एक सामान्य descendant selector से recolor करें:

.social-account-card.unlinked-card {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.social-account-card.unlinked-card p {
  color: #ffffff !important;
}

एक unconnected कार्ड पर network logo जानबूझकर desaturated है और उसका अपना कोई selector नहीं है, इसलिए यह रंगीन background पर greyscale बना रहता है। अपने उपयोगकर्ताओं को रोल आउट करने से पहले linking page पर अपनी stylesheet का preview करें।

पेज शीर्षक, Close बटन, और Favicon बदलें

अपना स्वयं का पेज शीर्षक, close बटन, और favicon (.ico फ़ाइल) सेट करें।

फ़ूटर टेक्स्ट

सोशल लिंकिंग पेज पर फ़ूटर टेक्स्ट को अनुकूलित करें और कॉपीराइट जानकारी जोड़ें। यह आपको फ़ूटर टेक्स्ट को विभिन्न भाषाओं में प्रदर्शित करने की अनुमति देता है।

Enterprise सुविधाएँ

Max Pack

Enterprise के साथ Max Pack की सभी सुविधाएँ शामिल हैं।

Facebook और Instagram Pages को स्वचालित रूप से पुनः सिंक करें

जब Facebook पर सुरक्षा घटनाएँ होती हैं, जैसे पासवर्ड परिवर्तन, तो उस उपयोगकर्ता खाते से जुड़े सभी Facebook pages (लिंक किए गए Instagram खातों सहित) को Ayrshare से पुनः कनेक्ट करने की आवश्यकता होती है। बहुत सारे pages प्रबंधित करने वाले खातों के लिए, यह प्रक्रिया समय लेने वाली हो सकती है।

Facebook या Instagram pages कनेक्ट करते समय “Resync” विकल्प उपलब्ध होता है।
इस सुविधा को सक्षम करके, पहले से कनेक्ट किए गए सभी pages स्वचालित रूप से उपयोगकर्ता प्रोफ़ाइल से पुनः लिंक हो जाएँगे।
नोट: केवल पहले से लिंक किए गए pages पुनः कनेक्ट होंगे; नए pages स्वचालित रूप से नहीं जोड़े जाएँगे।
यह सुविधा 400 pages तक के Facebook खातों को समर्थन देती है।
400 से अधिक pages वाले खातों के लिए, pages को कई Facebook खातों में वितरित करने की अनुशंसा की जाती है।
सर्वोत्तम अभ्यास: केवल आवश्यक होने पर ही सभी pages को पुनः कनेक्ट करने के लिए “Resync” विकल्प का उपयोग करें। नियमित संचालन के लिए, यह आमतौर पर आवश्यक नहीं है।

White List IP

विशिष्ट IP पते व्हाइटलिस्ट करके अपने खाते की सुरक्षा बढ़ाएँ। यह सुविधा API एक्सेस को केवल स्वीकृत IP पतों तक प्रतिबंधित करती है, जो आपके Ayrshare एकीकरण में सुरक्षा की एक अतिरिक्त परत जोड़ती है।

तकनीकी और सुरक्षा समीक्षाएँ

व्यापक तकनीकी और सुरक्षा समीक्षाओं के लिए Ayrshare की परियोजना टीम के साथ सीधे सहयोग करें। यह सेवा सुनिश्चित करती है कि आपका एकीकरण सर्वोत्तम प्रथाओं के साथ संरेखित हो और आपके संगठन की विशिष्ट सुरक्षा आवश्यकताओं को पूरा करता हो।

प्राथमिकता सहायता के साथ समर्पित खाता प्रबंधन

एक समर्पित खाता प्रबंधक से व्यक्तिगत सहायता प्राप्त करें जो आपकी अनूठी आवश्यकताओं को समझता है और अनुकूलित समाधान प्रदान कर सकता है। तकनीकी सहायता तक प्राथमिकता पहुँच का आनंद लें, महत्वपूर्ण मुद्दों के लिए तेज़ प्रतिक्रिया समय और एस्केलेशन प्रक्रियाओं के साथ।

कस्टम API एंडपॉइंट्स

विशिष्ट आवश्यकताओं वाले उद्यमों के लिए, Ayrshare आपके मौजूदा सिस्टम्स और वर्कफ़्लो के साथ सहजता से एकीकृत करने के लिए कस्टम API एंडपॉइंट्स विकसित कर सकता है।

​डैशबोर्ड का उपयोग करना

​एक नई प्रोफ़ाइल बनाएँ

​नई प्रोफ़ाइल पर स्विच करें

​Profile Key प्राप्त करें

​किसी टीम सदस्य को आमंत्रित करें

​टीम सदस्य की स्थिति

​टीम सदस्य सहायता से संपर्क करना

​किसी निलंबित User Profile को पुनः सक्रिय करें

​निलंबन का कारण

​किसी निलंबित User Profile को पुनः सक्रिय करें

​सक्रिय User Profiles का प्रबंधन

​Connect Accounts पेज को व्हाइट-लेबल करें

​सेटिंग्स

​लिंकिंग पेज अनुकूलन विकल्पों का वीडियो डेमो

​User Profile एक्सेस को प्रतिबंधित करें

​Primary Profile एक्सेस को प्रतिबंधित करें

​टीम सदस्य एक्सेस को प्रतिबंधित करें

​सोशल लिंकिंग पेज पर लोगो अपडेट करें

​सोशल नेटवर्क्स एक्सेस सेट करें

​सोशल लिंकिंग के लिए भाषा सेट करें

​पेज लोकेशन प्रदर्शित करें

​सहायता लिंक दृश्यमान

​अलर्ट्स के लिए वैकल्पिक ईमेल्स

​Instagram लॉगिन

​डायरेक्ट Instagram लॉगिन बनाम Facebook Page प्रमाणीकरण

​डायरेक्ट Instagram लॉगिन के साथ फ़ीचर सीमाएँ

​आपको कौन सी विधि चुननी चाहिए?

​कस्टम मोडल्स

​API का उपयोग करना

​प्रोफ़ाइल्स बनाएँ और प्रबंधित करें

Profile

​Profile Key प्राप्त करें

​मैसेजिंग सक्षम करें

Messages

​Max Pack अनुकूलन

​CSS अनुकूलित करें

​CSS Class Hooks

​Linking Dialog Colors

​Updating an Older Stylesheet

​Target a Single Network

​Change the Card Layout

​Example: Hide the Page Heading

​Example: Restyle Unconnected Cards as Buttons

​पेज शीर्षक, Close बटन, और Favicon बदलें

​फ़ूटर टेक्स्ट

​Enterprise सुविधाएँ

​Max Pack

​Facebook और Instagram Pages को स्वचालित रूप से पुनः सिंक करें

​White List IP

​तकनीकी और सुरक्षा समीक्षाएँ

​प्राथमिकता सहायता के साथ समर्पित खाता प्रबंधन

​कस्टम API एंडपॉइंट्स

डैशबोर्ड का उपयोग करना

एक नई प्रोफ़ाइल बनाएँ

नई प्रोफ़ाइल पर स्विच करें

Profile Key प्राप्त करें

किसी टीम सदस्य को आमंत्रित करें

टीम सदस्य की स्थिति

टीम सदस्य सहायता से संपर्क करना

किसी निलंबित User Profile को पुनः सक्रिय करें

निलंबन का कारण

किसी निलंबित User Profile को पुनः सक्रिय करें

सक्रिय User Profiles का प्रबंधन

Connect Accounts पेज को व्हाइट-लेबल करें

सेटिंग्स

लिंकिंग पेज अनुकूलन विकल्पों का वीडियो डेमो

User Profile एक्सेस को प्रतिबंधित करें

Primary Profile एक्सेस को प्रतिबंधित करें

टीम सदस्य एक्सेस को प्रतिबंधित करें

सोशल लिंकिंग पेज पर लोगो अपडेट करें

सोशल नेटवर्क्स एक्सेस सेट करें

सोशल लिंकिंग के लिए भाषा सेट करें

पेज लोकेशन प्रदर्शित करें

सहायता लिंक दृश्यमान

अलर्ट्स के लिए वैकल्पिक ईमेल्स

Instagram लॉगिन

डायरेक्ट Instagram लॉगिन बनाम Facebook Page प्रमाणीकरण

डायरेक्ट Instagram लॉगिन के साथ फ़ीचर सीमाएँ

आपको कौन सी विधि चुननी चाहिए?

कस्टम मोडल्स

API का उपयोग करना

प्रोफ़ाइल्स बनाएँ और प्रबंधित करें

Profile Key प्राप्त करें

मैसेजिंग सक्षम करें

Max Pack अनुकूलन

CSS अनुकूलित करें

CSS Class Hooks

Linking Dialog Colors

Updating an Older Stylesheet

Target a Single Network

Change the Card Layout

Example: Hide the Page Heading

Example: Restyle Unconnected Cards as Buttons

पेज शीर्षक, Close बटन, और Favicon बदलें

फ़ूटर टेक्स्ट

Enterprise सुविधाएँ

Max Pack

Facebook और Instagram Pages को स्वचालित रूप से पुनः सिंक करें

White List IP

तकनीकी और सुरक्षा समीक्षाएँ

प्राथमिकता सहायता के साथ समर्पित खाता प्रबंधन

कस्टम API एंडपॉइंट्स