המדריך לחיבור טופס Webflow לוואטסאפ
חיבור Webflow לוואטסאפ - כל פנייה מהטופס ישר לטלפון
עיצבת אתר מדויק ב-Webflow, עם טופס native שנראה מדויק כמו כל שאר האתר - אבל הפניות ממנו נוחתות במייל שקט. המדריך הזה מראה איך לחבר את הטופס לוואטסאפ דרך Project Settings, כך שכל פנייה תגיע תוך שניות. חשוב לדעת מראש: קוד מותאם באתר Webflow דורש תוכנית Site בתשלום - הוא לא זמין בתוכנית Starter החינמית.
ללא כרטיס אשראי · 7 ימי ניסיון- עובד עם ה-Native Form של Webflow
- דורש תוכנית Site בתשלום (לא Starter)
- מ-19 ₪/חודש · 7 ימי ניסיון בלי כרטיס אשראי
לפני שמתחילים - בכנות
Starter חינמי לא מאפשר קוד מותאם. זה לא קשור אלינו
נתחיל מהחלק שכדאי לדעת מראש: כדי להוסיף קוד מותאם (Custom Code) לאתר Webflow צריך תוכנית Site בתשלום - הכלי הזה פשוט חסום בתוכנית ה-Starter החינמית. זו מגבלה של Webflow עצמו ונכונה לכל שכבת קוד חיצונית שתרצה להוסיף, לא רק לחיבור לוואטסאפ.
אם האתר שלך עדיין על Starter, כדאי לדעת שברוב המקרים ממילא תצטרך לשדרג כדי לחבר דומיין משלך ולהסיר את ה-badge של Webflow - כך שהשדרוג לתוכנית Site הוא לרוב צעד שקורה בין כה וכה בדרך להשקה.
מרגע שיש תוכנית בתשלום, החיבור עצמו פשוט וקצר: מדביקים תג `<script>` אחד באזור ה-Custom Code שתחת Project Settings, פעם אחת לכל הפרויקט, והוא תופס את הטופס ה-Native של Webflow ושולח כל פנייה לוואטסאפ תוך שניות - בלי לבנות אינטגרציית Logic חדשה ובלי צריך CMS Collection נפרד.
טפסים ב-Webflow
Native Form מול טופס בתוך CMS Collection
ל-Webflow יש טופס מובנה אחד, אבל הוא יכול להופיע במקומות שונים באתר.
Native Form Block
אלמנט ה-Form הסטנדרטי של Webflow, בכל עמוד. זה הטופס הנפוץ ביותר, והתג תופס את שליחתו מעצמו.
טופס בתוך Symbol משותף
הרבה אתרי Webflow שמים את טופס יצירת הקשר בתוך Symbol (רכיב חוזר) בפוטר. עדיין נתפס באותו אופן - התג לא תלוי במיקום.
טופס בעמוד CMS Template
אם יש לך עמוד תבנית CMS (למשל עמוד מוצר או שירות) עם טופס ״שאלה על השירות הזה?״ - גם הוא נתפס, כי התג עובד ברמת האתר כולו.
Webflow Logic (אם קיים)
אם הגדרת גם Webflow Logic לשליחת מייל, אין סתירה - התג מוסיף התראת וואטסאפ מיידית בנוסף, לא במקום.
שלב-אחר-שלב
לחבר טופס Webflow לוואטסאפ (בתוכנית בתשלום)
מניחים שיש לך כבר תוכנית Site בתשלום. אם לא - קודם משדרגים, כמוסבר למעלה.
- 1
נכנסים ומחברים וואטסאפ
נכנסים לחשבון יש ליד עם גוגל ומחברים את הוואטסאפ שלך בשליחת הודעה אחת מהטלפון. בלי QR, בלי אפליקציה.
- 2
מעתיקים את שורת הקוד
מקבלים תג <script> אחד - אותה שורה לכל האתר.
- 3
מדביקים ב-Project Settings של Webflow
בלוח הפרויקט: Project Settings ← לשונית Custom Code ← שדה Head Code (Before </head> tag). מדביקים ולוחצים Save Changes.
- 4
מפרסמים (Publish) ובודקים
לוחצים Publish to selected domains. נכנסים לאתר החי וממלאים את הטופס עם פרטי דמה - תוך שניות ההודעה נוחתת בוואטסאפ ונשמרת בלוח הבקרה.
Site-wide מול per-page: איפה כדאי להדביק
ל-Webflow יש שני מקומות אפשריים לקוד מותאם: Project Settings (חל על כל האתר, כל עמוד) ו-Page Settings בעמוד ספציפי (חל רק על אותו עמוד). ההמלצה כאן היא Project Settings - כי כך התג פעיל גם אם תוסיף עמוד נחיתה חדש עם טופס בעתיד, בלי לזכור להוסיף קוד לכל עמוד חדש בנפרד.
יוצא דופן: אם יש לך רק עמוד אחד עם טופס ורוצה לשלוט בדיוק על טעינת הסקריפט שם בלבד (למשל דף נחיתה ממומן ל-A/B testing), אפשר להדביק ב-Page Settings ← Custom Code של אותו עמוד בלבד. ברוב האתרים, Project Settings היא הבחירה הנכונה.
כדאי גם לזכור: עריכת Custom Code ב-Webflow לא נכנסת לתוקף על סביבת ה-Staging בלבד - היא דורשת לחיצה מפורשת על Publish כדי להגיע לדומיין החי. אם בדקת ולא רואה את ההודעה בוואטסאפ, הצעד הראשון הוא לוודא שאכן פרסמת מאז ההדבקה, ולא רק שמרת את ההגדרות ב-Project Settings.
הפנייה הבאה מה-Webflow שלך - ישר לוואטסאפ
תג אחד ב-Project Settings, מ-19 ₪ לחודש, 7 ימי ניסיון בלי כרטיס אשראי. (נדרשת תוכנית Site בתשלום להוספת קוד מותאם.)
שאלות נפוצות
אפשר לחבר אתר Webflow חינמי (Starter) לוואטסאפ?
לא באופן ישיר. הוספת קוד מותאם (Custom Code) ב-Webflow זמינה רק בתוכניות Site בתשלום - זו מגבלה של Webflow עצמו, לא ייחודית לחיבור לוואטסאפ. בתוכנית Starter חינמית אין גישה לאזור ה-Custom Code כלל.
איפה בדיוק ב-Webflow מדביקים את הקוד?
ב-Project Settings ← לשונית Custom Code ← שדה Head Code. מדביקים את התג, שומרים (Save Changes), ואז חייבים ללחוץ Publish כדי שהשינוי יעלה לאתר החי - עריכה בלי פרסום לא משפיעה על המבקרים.
צריך Webflow Logic או ידע בקוד?
לא. לא צריך Webflow Logic ולא צריך לכתוב שום קוד בעצמך. מדביקים את התג המוכן פעם אחת באזור ה-Custom Code, והוא מזהה את שליחת ה-Native Form הקיים מעצמו ושולח כל פנייה לוואטסאפ.
עדיף Project Settings או Page Settings לקוד?
ברוב המקרים Project Settings, כי הוא חל אוטומטית על כל עמוד באתר - כולל עמודים שתוסיף בעתיד. Page Settings שימושי רק אם רוצה לתחום את הקוד לעמוד בודד ומוגדר, כמו דף נחיתה ממומן.
זה עובד עם טופס בתוך Symbol משותף בפוטר?
כן. התג פועל ברמת האתר כולו ולא תלוי במיקום הטופס בעמוד, כך שטופס בתוך Symbol (רכיב חוזר שמופיע בכמה עמודים) נתפס בדיוק כמו טופס עצמאי.
יש לי גם CMS Collection של מוצרים/שירותים - זה משפיע?
לא. חיבור לוואטסאפ נוגע רק לטפסים שהמבקר ממלא, לא לתוכן ה-CMS. עמודי תבנית CMS עם טופס פנייה (כמו ״שאלה על השירות הזה?״) נתפסים באותו אופן כמו כל טופס אחר באתר.
זה מחליף את שליחת המייל שכבר הגדרתי בטופס?
לא צריך להחליף כלום. אם כבר הגדרת שליחת מייל בטופס (או ב-Webflow Logic), התג פשוט מוסיף שכבת התראת וואטסאפ מיידית בנוסף - שני הערוצים פועלים במקביל.