Add Live Commenting to Bubble.io Sites

ראשית, נווט לדף/פריסה שבה ברצונך להוסיף את FastComments. בעורך Bubble, גרור ושחרר אלמנט HTML מהסרגל הצדדי Visual Elements אל הדף שלך.

הוסף אלמנט HTML

אלמנט ה-HTML יאפשר לנו להטמיע את ווידג'ט FastComments ישירות ביישום ה-Bubble שלך.

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

קטע קוד להערות חיות ב-Bubble.io

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // ל-Bubble יש נטייה לשנות את קטע הקוד כך שיהיה אסינכרוני

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

הכנס את קוד FastComments

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

זכור להחליף את 'demo' במזהה ה-tenant של FastComments שלך לאחר ההרשמה. אם אתה מחובר ל-FastComments.com, זה אמור להיות מוחלף כבר.

כדי להבטיח שהווידג'ט ההערות יוצג כראוי, עלינו להתאים את רוחב אלמנט ה-HTML. חפש את לשונית 'Layout' בעורך התכונות של האלמנט.

מצא את הגדרת הרוחב

לשונית 'Layout' מכילה אפשרויות גודל חשובות שיעזרו לווידג'ט ההערות שלנו להופיע כראוי על מסכים בגדלים שונים.

בלשונית Layout, הגדר את הרוחב ל־100%. הדבר מבטיח שהווידג'ט של ההערות יתפוס את כל רוחב המיכל שלו ויתאים כראוי לגדלים שונים של מסך.

הגדר רוחב ל־100%

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

בנוסף, הגדר גובה מינימלי (לדוגמה, 400px) כדי להבטיח שלווידג'ט ההערות יש מספיק מקום כדי להופיע כראוי.

לאחר ביצוע השינויים, לחץ על הכפתור תצוגה מקדימה כדי לראות את הווידג'ט של FastComments בפעולה!

כל הכבוד! הוספת תגובות בזמן אמת לאתר ה-Bubble.io שלך.

אם נתקלת בשגיאת "permission denied", או אם ברצונך להתאים אישית את FastComments, המשך לקרוא.

FastComments מיועד להיות מותאם אישית כך שיתאים לאתר שלך.

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