הטמעות

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

מחפשים בועת צ’אט במקום טופס? לצ’אט החי יש טוען משלו (chat.js) וקטע משלו — ראו צ’אט חי.

אפשר להטמיע שלושה טפסים:

טופס	מה הוא עושה	דורש
`waitlist`	אוסף הרשמות לרשימת ההמתנה	רשימת המתנה מופעלת
`contact`	פותח שיחה בתיבת הדואר של הפרויקט שלכם	הודעות פרטיות Pro
`beta`	הרשמה ציבורית לתוכנית בטא אחת	בטא מופעלת, תוכנית פעילה עם הרשמה ציבורית

הוספת הטמעה

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

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

קטע נראה כך:


<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Contact Acme" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Contact Acme"></iframe>
</noscript>

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

הכול מוגש מדומיין הפורטל שלכם. אם יש לכם דומיין מותאם הקונסולה נותנת לכם קטעים בדומיין הזה; אחרת הם משתמשים בתת-הדומיין שלכם ב-*.supdesk.app.

דומיינים מותאמים ודומייני שורש

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

המקרה שכדאי לשים לב אליו הוא קטע שהעתקתם לפני הוספת דומיין מותאם. בקשות למקור הישן שלכם מופנות לדומיין המותאם, והטוען מקבל את ההפניה הזו רק כששניהם חולקים דומיין שורש — למשל תת-דומיין פורטל של feedback.apibot.dev ודומיין מותאם של www.apibot.dev יושבים שניהם על apibot.dev. אם הדומיין המותאם שלכם נמצא על שורש אחר לגמרי, ההפניה היא חוצת-דומיינים וההטמעה לא תעבוד: העתיקו מחדש את הקטע מהקונסולה אחרי שהדומיין המותאם שלכם פעיל.

מאפיינים

מאפיין	חובה	תיאור
`data-supdesk`	כן	איזה טופס להטמיע: `waitlist`, `contact` או `beta`
`data-program`	בטא בלבד	ה-slug של תוכנית הבטא
`data-title`	לא	כותרת נגישה למסגרת. ברירת המחדל היא `SupDesk form`
`data-height`	לא	גובה התחלתי בפיקסלים לפני שינוי הגודל הראשון. ברירת המחדל היא `360`
`data-ref`	לא	קוד הפניה לרשימת המתנה שאליו לזקוף את ההרשמה

אתם יכולים לשים יותר מהטמעה אחת בעמוד — תנו לכל אחת תגית <script> משלה.

מדיניות אבטחת תוכן

אם האתר שלכם שולח כותרת Content-Security-Policy, התירו את מקור הפורטל שלכם בשתי הנחיות, אחרת הדפדפן יחסום את ההטמעה:


script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

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

הגנת ספאם

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

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

פרטיות והתחברות

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

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

רשימת המתנה — ההרשמה נרשמת מיד; המייל נושא את המיקום ואת קישור ההפניה האישי שלהם
בטא — המייל נושא את קישור האישור שרושם אותם
יצירת קשר — ההודעה מגיעה לתיבת הדואר שלכם מיד; המייל הוא האישור שלהם ומאפשר להם לראות את התשובות שלכם

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

מה המבקרים רואים

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

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

קטע רשימת המתנה מדור קודם

לפני שהטוען מבוסס הסקריפט היה קיים, הטמעת רשימת ההמתנה הייתה iframe פשוט שמצביע על /waitlist/embed:


<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="Waitlist"></iframe>

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