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 පූරණය කිරීම අවශ්ය වේ.
1. Script එක් කරන්න
<script async src="https://fillio.so/widgets/embed.js"></script>2. බොත්තමකින් ක්රියාත්මක කරන්න
<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>data-fillio-open දරන ඕනෑම මූලද්රව්යයකට Fillio හි පෙරනිමි බොත්තම් මෝස්තරය ලැබේ. එය අභිබවා යාමට ඔබේම class එකක් එක් කරන්න.
| ගුණාංගය | විස්තරය |
|---|---|
| data-fillio-open | පෝරම ID (අවශ්යයි) |
| data-fillio-width | Popup පළල පික්සල් වලින් |
| data-fillio-hide-title | පෝරම මාතෘකාව සඟවන්නට 1 ලෙස සකසන්න |
3. 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ක් පළල වන අතර, එය කිසිදු දිශාවකින් දර්ශන තිරයෙන් 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 තුළ ක්රියා කරයි.