Fillio फारमहरू इम्बेड गर्ने
कुनै पनि वेबसाइटमा Fillio फारम थप्ने तीन तरिकाहरू: Standard, Popup र Full Page।
कोड कहाँ पाइन्छ
फारम खोल्नुहोस्, साझेदारी ट्याबमा जानुहोस् र इम्बेड छान्नुहोस्। Fillio ले तपाईंको फारम ID र तपाईंले छानेका विकल्प पहिल्यै भरिएको स्निपेट बनाइदिन्छ। तलका उदाहरणले त्यसले के बनाउँछ भन्ने देखाउँछन्।
इम्बेड मोडहरू
आफ्नो लेआउटका लागि उपयुक्त मोड रोज्नुहोस्।
स्ट्यान्डर्ड
पृष्ठ खण्डभित्र इनलाइन इम्बेड
पपअप
ट्रिगर गरिएपछि modal overlay को रूपमा खुल्दछ
पूरा पृष्ठ
पूरै HTML पृष्ठ ओगट्दछ
Standard इम्बेड
कोड जुनसुकै HTML पृष्ठमा टाँस्नुहोस्। फारम इनलाइन iframe को रूपमा देखिन्छ।
इम्बेड कोड
<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" loading="lazy"></iframe>
<script>var d=document,w="https://fillio.so/widgets/embed.js",v=function(){"undefined"!=typeof Fillio?Fillio.loadEmbeds():d.querySelectorAll("iframe[data-fillio-src]:not([src])").forEach((function(e){e.src=e.dataset.fillioSrc}))};if("undefined"!=typeof Fillio)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>आकार आफैँ मिल्ने काम स्निपेटभित्रको विजेट स्क्रिप्टले गर्छ। त्यो राखिराख्नुहोस्, अनि उत्तरदाता पृष्ठहरूबीच सर्दा iframe फारमसँगै बढ्छ र घट्छ।
स्क्रिप्टविना
विजेट लोड गर्न मन छैन भने स्थिर उचाइ भएको साधारण iframe प्रयोग गर्नुहोस्। केही पनि आफैँ मिल्दैन, त्यसैले आफ्नो सबैभन्दा लामो पृष्ठ अट्ने उचाइ छान्नुहोस्।
<iframe src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" style="border: 1px solid #e5e7eb; border-radius: 8px;"></iframe>विकल्पहरू
व्यवहार अनुकूलन गर्न इम्बेड URL मा यी query parameter हरू थप्नुहोस्।
| प्यारामिटर | विवरण |
|---|---|
| ?hideTitle=1 | इम्बेडभित्र फारमको शीर्षक लुकाउँदछ |
| ?transparentBackground=1 | इम्बेड फ्रेमबाट सेतो पृष्ठभूमि हटाउँदछ |
| ?dynamicHeight=1 | फारमको उचाइ अनुसार iframe को आकार स्वतः बदल्दछ |
Popup इम्बेड
जुनसुकै बटन वा लिङ्कबाट फारम ट्रिगर गर्नुहोस्। Fillio widget script लोड गर्न आवश्यक छ।
१. Script थप्नुहोस्
<script async src="https://fillio.so/widgets/embed.js"></script>२. बटनबाट ट्रिगर गर्नुहोस्
<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>data-fillio-open बोक्ने जुनसुकै तत्वले Fillio को पूर्वनिर्धारित बटन शैली पाउँछ। त्यसलाई बदल्न आफ्नै क्लास थप्नुहोस्।
| एट्रिब्युट | विवरण |
|---|---|
| data-fillio-open | फारम ID (आवश्यक) |
| data-fillio-width | Popup को चौडाइ पिक्सेलमा |
| data-fillio-hide-title | फारमको शीर्षक लुकाउन 1 सेट गर्नुहोस् |
३. JavaScript बाट ट्रिगर गर्नुहोस्
Fillio.openPopup('YOUR_FORM_ID', {
width: 500,
hideTitle: false,
onOpen: function () {},
onClose: function () {}
});पपअपलाई आफ्नै कोडबाट जुनसुकै बेला बन्द गर्नुहोस्।
Fillio.closePopup('YOUR_FORM_ID');लिङ्कबाट खोल्ने
URL फ्र्यागमेन्टले पृष्ठ लोड हुनासाथ पपअप खोल्छ, जसले मेनुको वस्तु, सन्देश वा अर्को पृष्ठबाट फारमसम्म पुग्न सजिलो बनाउँछ।
<a href="https://your-site.com/page#fillio-open=YOUR_FORM_ID&fillio-width=600">Open Form</a>पपअपको व्यवहार
चौडाइ नतोकेसम्म पपअप 500 px चौडा हुन्छ, र यो कुनै पनि दिशामा भ्युपोर्टको 90% भन्दा बढी हुँदैन। पछाडिको पर्दामा क्लिक गर्दा वा Esc थिच्दा बन्द हुन्छ, र दुवै छेउमा onOpen र onClose चल्छन्।
Full Page इम्बेड
फारम पूरै viewport भर्न यो HTML टेम्पलेट प्रयोग गर्नुहोस्।
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Form</title>
<script async src="https://fillio.so/widgets/embed.js"></script>
<style type="text/css">
html { margin: 0; height: 100%; overflow: hidden; }
iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; }
</style>
</head>
<body>
<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="Form"></iframe>
</body>
</html>विकल्पहरू
व्यवहार अनुकूलन गर्न इम्बेड URL मा यी query parameter हरू थप्नुहोस्।
| प्यारामिटर | विवरण |
|---|---|
| ?transparentBackground=1 | इम्बेड फ्रेमबाट सेतो पृष्ठभूमि हटाउँदछ |
इम्बेड गरिएको फारम होस्ट गरिएकैजस्तो चल्छ: सशर्त लजिक, धेरै पृष्ठ र तपाईंको फारम थिम सबै iframe भित्रै काम गर्छन्।