Add Live Commenting to Framer Sites

עם FastComments אפשר בקלות להוסיף תגובות חיות לכל אתר שנבנה עם Framer.

במדריך זה נכסה רק את התקנת ווידג'ט התגובות החיות. אם אתם זקוקים לעזרה בהתקנת ווידג'טים אחרים, או בהגדרת SSO, אל תהססו לפתוח כרטיס תמיכה.

שלב 1: פתח את העורך

קודם כל, פתח את העורך של האתר שלך.

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

פתח את העורך

שלב 2: הוסף בלוק הטמעה

Now, בואו נוסיף בלוק Embed.

עבור אל Insert בפינה השמאלית עליונה:

לחץ על Insert

לאחר מכן גלול את סרגל הצד השמאלי כלפי מטה והעבר את העכבר מעל Utility.

בשלב הבא תרצה ללחוץ ולגרור את הבלוק Utility לסוף הבלוג שלך.

חשוב ללחוץ ולגרור כפי שמוצג, ולא רק ללחוץ. אם תלחץ רק, Framer ידביק אותו מחוץ לבלוג שלך ותצטרך לגרור אותו מאוחר יותר.

אתר את ה-Embed Widget

גרור ושחרר את ה-Embed Widget

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

פתח הגדרות ה-Embed

עכשיו נשנה את סוג הווידג'ט Embed ל־HTML:

הגדר כווידג'ט HTML

כעת אתה מוכן לקטע הקוד של FastComments Framer בצעד הבא.

שלב 3: העתק והדבק את קוד FastComments הספציפי ל-Framer

סקיפט FastComments לתגובות בזמן אמת של Framer נמצא להלן.

קטע FastComments ייעודי ל‑Framer — תגובות

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // חלק מהספקים משנים את קטע הקוד כדי שיהיה אסינכרוני
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

או, לחלופין, ניתן להשתמש בוידג'ט שיחת סטרימינג. סקיפט FastComments לשיחת סטרימינג של Framer הוא:

קטע FastComments ייעודי ל‑Framer — שיחת סטרימינג

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // חלק מהספקים משנים את קטע הקוד כדי שיהיה אסינכרוני
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

FastComments תומכת בעורך Framer, כך שעליך לראות משהו כזה לאחר הדבקת הקוד (ייתכן שתצטרך ללחוץ על Publish):

תצוגה מקדימה של וידג'ט תגובות

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

שימו לב ש‑Framer מגביל את גובה הווידג'טים ואינו תומך בהתאמה אוטומטית של גובה, לכן בחרנו כאן בוידג'ט ה‑Live Chat מכיוון שהוא בעל גובה קבוע.

שלב 4: התאם את גובה הווידג'ט והדף

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

ראשית, בחלונית השמאלית, הגדר את הגובה של הווידג'ט ל-fill ול-1fr:

גובה ווידג'ט ההערות

לאחר מכן עלינו לתקן את תצורת דף ברירת המחדל של Framer. כברירת מחדל היא קובעת את גובה הדף לגודל קבוע, מה שעלול לחתוך שרשורי תגובות. לכן נגדיר גם זאת ל-fill.

הגדר את גובה הדף

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

שגיאות דומיין

You may get an authorization error, like the following:

תצורת הדומיין חסרה

This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.

In this case, the fix is simple. You just have to add your site to your FastComments.com account.

לחץ כאן כדי להוסיף את האתר שלך לחשבון.

התאמה אישית

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

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

שפה 🇮🇱 עברית