מדריך הטמעה

כאן תמצאו טיפים להטמעת ווידג׳ט מחשבון הפרגולה MOMENT באתר שלכם, עם קוד מוכן להדבקה בוורדפרס. את הקוד הקצר אפשר להעתיק גם מדף הווידג׳ט.

קוד HTML מותאם לוורדפרס

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

<!-- ווידג׳ט מחשבון פרגולה MOMENT — sade-il.com -->
<div style="max-width:900px;margin:0 auto">
  <iframe src="https://sade-il.com/embed/pergola-card"
    title="מחשבון פרגולה MOMENT"
    width="100%" height="300" loading="lazy"
    style="border:0;max-width:100%"
    id="sade-pergola-widget"></iframe>
  <p style="font-size:14px">מחשבון פרגולה מאת
    <a href="https://sade-il.com/pergola-calculator">א. סדצקי הנדסה וייעוץ — sade-il.com</a>
  </p>
</div>
<script>(function(){if(window.sadeWidget)return;window.sadeWidget=1;var O="https://sade-il.com",m;function close(){if(m){m.remove();m=null;document.documentElement.style.overflow=""}}function open(){if(m)return;m=document.createElement("div");m.setAttribute("style","position:fixed;inset:0;z-index:2147483000;background:rgba(20,15,10,.6);display:flex;align-items:center;justify-content:center;padding:12px");m.innerHTML='<div style="position:relative;width:100%;max-width:640px;height:92vh;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)"><button type="button" aria-label="סגירה" style="position:absolute;top:8px;left:8px;z-index:1;width:36px;height:36px;border:0;border-radius:50%;background:#f3ede4;font-size:20px;cursor:pointer">×</button><iframe src="'+O+'/embed/pergola-quick" title="מחשבון פרגולה MOMENT" style="border:0;width:100%;height:100%"></iframe></div>';m.addEventListener("click",function(e){if(e.target===m||e.target.tagName==="BUTTON")close()});document.body.appendChild(m);document.documentElement.style.overflow="hidden"}function ping(){var f=document.querySelectorAll('iframe[src^="'+O+'/embed/pergola-card"]');for(var i=0;i<f.length;i++)if(f[i].contentWindow)f[i].contentWindow.postMessage({type:"sade-host-ready"},O)}document.addEventListener("load",function(e){if(e.target&&e.target.tagName==="IFRAME")ping()},true);setTimeout(ping,1000);setTimeout(ping,3000);addEventListener("keydown",function(e){if(e.key==="Escape")close()});addEventListener("message",function(e){if(e.origin!==O||!e.data)return;var d=e.data;if(d.type==="sade-widget-open"){open();return}if(d.type==="sade-widget-close"){close();return}if(d.type!=="sade-widget-height")return;var f=document.querySelectorAll('iframe[src^="'+O+'/embed/pergola-card"]');for(var i=0;i<f.length;i++){if(f[i].contentWindow===e.source){f[i].style.height=d.height+"px";e.source.postMessage({type:"sade-host-ready"},O)}}})})();</script>

שלב אחר שלב בוורדפרס

פותחים את הדף או הפוסט בעורך הבלוקים (Gutenberg).
לוחצים על + ובוחרים בבלוק "HTML מותאם" (Custom HTML).
מדביקים את הקוד שלמעלה, כמו שהוא.
לוחצים "תצוגה מקדימה" בתוך הבלוק כדי לראות את המחשבון, ואז "עדכון".

הדרך הקצרה: תוסף וורדפרס עם קוד מקוצר

מורידים את קובץ התוסף.
מעלים אותו לתיקייה wp-content/plugins באתר, ומפעילים את התוסף במסך "תוספים".
מדביקים בכל עמוד או פוסט (בבלוק "קוד מקוצר") את השורה:

[sade_pergola_widget]

Elementor ועורכים אחרים

Elementor: גוררים את הווידג׳ט "HTML" ומדביקים בו את הקוד.
Divi: מודול "Code".
אתר HTML רגיל: מדביקים את הקוד במקום שבו המחשבון יופיע.

אתר Wix

דרך מומלצת: Custom Element (חלון קופץ מעל הדף)

בעורך Wix: "הוספה" ← "הטמעת קוד" ← "Custom Element".
לוחצים "בחירת מקור", בוחרים "כתובת שרת" (Server URL) ומדביקים:

https://sade-il.com/widget/sade-pergola-element.js

בשדה "שם התגית" (Tag Name) כותבים:

sade-pergola-widget

מותחים את התיבה לרוחב המלא ולגובה של כ-300 פיקסלים, ומפרסמים.

"בדיקה מהירה" פותחת את המחשבון המקוצר בחלון קופץ מעל הדף שלכם, ו"מחשבון מלא באתר" פותח את sade-il.com בלשונית חדשה. Custom Element זמין באתרי Wix בתוכנית בתשלום עם דומיין מחובר.

חלופה לאתר Wix חינמי: הטמעת HTML

"הוספה" ← "הטמעת קוד" ← "הטמעת HTML", בוחרים "קוד" ומדביקים:

<iframe src="https://sade-il.com/embed/pergola-card" title="מחשבון פרגולה MOMENT" width="100%" height="300" style="border:0;max-width:100%"></iframe>

בדרך זו "בדיקה מהירה" נפתחת בחלון נפרד, והאתר שלכם נשאר פתוח מאחור.

תקלות נפוצות

המחשבון לא מופיע: בדקו שהדבקתם בבלוק HTML ולא בבלוק טקסט רגיל, שהופך את הקוד לטקסט.
יש פס גלילה בתוך המחשבון: תוסף אבטחה או אופטימיזציה מסנן את תגית ה-script. אשרו אותה בתוסף, או השאירו גובה קבוע של 300.
המחשבון צר מדי: הוציאו את הבלוק מעמודה צרה או מסרגל צד, ושימו אותו בתוכן הראשי של הדף, לא בפוטר ולא בתבנית שחוזרת בכל עמודי האתר.
תוסף מטמון (Cache): אחרי ההדבקה נקו את המטמון כדי שהדף יתעדכן אצל הגולשים.

חשוב לדעת

כשהקוד כולל שורת קרדיט, היא נשארת מתחת למחשבון עם הקישור ל-sade-il.com. זה תנאי השימוש בווידג׳ט. מותר להוסיף לקישור rel="nofollow" או rel="sponsored".
המחשבון הוא בדיקה עצמית ולא אישור מהנדס. כשנדרש אישור חתום, צרו קשר.