เพิ่มปุ่ม Chat ในเว็บไซต์ ด้วย WhatsHelp (GetButton.io) Chat Button

ถ้าอยากให้ลูกค้าติดต่อเราเง่ายๆ เว็บไซต์ของเราก็ต้องมีสักปุ่มให้ลูกค้า กดเพื่อติดต่อเราได้ครับ ปุ่ม Chat เป็น Solution หนึ่งที่ทำให้ลูกค้าติดต่อเราได้ง่ายขึ้น ซึ่งลูกค้า สามารถติดต่อเรา ทั้งจากคอมพิวเตอร์ หรือ ในโทรศัพท์มือถือก็ทำได้

Key Take Away

• การใช้ Plugin Chat Button by GetButton.io (ชื่อเก่าเป็น WhatsHelp)
• การใช้ Code เพื่อเพิ่มปุ่ม ใน Chat Button
• ปัญหาที่พบบ่อยจากการวาง Code

Video Transcription

อยากติดตั้งปุ่มแชท ในเว็บไซต์ของเรา เราจะทำยังไงดี ลองดูตัวอย่างครับ สวัสดีครับ ผม พลากร สอนสร้างเว็บ นะครับ เราพบกันอีกเช่นเคยนะครับ ในวีดีโอนี้ครับผมก็จะพูดถึงวิธีการติดตั้งปุ่มแชท ในเว็บไซต์ของเราครับ ให้ผู้ชมเว็บไซต์ของเราเนี่ย โทรหาเราหรือว่า คลิกไลน์หาเรา หรือ คลิก Messenger Facebook หาเราก็ได้ด้วยนะครับ ผมแต่ก่อนที่เราจะไปดูครับ อย่าลืมกด Subscribe และ กดกระดิ่งเตือนไว้ด้วยนะครับ เพื่อที่ว่าเวลาที่มีวีดีโอใหม่ๆออกมา เนี่ยเราจะได้รู้เป็นคนแรกเลยครับ ลองมาดูวิธีทำปุ่มแชท กันได้เลยครับ พลากร สอนสร้างเว็บ

สำหรับในวันนี้นะครับ ปลั๊กอินที่เราจะใช้สร้างปุ่มแชท ในเว็บไซต์เนี่ย เป็น Plugin ที่ใช้งานง่ายมากๆเลยนะครับ ให้เราไปติดตั้งที่นี่ครับ ไปที่ Plugins.

แล้วก็​ Add New ครับจากนั้นครับ ให้เราไปค้นหาคำว่า Whats ด้วยแล้วก็ Help อย่างนี้นะครับ ก็จะได้ตัว Plugin ขึ้นมา 1 ตัวนะครับ เดี๋ยวรอดูตัวนี้ก็คือ WhatsHelp Chat Button นะครับผม เราสามารถกด Install Now ได้เลย ก็มีคนใช้เยอะอยู่นะครับ มันก็เป็นตัว Plugin ง่ายๆนะครับ เดี๋ยวเรามาดูกันว่ามันง่ายขนาดไหนนะครับ Install เสร็จแล้วก็กด Activate ได้เลยครับ คลิกลงไปเลย

ตอนนี้นะครับ เราได้ทำการ Activate Plugin เรียบร้อยแล้วนะครับ เดี๋ยวเราไปที่ด้านล่างนะครับ เรา Scroll มาก่อนมันก็จะเจอ WhatsHelp อยู่ตรงนี้นะครับผม เราก็คลิกลงไป 1 ที แบบนี้นะครับ พอคลิกลงมาแล้วเนี่ยมันก็จะมีอยู่แค่ 2 ช่อง อันนี้เราต้องแปะโค้ดนะครับ แต่ก่อนที่จะแปะโค้ด ต้องไปสร้างโค้ดที่ไปเว็บของเขาก่อน แล้วก็เอาเมาส์มาคลิกตรงนี้นะครับ อ่าเราคลิก 1 ที มาแล้วนะครับ เสร็จแล้วเนี่ยเราก็ไปที่ Get Your Button.

มันก็ลงมาอย่างนี้ มันก็จะให้เราเลือกครับ ว่าเราจะใส่ปุ่มอะไรบ้าง อย่างเช่น ผมต้องการใส่ Line กับ Facebook ผมก็เอา Line เพิ่มเข้าไปนะครับ แล้วถ้าเกิดว่า เราไม่เอา ปุ่ม Facebook ล่ะจะทำยังไง เราก็เอาเมาส์มาคลิกที่ตัวนี้ เราก็ใส่ปุ่มอื่น อย่างเช่นปุ่มโทรเข้าไปแทน แบบนี้ครับ เราก็ลองลบดูลองเพิ่มดูนะครับ

นี่พอผมใส่ Facebook ทีหลังเนี่ย มันก็จะอยู่ข้างใต้ Line เห็นไหมครับผม แล้วก็เพิ่มลดได้อย่างนี้นะครับผม แต่ว่าเดี๋ยวเราต้องมีตัวแรกก่อนนะ เราถึงจะเพิ่มลดได้ เอาผมใส่เป็น Line กับ Facebook ไป แต่ที่นี้เนี่ยตัว Example เนี่ยมันคือ Page id นะครับแล้วจะไปดูก็ได้ว่าเราจะไปเอา Page id ตรงไหนครับ ผมเอาตัวอย่าง เดี๋ยวผมคลิก ให้ดูมันก็จะมีตัวอย่างนะครับ ว่าฉันจะค้นหา Page Id ตรงไหน ให้เราไปที่เพจของเรานะ แล้วไปที่เกี่ยวกับ แล้วลงไปล่างสุดเลยนะครับผมเดี๋ยวผมทำให้ดูนะครับ อันนี้ก็จะเป็นหน้าเพจของผมนั้นเองนะครับผม.

ผมจะไปที่ Tab เกี่ยวกับ เหมือนกับที่คู่มือเขาบอกไว้นะครับ ก็คือแท็บนี้เกี่ยวกับนะครับผม เกี่ยวกับเนี่ย พอลงมาด้านล่างมันจะมี Page Id ตรงนี้แล้วเราก็ Copy เอาไว้นะครับผม Copy ตัวนี้ Admin เท่านั้นที่จะเห็นนะครับ ตัว ID ของเพจตัวนี้ Copy ไว้เสร็จแล้วนะครับ แล้วคลิกขวา Copy มานะเดี๋ยวเราย้อนกลับไปใส่ที่ whatsapp ของเราเอ้ยไม่ใช่ WhatsHelp ของเรานะครับ

ตอนนี้นะครับเราได้ตัว Facebook Page Id มาแล้วก็คลิก 1 ที คลิกขวา ลงไปแล้วก็ Paste ลง ไปนะครับผม ต่อมา LINE URL นะครับตัวนี้เนี่ยถ้าใครใช้ Line OA อยู่ไม่ค่อยมีปัญหานะครับเพราะว่า เราไปเอามาได้ง่ายๆเลย เดี๋ยวผมไปทำให้ดูตรงนี้นะครับ ถ้าใครใช้ Line OA อยู่ให้เรามาที่ หน้าหลักของ LINE Biz ของเรานะ Line Manager เราไปที่เพิ่มเพื่อนตรงนี้ครับ มันก็จะเข้าสู่หน้าจอนี้เห็นไหมครับแล้วได้ลิงค์มาแล้วกดคัดลอกเลยแค่นี้เองนะครับเสร็จแล้วแล้วเราก็ไปใส่ใน WhatsHelp ของเรานะครับ.

เราก็ใส่ที่นี่เลยครับคลิกขวาใส่ที่นี่ Paste ลงไปนะครับ แต่ในกรณีที่เรา ไม่ใช่ Line OA แต่เป็น LINE ธรรมดาจะทำอย่างไรนะครับผม วิธีง่ายที่สุดก็คือเราต้องไปหา QR Code ของเรานะครับผม แล้วก็ลองสแกนดูว่า QR Code นั้น มัน url อะไรปกติเวลาแชร์มันจะมีตัว URL หรือว่ามีลิงค์ให้เรานะครับ แต่สมัยนี้เนี่ยมันไม่มีแล้ว เราอาจจะต้องใช้เครื่องโทรศัพท์มือถือเครื่องอื่นมาช่วยสแกนดูนะครับผม หรือถ้าใครเนี่ยรู้ว่า User ของเราน่ะชื่ออะไรนะครับ User Id ของเรา เราสามารถที่จะทำแบบนี้ได้ครับ อย่างเช่นเราก็ Copy ตัวนี้มาลองดูนะครับ Copy ตัวนี้เลยนะครับ แล้วเราก็ลบแล้วเราก็ Paste ลงไป นะครับผม เสร็จแล้วก็พิมพ์ตัว User Id ของเราเข้าไปตรงนี้ User ID แบบนี้นะครับผมเสร็จแล้วเนี่ยถ้าของใครเนี่ยมันใส่อันนี้มันไม่ได้นะครับ เราก็ใส่เครื่องหมายยึกยือ ไป 1 ทีมันก็จะทำให้เราแอดไลน์ได้นะครับแบบนี้.

เอาแบบนี้ไปก่อนนะครับผม ตัวอย่างเสร็จแล้วนะครับลงมาด้านล่างสุดเราก็จะเลือกสีของเราได้แล้วก็ อ่า Match กับสีเว็บ ของเราสีอะไร สีบลูแล้วกันนะครับผม Position Left Right ได้หมดนะครับผม Call to Action Message เราก็บอกว่าส่งข้อความหาเรา อย่างนี้ก็ได้นะครับผม เสร็จแล้วนะครับ ไอ้ตรงนี้ใช้ไม่ได้เพราะว่าเป็นโปรนะครับ

ผมลืมบอกอีกอย่าง ถ้าใครจะเพิ่มตัวผมเข้าไปเพิ่มเนี่ยอันนี้เนี่ยมันบอกว่าต้องเป็น Pro เวอร์ชั่นนะครับ แต่ว่าเดี๋ยวผมเนี่ยจะมีเทคนิคให้เราเพิ่มปุ่มได้นะครับโดยไม่ต้องใช้ Pro Version นะครับ ตัวนี้แต่ตรงนี้ยังไงก็ต้องใช้ Pro Version นะครับเสร็จแล้วก็ใส่อีเมลเข้าไปนะครับ Some อีเมล แอ็ด อีเมล ผมก็จะ Get Code ออกมา ได้ละตัวโค้ดออกมาได้แล้วให้เราเนี่ย Copy ทั้งหมดเลยนะครับผมไฮไลท์ทั้งหมด ปื้ดอย่างนี้เลย หรือว่าคลิกไฮไลท์ให้หมดนะครับผม.

ไฮไลท์ให้หมดคลิ๊กขวาแล้วก็ Copy 1 ที แล้วเสร็จแล้วเนี่ย เดี๋ยวเรากลับไปที่เว็บไซต์ของเรากันนะครับ ตอนนี้กลับมาอยู่ที่หน้าเว็บไซต์ของเรานะครับเรา Paste ลงไปแล้วเราก็ คลิกขวา Paste เราได้โค้ดมาแล้ว เดี๋ยวผมขยายตรงนี้ให้ชัดๆหน่อย นะผมก็ว่าเทคนิคต่อไปนี้นะครับเราจะต้องแก้ไขในตัวโค้ดตรงนี้นิดนึงเพื่อที่จะเพิ่มปุ่มขึ้นมา

ก่อนที่เราจะเพิ่มปุ่มเนี่ยเรากด Save Change 1 ทีแล้วเราไปดูที่หน้าเว็บไซต์ของเรากันดีกว่าครับ ตอนนี้นะครับที่หน้าเว็บไซต์ของผมมาแล้วนะครับ เห็นไหมส่งข้อความหาเรา แล้วก็ตัวนี้ Line กับ Facebook ก็มาแล้วนะครับ ถ้าเกิดว่าเรากดในคอมพิวเตอร์เนี่ยก็จะโชว์เป็น QR Code ของเราแต่ถ้าเกิดว่า เรากดเป็นตัวนี้ Facebook Messenger เนี่ยมันก็จะสามารถที่จะพิมพ์ใส่ได้เลยถ้าเราเข้าสู่ระบบเรียบร้อยแล้วครับผม อันนี้ก็จะเป็นเพจที่เราใส่ตัว ID เข้าไปนะครับ อันนี้เสร็จแล้วนะครับ

เดี๋ยวเราจะทำการเพิ่มปุ่ม 2 ปุ่มให้กลายเป็น 4 ปุ่มดู ว่าจะทำอย่างไรนะครับมา ดูกันเลยครับ ให้เรากลับมาที่หน้า Get Button ตัวนี้นะครับ เราก็ลบตัวนี้เอาไปก่อน เสร็จแล้วเราจะเพิ่มปุ่มโทรศัพท์แล้วก็เพิ่มเข้ามา ลบ Messenger ไปด้วยเพิ่มปุ่มอีเมลแล้วกันแบบนี้แล้วก็ใส่เบอร์โทรครับใส่เบอร์โทรไปก่อน ตัวอย่างนะครับแล้วก็ใส่เบอร์โทรเข้าไป ขีดกลาง ให้มันสวยงามสักหน่อย แบบนี้เสร็จแล้วเนี่ยอีเมลแล้วก็ใส่ไป ตัวอย่างนะครับ เสร็จแล้ว เราคลิกตรงไหนก็ได้ที่ว่างๆ 1 ที ตรงนี้แล้วลงมาข้างล่างครับมันก็จะมีโค้ดเหมือนเดิมแล้วแหละ

แต่ว่าเดี๋ยวผมขยายให้ดูนะครับ ลองสังเกตอย่างหนึ่งนะครับผม ตัวนี้เนี่ยโค้ดตัวนี้เนี่ยถ้าใครไม่ได้สังเกตมันจะเปลี่ยนไปตอนแรกมันเป็น Facebook กับ Line ตอนนี้เป็นอีเมล กับ Call ให้เรานะครับ Copy แค่บรรทัดที่เราต้องการนะครับถ้าของใครเนี่ยต้องการอีเมลอย่างเดียวก็อีเมลถ้าใครต้องการ โทรศัพท์ด้วยก็โทรศัพท์นะครับผม Copy อย่างนี้ คลิกขวา 1 ทีแล้วก็ Copy แค่ 2 บรรทัดนี้มาเสร็จแล้วเราเอาไปใส่ที่เว็บไซต์ของเรากันครับ

ตอนนี้นะครับให้เรากลับมาที่ตัว What’s Help ใน WordPress ของเราเดี๋ยวเราเอามาวางตรงนี้ก่อนนะครับตรงบรรทัดล่างล่าสุดมันมี Facebook กับ Line เมื่อกี้ใช่ไหมครับ เราก็เคาะลงมา 1 ทีครับ ให้เป็นว่างๆเสร็จแล้วนะครับ เราก็เคาะเข้าไปให้มันตรงกันก่อน แล้วก็คลิกขวา 1 ทีครับ คลิกขวาเนี่ยต้องระวังนะครับผม ผมไม่แนะนำให้คลิกขวาดีกว่าผมแนะนำให้เรากด Control+V หรือ Command+V แปะลงไปนะครับ ผมหรือถ้าใครคลิกขวาเนี่ย มันจะเป็นอย่างนี้ คลิกขวาแล้วก็ Paste ตรงนี้นะครับมันก็จะงงๆ อย่างนี้นะครับไม่เอาเดี๋ยวผมกด Ctrl+Z กลับมาก่อนเรากด Control+V แปะลงไปมันก็จะได้บรรทัดใหม่ 2 อัน โผล่มาอย่างนี้นะครับ Email กับ Call แล้วถ้าใครเนี่ยต้องการจะเรียงลำดับ

เช่น เอาปุ่ม Line ไว้ข้างล่างสุดนะครับผม แล้วก็ปุ่ม Facebook อยู่ด้านบน คลิกตัวนี้นะครับไฮไลท์ก่อนทั้งแถวเลย แล้วก็กด Cut แบบนี้ ลบมันไปเสร็จแล้วเอามาล่างสุดใช่ไหมเราก็เอาลงมาใต้ Call ครับผม เสร็จแล้วเรากด ​Control+V ลงไปนะครับผม Control+V หรือ Command+V บน Mac นะครับ Control+V บนวินโดว์ แปะลงไปให้เรียบร้อย ให้ได้ Code สวยงามแบบนี้นะครับผม ส่วนตรง Call To Action เนี่ยไม่ต้องมายุ่งอะไรกับมันนะครับผมตรงนี้แล้วกด Save Change 1 ที

ปัญหาก็คือในการแก้ไขโค้ดเนี่ยถ้าเกิด Code มันเจ๊ง เราจะทำไงครับ ก็กลับไปเริ่มต้นใหม่นะครับผมเริ่มต้น 2 ปุ่มแรกใหม่แล้วค่อยๆ Copy แล้วก็เอามาวางนะครับ โดยการกด Control+C, Control+V ในการ Copy กับ Paste นั่นเองนะครับผม ตอนนี้เรา Save แล้วเดี๋ยวเราไปดูที่หน้าเว็บไซต์ของเรานะครับ

ตอนนี้นะครับสังเกตนะครับ ปุ่มของเราเนี่ยตรงนี้จะมีแค่ Line กับ Facebook นะครับเราไปลอง Refresh ดูนะครับผม นี่กด Refresh ตรงนี้ปึ๋ง แบบนี้เลยโอเค Refresh แล้วนะเสร็จแล้วลองดูนะครับผม เอาโหลดละนะครับผม ปุ่มอยู่นี่เห็นไหมครับนี่ Facebook Line Email แล้วก็ โทรศัพท์นั่นเอง มาแล้วนะครับ

แต่จะสังเกตอย่างนึงนะครับผมเมื่อกี้นี่ เราพยายามจะเรียงลำดับนะครับผม ตัว Code ของเราแต่ว่าไม่เป็นผลนะครับ แต่ว่า developer เนี่ยก็ทำการ Fix Code มาให้เราแล้วนะครับแต่วิธีนี้นะครับวิธีที่จะให้เพิ่มปุ่ม 4 ปุ่มหรือกี่ปุ่มกดตรงนี้เนี่ยจะใช้ได้ก็ต่อเมื่อนะครับผม Developer เนี่ยยังไม่ปิดโค้ดตรงนี้ไปนะครับผม หรือว่ายังไม่เขียนโปรแกรมมาดักหน้าให้ผมตอนนี้เนี่ยเรายังใช้ได้ 4 ปุ่มอยู่ว่าด้วยมาตรฐานเขาให้ใช้แค่ 2 กลุ่มนะครับอันนี้เนี่ยก็เป็นการแก้ไขแบบเขาเรียกว่า Modify Code ไปก่อนนะครับ แต่ว่าเราก็สามารถเอาไปใช้ก่อน

ถ้าวันไหนปุ่มมันเหลือ 2 เนี่ยเราก็ต้องรู้เอาไว้เลยว่า Developer เขาอาจจะปิดช่องทางนี้แล้วก็ได้นะครับผม

เป็นยังไงครับง่ายใช่ไหมครับผมในการใช้ใน WhatsHelp ในการสร้างปุ่ม แชทครับ

เห็นแล้วใช่ไหมครับว่าการทำปุ่มแชทในเว็บไซต์ของเราเนี่ยง่ายนิดเดียวง่ายมากๆเลยนะครับผม ถ้าสมัยก่อนนะครับเราต้องเขียนโปรแกรมสำหรับสร้างปุ่มนี้เนี่ยก็อาจจะกินเวลานานเลย แต่ตอนนี้ครับสร้างง่ายนิดเดียวจริงๆนะครับผม ลองนำไปใช้ดูนะครับแล้วถ้าท่านใดมีคำถามนะครับก็สามารถสอบถามกันเข้ามาได้ที่ คอมเม้นต์ข้างใต้วีดีโอนี้ได้เลยนะครับ แล้วก็อย่าลืมนะครับที่จะกด Subscribe และ กดกระดิ่ง แจ้งเตือน Channel ของเรานะครับเพื่อติดตามรับชมวีดีโอดีๆของเรา ตอนต่อไปด้วยนะครับ สวัสดีครับ.