Calendly: כיצד להטביע חלון קופץ לתזמון או יומן מוטבע באתר האינטרנט שלך או באתר וורדפרס שלך

ווידג'ט לתזמון קלנדלי

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

מה זה Calendly?

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

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

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

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

כיצד להטביע Calendly באתר שלך

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

להטביע בצורה רגועה

ברגע שתלחץ על זה, תראה את האפשרויות עבור סוגי ההטמעות:

הטמע טקסט קופץ

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

  • אם אתה רוצה לקרוא לכמה ווידג'טים שונים בעמוד בודד... אולי יש לך כפתור שמפעיל את מתזמן (טקסט קופץ) וכן את לחצן הכותרת התחתונה (יישומון קופץ)... אתה הולך להוסיף את גיליון הסגנונות ולתסריט זוג של פעמים. זה מיותר.
  • קריאה לקובץ סקריפט חיצוני וגיליון סגנונות מוטבע באתר שלך היא לא האמצעי האופטימלי ביותר להוספת השירות לאתר שלך.

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

כיצד פועלים הווידג'טים של Calendly

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

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

עם זאת, אם אתה ב-WordPress, השיטה הטובה ביותר תהיה להשתמש ב- functions.php קובץ כדי להכניס את הסקריפטים תוך שימוש בשיטות העבודה המומלצות של וורדפרס. אז, בנושא הילד שלי, יש לי את שורות הקוד הבאות כדי לטעון את גיליון הסגנונות והתסריט:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

זה הולך לטעון את אלה (ולשמור אותם במטמון) ברחבי האתר שלי. כעת אני יכול להשתמש בווידג'טים היכן שארצה בהם.

כפתור הכותרת התחתונה של Calendly

אני רוצה לקרוא לאירוע הספציפי ולא לסוג האירוע באתר שלי, אז אני טוען את הסקריפט הבא בכותרת התחתונה שלי:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

תראה את ללא שם: Calendly הסקריפט מתפרק באופן הבא:

  • כתובת האתר – האירוע המדויק שאני רוצה לטעון בווידג'ט שלי.
  • טקסט – הטקסט שאני רוצה שיהיה לכפתור.
  • צֶבַע - צבע הרקע של הכפתור.
  • צבע טקסט - צבע הטקסט.
  • מיתוג - הסרת המיתוג של Calendly.

חלון קופץ טקסט של Calendly

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

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

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

מוקפץ הטמעה מוטבע של Calendly

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

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

שוב, זה שימושי מכיוון שאתה יכול לקבל מספר divs עם כל אחד ללא שם: Calendly מתזמן באותו עמוד.

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

התחל עם Calendly

כתב ויתור: אני משתמש של Calendly וגם שותף למערכת שלהם. למאמר זה יש קישורי שותפים לאורך המאמר.