טיפים טכניים להטמעת חלון התרומה החכם באתר שלכם

רוצים להטמיע את חלון התרומה החכם באתר שלכם ולא בטוחים איך לעצב אותו נכון? בשביל זה אנחנו פה!


ראשית עליכם להפיק את קוד ההטמעה בעזרת המדריך בקישור הזה. לאחר שקיבלתם את הקוד, נעבור לפרטים הטכניים של ההטמעה (מומלץ להיעזר באדם האחראי על הטיפול באתר שלכם בשביל המדריך הזה)


הטמעה בגוף האתר

רוחב

  • דסקטופ או טאבלט (מחשב) - החלונית היא iframe שמוגדר לו לתפוס רוחב של 100% מהקונטיינר החיצוני (לדוגמא div) אבל נראית במיטבה כאשר רוחב הקונטיינר נע בין 440px ל-550px.
  • מובייל (טלפון) - מומלץ להגדיר לקונטיינר החיצוני רוחב של 100%.

גובה

  • ה-iframe מגיע בגובה ברירת מחדל של 557px, ניתן לשנות ערך זה בהתאם לגובה הסופי של החלונית. (לדוגמא, כאשר מוסיפים "חבילות", גובה החלונית גדל ומתווסף בר גלילה. לכן, אם מעוניינים לבטל את בר הגלילה יש להגדיל את גובה ה-iframe בהתאם).

מיקום

  • כאשר חלונית התרומה מופיעה בשורה ללא אלמנטים נוספים מומלץ למקם אותה במרכז המסך. (למשל ע"י הוספת margin: 0 auto לקונטיינר או בעזרת שימוש ב-flexbox).

embedguide_01.png


הטמעה באתרי WiX

  1. ע"מ לאפשר הטמעה באתרי WiX יש להוסיף את הדומיין "filesusr.com" לרשימת הדומיינים באיזור העמותה (בנוסף לדומיין של האתר שלכם) ולשלוח לאישור.
    embedguide_02.png

  2. לאחר שהדומיינים אושרו, היכנסו לחשבון ה-WiX שלכם ועברו לאיזור Edit site.
    כדי לבצע את הפעולות הבאות עליכם להפעיל את מצב Dev Mode, הפעלת מצב Dev Mode מתבצעת על ידי לחיצה על Dev Mode ואז על Turn on Dev Mode
    embedguide_03.png

  3. לחצו על Add (סימן +) ואז על Embed, ולאחר מכן על Embed HTML.
    embedguide_04.png

  4. לחצו על ה-widget שהוספתם והחליפו את ה-ID הקיים (לדוגמא ”html1”) ב- “jgiveEmbed”
    embedguide_05.png

  5. בתוך ה-widget, לחצו על Enter code, בחרו באפשרות Code והדביקו בתיבת הטקסט את קוד ה-embed שהעתקתם מאיזור העמותה.
    embedguide_066.png

  6. באיזור הזנת קוד מותאם אישית (בחלונית למטה) הדביקו את הקוד הבא:
    embedguide_07.png
import wixLocation from 'wix-location';

$w.onReady(function () {

$w('#jgiveEmbed').postMessage(wixLocation.query)

});

(כדי להעתיק את הקוד, משכו את העכבר מימין העליון לשמאל התחתון תוך כדי לחיצה, אנחנו מתנצלים על אי הנוחות)

האם מאמר זה עזר לך?