מדריך זה מסביר כיצד להטמיע את טופסי התרומה שלנו באתר שלך. ישנן שלוש אפשרויות התקנה, בהתאם למערכת ניהול התוכן שלך וכיצד תרצה שהטופס יופיע.

כל שלוש האפשרויות תומכות בשינוי גודל אוטומטי — הטופס גדל ומתכווץ בהתאם לבחירת הסכומים על ידי התורם, פתיחת אפשרויות תשלום או הצגת הודעות אימות, כך שלעולם לא יהיו פסי גלילה בתוך הטופס.

התחלה מהירה

בחר את האפשרות המתאימה לצרכיך:

אפשרות	מתי להשתמש בה
חלון קופץ מודאלי (Modal popup)	אתה רוצה כפתור "תרום" באתר שלך שפותח את הטופס בחלון קופץ ממורכז מעל הדף. מומלץ לקריאות לפעולה (CTA) בכותרת, ווידג'טים בסרגל הצדדי וקריאות לפעולה בתוך מאמרים.
iframe מוטמע	אתה רוצה שטופס התרומה יופיע ישירות בדף, כמו בלוק מוטמע. מומלץ לקמפיינים ייעודיים או דפי נחיתה ל"תרומה".
iframe עצמאי	מערכת ניהול התוכן שלך מסירה תגיות `<script>` מבלוקי תוכן אבל מאפשרת iframes (התקנות וורדפרס נעולות מסוימות, פלטפורמות ניוזלטר מסוימות, בלוקים בסיסיים של Squarespace). השתמש רק אם אפשרות הווידג'ט לא עובדת ב-CMS שלך.

שתי האפשרויות הראשונות חולקות את אותו קובץ סקריפט. אתה כולל אותו פעם אחת בדף ויכול להשתמש בכמה הטמעות שתרצה.

שים לב שבדוגמאות הקוד הללו, יש להחליף את

https://secureddonation.com/en/give/demoform

בכתובת ה-URL האמיתית של טופס התרומה שלך.

אפשרות 1 — חלון קופץ מודאלי (מומלץ)

הוסף כפתור או קישור עם המאפיין data-givingtech-modal. בלחיצה, טופס התרומה ייפתח במודאל ממורכז עם רקע מוכהה.

<button data-givingtech-modal="https://secureddonation.com/en/give/demoform">תרום עכשיו</button>   <script src="https://secured.givingtech.org/Content/js/givingtech-embed.js" async></script>

ניתן להשתמש בכל אלמנט — כפתור, קישור, או <div> מעוצב:

<a href="#" data-givingtech-modal="https://secureddonation.com/en/give/demoform">תמכו בעבודה שלנו</a>

<button class="my-custom-button" data-givingtech-modal="https://secureddonation.com/en/give/demoform" data-givingtech-title="תמכו בקמפיין האביב שלנו">תרמו היום</button>

המודאל נסגר כאשר:

התורם לוחץ על כפתור ה-X בפינה הימנית העליונה
התורם לוחץ על מקש Esc
התורם לוחץ מחוץ למודאל על הרקע הכהה

פתיחת המודאל מתוך ה-JavaScript שלך

אם אתה מעדיף לפתוח את המודאל מהקוד שלך (לדוגמה, לאחר שמשתמש מסיים לצפות בסרטון), השתמש בפונקציה GivingTech.openModal():

GivingTech.openModal('https://secureddonation.com/en/give/demoform', 'תמכו בקמפיין האביב שלנו')

לסגירה תכנותית:

GivingTech.closeModal()

אפשרות 2 — iframe מוטמע (מומלץ)

הדבק את הקוד הבא בכל מקום בדף שבו אתה רוצה שטופס התרומה יופיע:

<div data-givingtech="https://secureddonation.com/en/give/demoform"></div>  <script src="https://secureddonation.com/Content/js/givingtech-embed.js" async></script>

הטופס יוצג ברוחב המלא של הקונטיינר המקיף ויתאים את גודלו אוטומטית כאשר התורם מקיים איתו אינטראקציה. תגית ה-<script> צריכה להופיע פעם אחת בלבד בכל דף, גם אם יש לך מספר טופסי תרומה או כפתורים מודאליים.

אופציונלי: התאמת כותרת ה-iframe לנגישות

<div data-givingtech="https://secureddonation.com/en/give/demoform"      data-givingtech-title="תרמו לקמפיין האביב שלנו"></div>

אפשרות 3 — iframe עצמאי (חלופה ל-CMS)

השתמש באפשרות זו רק אם ה-CMS שלך לא מאפשר לך לכלול תגית <script>. זהו אלמנט <iframe> יחיד עצמאי שטוען בעצמו את מטפל שינוי הגודל:

<div style="width:100%;max-width:100%;overflow:hidden;">   <iframe src="https://secureddonation.com/en/give/demoform" title="GivingTech Donation Form" scrolling="no" style="width:1px;min-width:100%;border:none;display:block;" allow="payment"     onload="!function(d,id){if(!d.getElementById(id)){var s=d.createElement('script');s.id=id;s.src='https://www.secureddonation.com/Content/js/givingtech-embed.js';d.head.appendChild(s)}}(document,'givingtech-embed-js')"></iframe> </div>

גרסה זו שקולה מבחינה פונקציונלית לאפשרות 2, אך אינה דורשת תגית <script> נפרדת — ה-iframe מאתחל את הסקריפט בעצמו ברגע שהוא נטען. שים לב שאפשרות זו אינה תומכת בחלונות קופצים מודאליים או בתוכן דינמי (טפסים שמתווספים לדף לאחר הטעינה הראשונית).

מעקב UTM וקמפיינים

סקריפט ההטמעה שלנו מעביר אוטומטית פרמטרי מעקב מכתובת ה-URL של הדף שלך אל טופס התרומה, כך שנתוני הייחוס — מאיפה הגיע התורם, איזה קמפיין הביא אותו, איזו מודעה הוא לחץ עליה — נשמרים לאורך התרומה.

איך זה עובד

אם תורם נוחת בדף כמו:

https://yoursite.org/spring-appeal?utm_source=facebook&utm_campaign=spring2026

…והדף הזה מכיל את קטע ההטמעה שלך, כתובת ה-URL של טופס התרומה נכתבת מחדש אוטומטית ל:

https://secureddonation.com/en/give/demoform?utm_source=facebook&utm_campaign=spring2026

אינך צריך לעשות דבר כדי שזה יעבוד. זה קורה אוטומטית.

כלל קדימות

אם אתה מקודד פרמטר ישירות בכתובת ה-URL של ההטמעה, הוא קובע מעל כל פרמטר שמופיע בכתובת ה-URL של דף ההורה. לדוגמה, בהינתן ההטמעה הזו:

<div data-givingtech="https://secureddonation.com/en/give/demoform?utm_campaign=evergreen"></div>

…גם אם כתובת ה-URL של דף ההורה מכילה ?utm_campaign=spring2026, טופס התרומה ישתמש ב-utm_campaign=evergreen. הדבר מאפשר לך לקבע ערכים מסוימים לדפי נחיתה ספציפיים מבלי לדאוג שפרמטרים של דף ההורה ידרסו אותם.

פתרון תקלות

הטופס לא מופיע. בדוק את קונסולת הדפדפן עבור שגיאות. ודא שתגית ה-<script> כלולה בדף (או השתמש באפשרות 3 אם ה-CMS שלך מסיר סקריפטים). ודא שכתובת ה-URL ב-data-givingtech נכונה ומשתמשת ב-HTTPS.
הטופס מופיע אך אינו משנה את גודלו. הסיבה הסבירה ביותר היא שה-CMS או הערכה (theme) שלך טוענים את הטופס ב-iframe או קונטיינר אחר. ודא שה-src של ה-iframe מצביע על טופס התרומה שלך.
המודאל לא נפתח כשאני לוחץ על הכפתור. ודא שה-<script> נטען (בדוק בלשונית Network בכלי הפיתוח של הדפדפן). אם יש לך מסגרת JavaScript שמונעת אירועי לחיצה ברירת מחדל באופן גלובלי, ייתכן שתצטרך לקרוא ל-GivingTech.openModal(...) מתוך מטפל הלחיצה שלך במקום להשתמש ב-data-givingtech-modal.
פרמטרי UTM לא עוברים. בדוק את כתובת ה-URL בפועל בשורת הכתובת של הדפדפן — אתרים רבים מסירים פרמטרי UTM לאחר שהם נשמרים בעוגייה או בכלי אנליטיקה. אם האתר שלך עושה זאת, קודד את הערכים ישירות בכתובת ה-URL של ההטמעה, או השתמש ברינדור בצד השרת כדי להזריק אותם.
הטופס נראה צר מדי. הטופס ממלא 100% מרוחב קונטיינר ההורה שלו. אם אתה רוצה רוחב מקסימלי ספציפי, עטוף אותו:

<div style="max-width: 600px; margin: 0 auto;">   <div data-givingtech="https://secureddonation.com/en/give/demoform"></div> </div>

מדריך עזר: כל מאפייני ה-data

מאפיין	בשימוש על	מטרה
`data-givingtech`	קונטיינר iframe מוטמע	כתובת ה-URL של טופס התרומה להטמעה
`data-givingtech-modal`	כפתור/קישור להפעלת המודאל	כתובת ה-URL של טופס התרומה לפתיחה במודאל
`data-givingtech-title`	בשניהם	כותרת נגישה ל-iframe (ברירת מחדל: "GivingTech Donation Form")
`data-givingtech-forward`	בשניהם	רשימה מופרדת בפסיקים של פרמטרי URL להעברה מדף ההורה (ברירת מחדל: UTMs סטנדרטיים + מזהי קליקים). השתמש ב-`"none"` כדי לבטל.

תמיכה

אם נתקלת בבעיות שלא מכוסות כאן, אנא צור איתנו קשר בצ'אט חי וספק לנו:

כתובת ה-URL של הדף שבו אתה מנסה להטמיע את הטופס
קוד ההטמעה המדויק שהדבקת
צילום מסך של מה שאתה רואה (אם זו בעיה ויזואלית)
שגיאות מקונסולת הפיתוח של הדפדפן שלך

טופס תרומה — מדריך הטמעה