पुराने प्लगइन के बिना Bubble में Rive एनिमेशन कैसे जोड़ें

मुझे Bubble Rive plugin इस्तेमाल करना चाहिए या HTML element?

HTML element इस्तेमाल करें। Rive ने 31 अगस्त 2021 को Bubble forum पर एक Bubble plugin की घोषणा की थी। उसी thread में 2021 और 2022 में users ने बताया कि वे इसे चला नहीं पा रहे, और अक्टूबर 2023 में किसी ने पूछा कि क्या यह अब भी सपोर्टेड है; forum के एक नियमित सदस्य ने जवाब दिया कि मूल पोस्ट करने वाले दो साल से ज़्यादा समय से forum पर नहीं दिखे। plugin की ओर से किसी ने जवाब नहीं दिया। यह plugin Rive की data binding से भी पुराना है, जबकि आज की कैरेक्टर फ़ाइलें अपने controls इसी के ज़रिए देती हैं।

HTML element में इनमें से कोई समस्या नहीं है। Bubble का manual इसे ऐसा element बताता है जो "runs HTML on the page", और यहाँ दो बातें अहम हैं:

• Scripts सिर्फ़ run mode में चलते हैं। "If the HTML contains script tags, the script tags will only run in run-mode and not in the editor." प्रीव्यू में टेस्ट करें।
• इसके अंदर dynamic data काम करता है। आप HTML में dynamic entries डाल सकते हैं, इसलिए .riv का URL किसी database field से आ सकता है।

script आप खुद लिखते हैं, इसलिए Rive runtime का version भी आप खुद चुनते और pin करते हैं, बजाय इसके कि किसी plugin में जो bundle हो उस पर निर्भर रहें। Bubble, Wix Studio और Webflow की साथ-साथ तुलना के लिए no-code builders में Rive और Lottie देखें।

Bubble में .riv फ़ाइल कैसे होस्ट करें?

इसे Data tab के file manager में अपलोड करें, जैसा forum users ने plugin के लिए बताया है, और फ़ाइल का URL कॉपी करें। Bubble के file links अक्सर protocol-relative होते हैं (वे // से शुरू होते हैं); script में इस्तेमाल करने से पहले आगे https: लगाएँ।

runtime .riv को cross-origin request से डाउनलोड करता है, क्योंकि आपके ऐप का domain और Bubble का file CDN अलग-अलग hosts हैं। यह तभी काम करता है जब CDN CORS headers भेजे। 25 अक्टूबर 2026 को जब हमने Bubble के CDN पर फ़ाइलें जाँचीं, तो responses में access-control-allow-origin: * शामिल था। अपनी फ़ाइल भी इसी तरह जाँचें:

curl -sI -H "Origin: https://yourapp.bubbleapps.io" \
  "https://YOUR-APP.cdn.bubble.io/f1234/character.riv" | grep -i access-control

अगर header नहीं है, तो .riv को ऐसे storage bucket या CDN पर होस्ट करें जहाँ CORS आपके नियंत्रण में हो, और HTTPS बनाए रखें। दो और विकल्प जानने लायक हैं:

• हर user या हर tenant की अलग फ़ाइलें। .riv को एक file field में स्टोर करें और Bubble के dynamic data से उसे src में डालें, ताकि हर workspace अपना मैस्कॉट दिखा सके।
• WASM फ़ाइल। runtime rive.wasm भी fetch करता है, डिफ़ॉल्ट रूप से unpkg से। अगर आपको इसे self-host करना है, तो Rive RuntimeLoader.setWasmUrl() का तरीका बताता है, और WASM का version runtime के version से मेल खाना चाहिए।

Bubble HTML element में Rive canvas कैसे एम्बेड करें?

एक HTML element जोड़ें, Display as an iFrame को unchecked छोड़ें, और नीचे दिया snippet पेस्ट करें। iframe विकल्प बंद होने पर code सीधे पेज में चलता है, और इसी वजह से बाद में workflows एनिमेशन तक पहुँच पाते हैं।

<div style="width: 100%; aspect-ratio: 1 / 1">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script>
(function () {
  function start() {
    if (window.mascot) window.mascot.cleanup();   // HTML element re-rendered
    var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    var r = new rive.Rive({
      src: "https://YOUR-APP.cdn.bubble.io/f1234/character.riv",
      canvas: document.getElementById("mascot"),
      stateMachine: "CharacterViewModelMachine",
      autoplay: !reduce,
      autoBind: true,
      onLoad: function () {
        r.resizeDrawingSurfaceToCanvas();
        window.mascot = r;
      },
    });
  }
  if (window.rive) return start();
  var s = document.createElement("script");
  s.src = "https://unpkg.com/@rive-app/canvas@2.47.1";
  s.onload = start;               // wait for the runtime before using it
  document.head.appendChild(s);
  window.addEventListener("resize", function () {
    if (window.mascot) window.mascot.resizeDrawingSurfaceToCanvas();
  });
})();
</script>

इसे इस तरह क्यों लिखा गया है:

• runtime को onload callback के साथ लोड किया जाता है। Bubble forum users ने बताया है कि HTML element में script tag से लोड की गई library अगले inline script के चलने तक defined नहीं होती थी। script element बनाकर onload में Rive शुरू करने से यह race नहीं होती।
• दोबारा बनाने से पहले cleanup()। अगर Bubble element को फिर से render करता है, जैसे कोई hidden group दोबारा दिखाया जाए, तो नया instance शुरू होने से पहले पुराना release हो जाता है।
• stateMachine और autoBind: true। स्टेट मशीन का नाम न हो तो runtime पहली मिली timeline चला देता है और इनपुट को अनदेखा करता है; autoBind फ़ाइल के default view model को bind करता है, ताकि आप properties सेट कर सकें।
• मोशन कम करें। अगर विज़िटर ने कम मोशन चुना है, तो फ़ाइल बिना ऑटोप्ले के लोड होती है।

अगर आपकी फ़ाइल का स्टेट मशीन नाम अलग है, तो CharacterViewModelMachine की जगह वह नाम लिखें। ऊपर बताए अनुसार runtime version pin करें, ताकि कोई upstream release बिना बताए आपका ऐप न बदल दे।

Bubble workflow से एनिमेशन कैसे बदलें?

Toolbox plugin इंस्टॉल करें और उसका Run javascript action इस्तेमाल करें। snippet instance को window.mascot के रूप में स्टोर करता है, इसलिए कोई भी workflow step view model property सेट कर सकता है या ट्रिगर फ़ायर कर सकता है:

// Toolbox "Run javascript" action, step 1 of "Button Save is clicked"
if (window.mascot) window.mascot.viewModelInstance.number("mood").value = 5; // loading

// ...your Bubble steps: Make changes to a thing, API call...

// last step: celebrate, then back to idle
if (window.mascot) {
  var vm = window.mascot.viewModelInstance;
  vm.trigger("success").trigger();
  vm.number("mood").value = 0;
}

ज़्यादातर ऐप के लिए अच्छा काम करने वाला पैटर्न:

• धीमे steps से पहले (API calls, file uploads, backend workflows) loading मूड सेट करें।
• सफल होने के बाद एक वन-शॉट रिएक्शन (एक बार चलने वाला रिएक्शन) फ़ायर करें और idle पर लौटें।
• विफल होने पर, पेज के लिए Bubble के error event से error फ़ायर करें और sad या attention मूड पर स्विच करें।

उल्टी दिशा में, यानी एनिमेशन से Bubble तक, Toolbox में एक Javascript to Bubble element है जो bubble_fn_ और आपके suffix वाले नाम का function देता है। इसे onLoad से कॉल करें, जैसे कोई custom state सेट करने के लिए जो मैस्कॉट तैयार होते ही placeholder image छिपा दे।

अगर आपकी फ़ाइल data binding की जगह पुराना इनपुट सिस्टम इस्तेमाल करती है, तो इनपुट r.stateMachineInputs("YourStateMachine") से सेट करें; स्टेट मशीन गाइड में फ़र्क समझाया गया है।

क्या Rive मैस्कॉट किसी Bubble ऐप की लोडिंग स्क्रीन बन सकता है?

यह ऐप के अंदर होने वाली loading के लिए सबसे अच्छा काम करता है, पहले paint के लिए नहीं। canvas package की rive.js लगभग 628 KB और rive.wasm लगभग 2.2 MB की है, बिना compression के (npm पर version 2.47.1), और पहला फ़्रेम दिखने से पहले दोनों का आना ज़रूरी है। उसी समय Bubble के अपने page assets भी लोड हो रहे होते हैं, इसलिए Rive loader शायद ही कभी पेज के ज़्यादातर हिस्से से पहले दिखता है।

इसकी जगह क्या काम करता है:

1. पेज लोड होते समय उसी जगह कैरेक्टर की एक static poster image दिखाएँ।
2. onLoad फ़ायर होने पर Rive canvas पर स्विच करें (Toolbox का Javascript to Bubble element कोई custom state बदल सकता है)।
3. loading मूड का इस्तेमाल उन इंतज़ारों के लिए करें जो पेज तैयार होने के बाद होते हैं: searches, payments, AI calls, uploads।

लूप शांत और छोटे रखें ताकि लंबा इंतज़ार और लंबा न लगे; loading एनिमेशन गाइड में timing के बारे में बताया गया है।

Bubble में canvas को शार्प और responsive कैसे रखें?

एक canvas के दो साइज़ होते हैं: पेज पर उसका CSS साइज़ और उसका drawing buffer। अगर दोनों अलग हों, तो एनिमेशन धुँधला या दबा हुआ दिखता है। snippet CSS साइज़ सेट करता है (element की पूरी चौड़ाई, square aspect ratio) और लोड होने के बाद तथा हर window resize पर resizeDrawingSurfaceToCanvas() कॉल करता है, जिससे buffer दिखाए गए साइज़ और screen density से मेल खाता है।

• Bubble की responsive settings में, HTML element को fixed pixel साइज़ की जगह minimum और maximum width दें, और height को wrapper के aspect-ratio से तय होने दें।
• Stretch to fit content से element, iframe mode में न होने पर, अपने content के साथ बढ़ता है; अगर canvas कट रहा हो तो इसे इस्तेमाल करें।
• Repeating groups: हर cell को एक unique canvas id चाहिए, जैसे dynamic data से cell का index डालकर। एक list में कई live canvas भारी पड़ते हैं; लंबी lists के लिए हर cell में GIF या poster इस्तेमाल करें और पेज पर कहीं और एक Rive कैरेक्टर रखें।

Bubble के लिए तैयार .riv कहाँ से मिलेगी?

Charmotion एक कैरेक्टर, मैस्कॉट या लोगो इमेज से 17 एनिमेशन बनाता है: CharacterViewModelMachine पर Character व्यू मॉडल वाली एक .riv (एक mood नंबर के साथ success, error, yes, no, enter और exit ट्रिगर), क्लासिक CharacterStateMachine इनपुट और एक छोटा लॉन्च इंट्रो। इसी सेट में MP4, 9:16 वीडियो, GIF, ट्रांसपेरेंट WebM और HEVC MOV के साथ web, React और SwiftUI कोड भी मिलता है। इस पेज के snippets इन्हीं नामों का इस्तेमाल करते हैं।

.riv और ट्रांसपेरेंट वीडियो हर पेड प्लान के साथ मिलते हैं ($20/माह से), MP4, GIF और 9:16 लॉन्च वीडियो (सॉलिड बैकग्राउंड) के साथ, जो Bubble में एक सादे वीडियो टैग से भी चलते हैं जहाँ प्रतिक्रिया देने वाले कैरेक्टर की ज़रूरत नहीं।

Bubble ऐप में Rive एनिमेशन कैसे जोड़ें

1. फ़ाइल अपलोड करें. Data टैब के file manager में .riv अपलोड करें और उसका URL कॉपी करें; अगर URL // से शुरू होता है तो आगे https: जोड़ें।
2. CORS जाँचें. Origin header के साथ curl चलाएँ और पक्का करें कि जवाब में access-control-allow-origin header आता है।
3. HTML element जोड़ें. एक HTML element रखें, Display as an iFrame को अनचेक ही रहने दें, और canvas व loader snippet पेस्ट करें।
4. प्रीव्यू. ऐप को प्रीव्यू में खोलें, क्योंकि Bubble script सिर्फ़ run mode में चलाता है।
5. Toolbox इंस्टॉल करें. Toolbox plugin जोड़ें और Run javascript स्टेप्स से window.mascot का मूड सेट करें और ट्रिगर फ़ायर करें।
6. इसे responsive बनाएँ. min और max width सेट करें, square wrapper बनाए रखें और window resize होने पर drawing surface को भी resize करें।

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

Bubble editor में मेरा Rive canvas खाली क्यों दिखता है?

Bubble के मैनुअल के अनुसार HTML element में script tags सिर्फ़ run mode में चलते हैं, editor में नहीं। इसलिए खाली बॉक्स दिखना सामान्य है। एनिमेशन देखने के लिए प्रीव्यू खोलें, और अगर फिर भी न दिखे तो वहीं ब्राउज़र console देखें: .riv की फ़ेल हुई request या कोई script error वहाँ दिख जाएगा।

क्या Display as an iFrame चालू करने पर workflows एनिमेशन को कंट्रोल नहीं कर पाते?

हाँ, असल में यही होता है। यह option चालू होने पर Bubble HTML को एक अलग पेज की तरह चलाता है, इसलिए window.mascot iframe के अंदर होता है, जबकि Toolbox का Run javascript action parent पेज में चलता है। जिस कैरेक्टर को आप workflows से कंट्रोल करते हैं, उसके लिए यह option बंद रखें।

Bubble में मेरा Rive एनिमेशन धुँधला क्यों दिखता है?

canvas का drawing buffer उसके दिखने वाले साइज़ से मेल नहीं खाता। onLoad में और फिर window resize पर resizeDrawingSurfaceToCanvas() कॉल करें, और canvas का साइज़ CSS से तय करें, ऐसे fixed width और height attributes से नहीं जो element के साइज़ से अलग हों।

क्या हर Bubble यूज़र को अलग मैस्कॉट दिख सकता है?

हाँ। हर यूज़र, टीम या workspace के लिए एक .riv को file field में रखें, फिर HTML element के dynamic data से उस field को snippet के src में डालें। सभी फ़ाइलों में स्टेट मशीन और property के नाम एक जैसे रखें, ताकि वही workflows हर वर्ज़न को चला सकें।

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

• Bubble editor में मेरा Rive एनिमेशन क्यों नहीं दिखता?
• Bubble workflow से Rive एनिमेशन को ट्रिगर कैसे करें?

स्रोत

• Visual elements: HTML element, Bubble Manual
• Rive: interactive animations for Bubble, Bubble Forum
• Scripts not loaded synchronously?, Bubble Forum
• Toolbox plugin documentation (Run Javascript, Javascript to Bubble), Toolbox docs
• Web (JS) runtime, Rive
• Rive parameters (web runtime), Rive
• Web runtime: Data binding, Rive
• Preloading WASM, Rive