Spin And Wheel

הטמעת גלגל מזל באתר שלכם

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

קבלת קוד ההטמעה

השאירו ריק כדי להשתמש ברשימה של הגלגל עצמו. הערכים נשמרים בתוך הקוד, לא בשרת.

גודל

ל-Notion, ל-"By URL" ב-Google Sites ולעורכים אחרים שמבקשים קישור במקום HTML.

תצוגה מקדימה חיה

איך מטמיעים גלגל מזל באתר ב-3 שלבים

  1. בחרו גלגל והוסיפו ערכים. בחרו במחולל שבדף הזה את גלגל השמות, את גלגל כן או לא או את גלגל המספרים האקראיים, והקלידו ערך אחד בכל שורה — או השאירו את הרשימה ריקה כדי לשמור על הערכים של הגלגל עצמו.
  2. בחרו גודל והעתיקו את הקוד. גובה קטן הוא 400 px, בינוני 520 px וגדול 640 px, והרוחב 100% עד אותה מגבלה. הקוד הוא <iframe> רגיל של HTML ועוד שורת קישור אחת.
  3. הדביקו את הקוד בבלוק HTML ופרסמו. הבלוק נקרא Custom HTML ב-WordPress, Embed HTML ב-Wix, Code ב-Squarespace, Custom Liquid ב-Shopify ו-Code Embed ב-Webflow. בעורכים שמקבלים רק קישור (Notion, "By URL" ב-Google Sites) משתמשים בקישור ההטמעה.

זה הקוד המלא של גלגל שמות עם שלושה ערכים, נועה, דוד ומאיה, בגודל בינוני:

<iframe src="https://spinandwheel.com/he/?mode=embed&amp;entries=%D7%A0%D7%95%D7%A2%D7%94,%D7%93%D7%95%D7%93,%D7%9E%D7%90%D7%99%D7%94" title="גלגל המזל" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/he/">גלגל המזל מאת Spin and Wheel</a></p>

הערכים נמצאים בכתובת של src (entries=, או w= דחוס לרשימות ארוכות), ו-mode=embed מציג רק את הגלגל. השורה השנייה היא קישור רגיל לדף של הגלגל.

איפה מדביקים את הקוד

הקוד הוא <iframe> רגיל של HTML ועוד קישור אחד, כך שהוא עובד בכל אתר שמקבל HTML. אלה השלבים בעורכים הנפוצים ביותר.

WordPress

בעורך הבלוקים הוסיפו בלוק Custom HTML (הקלידו /html), הדביקו את הקוד ולחצו על תצוגה מקדימה. WordPress באחסון עצמי מאפשר iframes כברירת מחדל; ב-WordPress.com ייתכן שיידרש מסלול בתשלום.

Wix

בעורך של Wix לחצו על Add Elements (+) ← Embed Code ← Embed HTML, בחרו Code, הדביקו את הקוד ולחצו Update, ואז גררו את התיבה לגובה של כ-520 px. Wix מציג HTML מותאם בתוך מסגרת משלו, כך שהגלגל עובד אבל הקישור שמתחתיו נפתח בתוך המסגרת.

Squarespace

ערכו את הדף, לחצו Add Block ← Code, השאירו את הבלוק על HTML, הדביקו את הקוד ושמרו את הדף. הגלגל מופיע בדף שפורסם; בעורך, בלוק Code עשוי להציג במקומו מציין מקום.

Shopify

עברו אל Online Store ← Themes ← Customize, בחרו Add section ← Custom Liquid, הדביקו את הקוד בשדה קוד ה-Liquid ושמרו. גם ערכות נושא חינמיות כמו Dawn כוללות את המקטע Custom Liquid.

Webflow

גררו רכיב Code Embed מחלונית Add אל הדף, הדביקו את הקוד, לחצו Save & Close ופרסמו את האתר. ייתכן שהטמעת קוד מותאם תדרוש מסלול אתר בתשלום של Webflow.

Blogger

פתחו את הפוסט, העבירו את העורך מ-Compose view ל-HTML view דרך תפריט העיפרון, הדביקו את הקוד במקום שבו הגלגל אמור להופיע ופרסמו. לגלגל בסרגל הצד השתמשו ב-Layout ← Add a Gadget ← HTML/JavaScript.

Google Sites

בחרו Insert ← Embed. תחת "Embed code" הדביקו את הקוד המלא, או תחת "By URL" הדביקו את קישור ההטמעה. Google Sites מציג כל הטמעה בתוך מסגרת משלו, כך שהגלגל עובד אבל הקישור שמתחתיו נפתח בתוך המסגרת.

Notion

הקלידו /embed, הדביקו את קישור ההטמעה (לא את קוד ה-HTML) ולחצו Embed link. גררו את פינת הבלוק לגובה של כ-520 px כדי שכל הגלגל ייראה.

Canvas, Moodle ומערכות LMS אחרות

פתחו את הדף בעורך ה-HTML (ב-Canvas: הכפתור </>; ב-Moodle: כפתור ה-HTML של העורך Atto או TinyMCE) והדביקו את הקוד. אם הגלגל נעלם אחרי השמירה, מנהל המערכת חסם iframes מאתרים אחרים; בקשו ממנו לאשר את spinandwheel.com.

כל דף HTML

הדביקו את הקוד בתוך <body> של הדף. ה-iframe ברוחב 100% עד מגבלת הגודל שלו ונטען עם loading="lazy", כך שהוא לא מאט את טעינת החלק העליון של הדף.

איך הגלגל המוטמע עובד

הווידג'ט הוא הדף האמיתי של Spin and Wheel במצב הטמעה קל (?mode=embed): מוצגים רק הגלגל וקישור קטן "פתיחה ב-Spin and Wheel". המבקרים מסובבים עם הכפתור שבמרכז, רואים את הזוכה בכרטיס, ויכולים לסובב שוב או להסיר את הזוכה מהרשימה. הגלגל מתאים את עצמו לתיבה שהוא מקבל — ברוחב ובגובה — מטלפונים של 320 px ועד סרגלי צד במחשב.

הערכים שלכם עוברים בכתובת של ה-iframe: רשימה קצרה כ-entries=, וארוכה יותר דחוסה (deflate-raw, base64url) כ-w=. שום דבר לא מועלה או נשמר בשרת, ושום דבר לא נכתב לאחסון הדפדפן של המבקרים, כך שכל מבקר מתחיל מהרשימה שלכם. ערכת הצבעים, זמן הסיבוב והגדרות הצליל שבחרתם בחלונית ההתאמה האישית עוברים באותה דרך (cfg=).

כל סיבוב משתמש ב-crypto.getRandomValues של Web Crypto API, בדיוק כמו ב-spinandwheel.com, כך שלכל אחד מ-N ערכים יש סיכוי של 1/N. ההטמעה לא מציגה פרסומות, לא מגדירה עוגיות מעקב ולא מתקינה service worker; היא סופרת רק כמה פעמים היא נטענה וסובבה, באופן אנונימי ובלי עוגיות.

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

שאלות נפוצות

שאלות נפוצות על וידג'ט ההטמעה

אפשר להטמיע גלגל שמות באתר שלי בחינם?
כן. גלגל השמות וכל שאר הגלגלים של Spin and Wheel ניתנים להטמעה בחינם באתרים אישיים, של בתי ספר ומסחריים, בעזרת שתי שורות HTML. אין חשבון, אין מפתח API ואין מגבלת שימוש — מעתיקים את הקוד ומדביקים.

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

האם מבקרים יכולים לשנות את הערכים בגלגל המוטמע?
המבקרים מסובבים עם הערכים שבחרתם ויכולים להסיר זוכה לפני הסיבוב הבא. כדי לערוך את הרשימה המלאה הם לוחצים על "פתיחה ב-Spin and Wheel", שפותח את הגלגל המלא עם הערכים שלכם בכרטיסייה חדשה.

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

האם הגלגל המוטמע אקראי והוגן?
כן. הזוכה נבחר בעזרת crypto.getRandomValues (Web Crypto API), כך שלכל אחד מ-N ערכים יש בדיוק סיכוי של 1/N בכל סיבוב, בדיוק כמו ב-spinandwheel.com.

איזה גודל כדאי לבחור?
בינוני (גובה 520 px) מתאים לרוב הפוסטים בבלוג. בחרו קטן (400 px) לסרגלי צד ולעמודות צרות, וגדול (640 px) לדפים ברוחב מלא או למקרן. הרוחב 100% עד אותה מגבלה, והגלגל תמיד נכנס בתוך התיבה.

האם הגלגל המוטמע עובד בטלפונים?
כן. ה-iframe ברוחב 100%, הגלגל מתכוונן לרוחב ולגובה הזמינים, ומתחת ל-700 px הזוכה מופיע בחלונית תחתונה עם כפתורים גדולים.

אפשר להטמיע גלגל ב-OBS לשידור חי?
ב-OBS Studio השתמשו בקישורי השידור הייעודיים במקום בווידג'ט הזה: שכבת תצוגה שקופה ולוח בקרה (dock). מדריך ההגדרה של OBS מסביר את שניהם.