Fillio ফর্ম এম্বেড করা

যেকোনো ওয়েবসাইটে Fillio ফর্ম যোগ করার তিনটি উপায়: Standard, Popup এবং Full Page।

কোড কোথায় পাবেন

ফর্মটি খুলুন, শেয়ার ট্যাবে যান আর এমবেড বেছে নিন। Fillio আপনার ফর্ম আইডি আর বেছে নেওয়া অপশনগুলো বসিয়েই স্নিপেটটি বানিয়ে দেয়। নিচের উদাহরণগুলো দেখাচ্ছে সেটি কেমন হয়।

এম্বেড মোড

আপনার লেআউটের জন্য উপযুক্ত মোড বেছে নিন।

স্ট্যান্ডার্ড

পেজ সেকশনের মধ্যে ইনলাইন এম্বেড

পপআপ

ট্রিগার করা হলে 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-এর ভেতরে কাজ করে।