המדריך המלא: איך להתקין את הצ’אט החדש של מסנג’ר באתר שלכם – בחינם

שוקי מן

6 שנים ago

את הבוקר פתחתי עם הידיעה המרעישה הבאה:

או במילים אחרות – פייסבוק פתחה את האפשרות להשתמש במסנג’ר בתור צ’אט באתר שלכם – לכולם!

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

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

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

ככה זה נראה באתר שלי (החלק הירוק זה הצ’אט הישן של tawk.to שהיה מותקן עד היום. עוד לא הורדתי אותו) –

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

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

שלב ראשון – הוספת הדומיין לרשימה הלבנה

לכו לממשק ניהול העמוד שלכם תחת Settings, ושם לחצו על Messenger Platform:

עכשיו גללו את העמוד קצת למטה והוסיפו את הדומיין שבו אתם רוצים להתקין את הצ’אט בתור whitelisted.

שימו לב! חובה להשתמש בדומיינים מאובטחים (HTTPS) אחרת הצ’אט לא יעבוד (הגיוני סה”כ):

שלב שני: יצירת אפליקציה לצ’אט

לחצו על הלינק הזה ולחצו על Add a New App:

בחלון שיפתח כתבו את השם של האפליקציה ואת המייל שלכם, ולחצו על Create App ID:

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

שלב שלישי: העתקת המספר המזהה של העמוד שלכם

לכו למסך ה-About של העמוד והעתיקו את המספר שנמצא בתחתית העמוד. זה ה-page id שלכם:

שלב רביעי: הטמעת הקוד באתר

לכו לתג מנג’ר, צרו תג מסוג Custom HTML והדביקו בו את הקוד הבא.

שימו לב להדביק את המספר של האפליקציה (שהעתקנו בשלב השני) ואת המספר של העמוד (שהעתקנו בשלב השלישי) במקומות הנכונים.

אגב, אם תרצו שהודעת הפתיחה תופיע בשפה אחרת, עליכם לשנות את ה-URL שמופיע בקוד ולהחליף את ה-en_US בקוד של השפה הרצויה (עברית = he_IL):

window.fbAsyncInit = function() {

FB.init({

appId : '[הדביקו כאן את המספר של האפליקציה]',

autoLogAppEvents : true,

xfbml : true,

version : 'v2.11'

});

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "https://connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

jQuery('body').append('<div class="fb-customerchat" page_id="[הדביקו כאן את המספר של העמוד]" minimized="false"> </div>');

</script>

הוסיפו טריגר של All Pages, פבלשו את התג מנג’ר, וזהו! יש לכם צ’אט מסנג’ר בתוך האתר 🙂

אהבתם את הפוסט? השיתוף שלכם נותן לי מוטיבציה להמשיך לכתוב.

בשבילכם זה קליק אחד, בשבילי זה עולם ומלואו (טוב, נסחפתי, אבל בבקשה שתפו)