Squarespace में एनिमेटेड मैस्कॉट कैसे जोड़ें

क्या Squarespace, Rive या Lottie एनिमेशन सपोर्ट करता है?

सीधे तौर पर नहीं। Squarespace के help center में Archive और Audio से लेकर Video और Zola तक 37 तरह के ब्लॉक हैं, और इनमें से कोई भी Rive या Lottie फ़ाइल नहीं चलाता। Squarespace की block animation settings पूरे ब्लॉक पर लागू होती हैं, एनिमेशन फ़ाइल के अंदर की चीज़ों पर नहीं।

इसलिए तीन व्यावहारिक तरीके बचते हैं:

ऐसे कैरेक्टर के लिए जो आने पर हाथ हिलाए और sign-up के बाद जश्न मनाए, आपको Code Block चाहिए। लूपिंग हीरो के लिए वीडियो आसान है।

किस Squarespace प्लान पर JavaScript चलाई जा सकती है?

Squarespace के Code Block लेख के अनुसार JavaScript या iframe जोड़ने के लिए साइट Core, Plus या Advanced प्लान पर होनी चाहिए। Code Injection, जो साइट के header, footer या किसी एक पेज के header में कोड जोड़ता है, Core, Plus, Advanced और कुछ पुराने बिलिंग प्लान पर उपलब्ध है।

Basic पर आप वह JavaScript नहीं जोड़ सकते जो Rive को शुरू करती है, इसलिए Code Block वाला तरीका संभव नहीं है; नीचे दिया गया वीडियो या GIF वाला तरीका अपनाएँ। Checkout पेज किसी भी प्लान पर custom कोड स्वीकार नहीं करते।

अगर आपको पक्का नहीं पता कि साइट किस प्लान पर है, तो embed बनाने से पहले उसका billing panel देखें। सिर्फ़ मैस्कॉट के लिए Basic से Core पर जाने में असल में पैसे लगते हैं, इसलिए इसकी तुलना नीचे दिए गए वीडियो वाले तरीके से करें।

Code Block से Rive मैस्कॉट कैसे जोड़ें?

1. पेज एडिट करें, किसी section पर hover करें, Add block (या +) पर क्लिक करें और Code चुनें।
2. ब्लॉक पर pencil आइकन पर क्लिक करें।
3. मोड को HTML पर सेट करें और Display Source बंद रखें, वरना कोड टेक्स्ट की तरह दिखेगा।
4. अपने .riv URL के साथ snippet पेस्ट करें।

<div style="width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const canvas = document.getElementById("mascot");
  const mascot = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas,
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => mascot.resizeDrawingSurfaceToCanvas(),
  });
  // Play the yes reaction when someone clicks the character.
  canvas.addEventListener("click", () => {
    mascot.viewModelInstance?.trigger("yes")?.trigger();
  });
</script>

रनटाइम का version pinned है, इसलिए कोई नया release बिना बताए आपकी साइट नहीं बदल सकता, और अगर विज़िटर ने मोशन कम करें चुना है तो snippet ऑटोप्ले नहीं करता। Code Blocks की सीमा 400 KB है, जो काफ़ी है, क्योंकि रनटाइम और .riv अपने-अपने URL से लोड होते हैं।

Squarespace बताता है कि लॉग इन रहने पर कभी-कभी कोड नहीं दिखता, जबकि विज़िटर उसे देखते हैं। प्रकाशित साइट को private window में जाँचें, या Preview in Safe Mode पर क्लिक करें। अगर कोई script कभी editor को रोक दे, तो Squarespace आपको प्रीव्यू में scripts बंद करके ब्लॉक एडिट करने देता है।

एक ही मैस्कॉट को कई पेजों पर इस्तेमाल करने के लिए आप रनटाइम की <script src> लाइन को Code Injection से साइट-व्यापी Header में ले जा सकते हैं और हर Code Block में सिर्फ़ canvas और start-up script रख सकते हैं। footer नहीं, header इस्तेमाल करें: footer आपके Code Blocks के बाद लोड होता है, इसलिए start-up script rive मौजूद होने से पहले ही चल जाएगी।

.riv फ़ाइल कहाँ रखनी चाहिए?

ऐसे host पर जो CORS headers भेजता हो। Rive का रनटाइम आपके पेज से network request के ज़रिए .riv डाउनलोड करता है, और जब वह फ़ाइल किसी दूसरे domain पर हो, तो browser उसे तभी देता है जब response में आपकी साइट के लिए (या *) Access-Control-Allow-Origin हो। इसके बिना console में CORS error दिखता है और canvas खाली रहता है।

हम इसकी पुष्टि नहीं कर सके कि Squarespace के link editor से अपलोड की गई फ़ाइलें CORS headers के साथ मिलती हैं या .riv extension स्वीकार करती हैं, इसलिए हम उन पर निर्भर रहने की सलाह नहीं देते। ये विकल्प काम करते हैं:

• GitHub Pages: इसके responses में access-control-allow-origin: * होता है (हमने अक्टूबर 2026 में जाँचा)। .riv को Pages चालू किए हुए किसी public repository में commit करें।
• Cloudflare R2 या कोई दूसरा object store: एक CORS policy जोड़ें जो आपके Squarespace domain से GET की अनुमति दे।
• कोई भी CDN जो आपको response headers सेट करने दे।

पेस्ट करने से पहले जाँच करें, दोनों URL बदलकर:

curl -sI -H "Origin: https://www.yoursite.com" \
  https://YOUR-CDN.example.com/mascot.riv | grep -i access-control

अगर इससे access-control-allow-origin वाली ऐसी लाइन आती है जो आपकी साइट या * से मेल खाती है, तो browser फ़ाइल लोड कर लेगा।

मैस्कॉट को buttons और forms पर रिएक्ट कैसे कराएँ?

Code Block का HTML पेज का ही हिस्सा होता है, iframe नहीं, इसलिए उसकी script बाकी पेज के इवेंट सुन सकती है। ऊपर वाला snippet पहले से ही किसी के कैरेक्टर पर क्लिक करने पर yes रिएक्शन फ़ायर करता है। फ़ॉर्म submit होने के बाद जश्न मनाने के लिए submit इवेंट का listener जोड़ें, जो किसी भी फ़ॉर्म से ऊपर bubble होता है:

<script>
  // Add below the snippet above: celebrate when any form on the page is submitted.
  document.addEventListener("submit", () => {
    mascot.viewModelInstance?.trigger("success")?.trigger();
  });
</script>

मूड के लिए भी यही तरीका अपनाएँ: कुछ लोड होते समय mascot.viewModelInstance.number("mood").value को 3 (thinking) पर सेट करें, या खाली पेज पर 8 (sleeping) पर। हर बदलाव के बाद प्रकाशित साइट पर टेस्ट करें, क्योंकि लॉग इन रहने पर editor शायद आपका कोड न चलाए।

Squarespace Basic प्लान पर क्या काम करता है?

वीडियो और GIF, बिना कोड के:

• Video Block: 30 मिनट तक की वीडियो फ़ाइल अपलोड करें। Squarespace के अनुसार Autoplay से पहले Mute चालू करना ज़रूरी है, और Loop इसे अंत में फिर से शुरू करता है। player controls को None पर सेट करें ताकि यह player नहीं, एनिमेशन जैसा लगे। ऑटोप्ले होने वाले वीडियो में custom thumbnail शायद न दिखे।
• Animated GIF: इसे कहीं भी अपलोड करें जहाँ आप इमेज जोड़ सकते हैं, जैसे Image Block या लोगो। Squarespace चेतावनी देता है कि उसके image editor में GIF एडिट करने या image effects जोड़ने से वह static JPG में बदल जाता है, और बड़े GIF साइट को धीमा करते हैं, इसलिए पहले इसे उसके display साइज़ के हिसाब से छोटा करें।

इनमें से कोई भी तरीका Rive canvas की तरह ट्रांसपेरेंट नहीं है। MP4 का बैकग्राउंड ठोस होता है, और GIF में ज़्यादा से ज़्यादा कठोर किनारों वाली transparency होती है। क्लिप के बैकग्राउंड का रंग उस section से मिलाएँ जिसमें वह है। असली ट्रांसपेरेंट वीडियो (VP9 WebM और Safari के लिए HEVC MOV) के लिए Code Block में <video> टैग चाहिए, इसलिए फिर से Core या उससे ऊपर का प्लान चाहिए; देखें वेबसाइट पर ट्रांसपेरेंट वीडियो।

Squarespace के लिए कौन-सी मैस्कॉट फ़ाइलें तैयार करूँ?

यह प्लान पर निर्भर करता है। Basic पर आपको square या vertical MP4 और शायद एक GIF चाहिए। Core या उससे ऊपर पर एक ही .riv हर स्टेट को कवर करती है, साथ में मोशन कम करें के लिए एक स्थिर poster image।

Charmotion आपके कैरेक्टर या लोगो की एक इमेज से दोनों बनाता है: 17 एनिमेशन (10 लूप होने वाले मूड, 6 रिएक्शन और एक लॉन्च इंट्रो)। पेड प्लान ($20/माह से) के हर सेट में वीडियो फ़ॉर्मेट हैं: 1080x1080 पर MP4, 9:16 वीडियो और GIF, साथ में ऊपर के स्निपेट में इस्तेमाल हुए Character व्यू मॉडल वाली .riv, ट्रांसपेरेंट WebM और HEVC MOV, और वेब, React और SwiftUI कोड। Charmotion, Lottie या ट्रांसपेरेंट GIF एक्सपोर्ट नहीं करता।

Squarespace पेज पर Rive मैस्कॉट जोड़ें

1. प्लान जाँचें. पक्का करें कि साइट Core, Plus या Advanced प्लान पर है; Basic पर Code Blocks में JavaScript नहीं चलता।
2. .riv होस्ट करें. .riv को GitHub Pages, Cloudflare R2 या किसी ऐसे CDN पर अपलोड करें जो Access-Control-Allow-Origin लौटाता हो, और curl से टेस्ट करें।
3. Code Block जोड़ें. पेज एडिट करें, Add block पर क्लिक करें, Code चुनें, मोड को HTML पर सेट करें और Display Source बंद रखें।
4. Snippet पेस्ट करें. canvas और pinned Rive web रनटाइम script पेस्ट करें, साथ में अपना .riv URL और स्टेट मशीन का नाम डालें।
5. इवेंट जोड़ें. canvas पर क्लिक या पेज के submit event पर ट्रिगर फ़ायर करें, और loading या एम्प्टी स्टेट के लिए मूड नंबर सेट करें।
6. लाइव साइट जाँचें. पब्लिश किया गया पेज private window में खोलें या Safe Mode में Preview इस्तेमाल करें, क्योंकि लॉग इन रहते हुए कोड शायद न दिखे।

अक्सर पूछे जाने वाले सवाल

मेरे Squarespace Code Block में एनिमेशन क्यों नहीं दिखता?

चार बातें जाँचें: साइट Core या उससे ऊपर के प्लान पर हो, block HTML मोड में हो और Display Source बंद हो, .riv URL एक Access-Control-Allow-Origin header लौटाता हो, और आप लाइव साइट या Safe Mode देख रहे हों। Squarespace के अनुसार लॉग इन रहने पर कोड कभी-कभी नहीं दिखता।

क्या मैं Rive script को Squarespace Code Injection में डाल सकता हूँ?

हाँ, Core, Plus, Advanced और कुछ पुराने (legacy) प्लान पर। runtime script tag को साइट-वाइड header में डालें, जिसे Squarespace हर पेज के head में inject करता है, और canvas व start-up कोड को उस Code Block में रखें जहाँ मैस्कॉट दिखना चाहिए। footer से बचें: वह Code Block के बाद लोड होता है, इसलिए start-up कोड पहले चल जाएगा।

क्या Squarespace Video Block फ़ोन पर ऑटोप्ले होगा?

सिर्फ़ तब, जब वह म्यूट हो। Squarespace इसके लिए Autoplay से पहले Mute चालू करना ज़रूरी बनाता है। low-power या data-saver मोड में ब्राउज़र फिर भी ऑटोप्ले रोक सकते हैं, इसलिए ऐसा पहला फ़्रेम चुनें जो स्थिर इमेज के रूप में भी ठीक लगे।

इस गाइड से झटपट जवाब

• क्या Squarespace Basic प्लान पर custom JavaScript जोड़ा जा सकता है?

स्रोत

• Adding content with blocks, Squarespace Help Center
• Code blocks, Squarespace Help Center
• Using code injection, Squarespace Help Center
• Video blocks, Squarespace Help Center
• Using animated .gifs, Squarespace Help Center
• Cross-Origin Resource Sharing (CORS), MDN Web Docs
• Configure CORS, Cloudflare R2 docs
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive
• prefers-reduced-motion, MDN Web Docs