เอปิแอนท์

วิธีเพิ่มวิดเจ็ตการจอง Mindbody ลงในร้านค้า Shopify ของคุณ

ลูกค้าของคุณควรจะสามารถซื้อคลาสเรียนบนร้านค้า Shopify ของคุณและจองได้ภายในไม่กี่นาที นี่คือวิธีการเชื่อมต่อทั้งสองอย่างเข้าด้วยกันโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียวหากคุณไม่เข้าใจ

โลโก้ Shopify ที่เชื่อมต่อผ่านปฏิทินการจองเรืองแสงไปยังโลโก้ Mindbody

ลูกค้าพบสตูดิโอของคุณทางออนไลน์ เข้าไปที่ร้านค้า Shopify ของคุณ และซื้อแพ็คเกจ 10 คลาส เยี่ยมมาก แล้วต่อล่ะ? ในหลายๆ กรณี ประสบการณ์ของลูกค้ามักจะหยุดชะงักตรงนั้น ลูกค้าจ่ายเงินแล้ว แต่ไม่มีวิธีที่ชัดเจนในการจองคลาส และไม่กี่นาทีต่อมา พวกเขาก็ได้รับอีเมลใส่รหัสผ่านที่ทำให้สับสนจากบริษัทชื่อ "Mindbody" ที่พวกเขาไม่เคยได้ยินมาก่อน

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

คุณไม่จำเป็นต้องเป็นนักพัฒนา หากคุณสามารถแก้ไขหน้าเว็บใน Shopify ได้ คุณก็ทำทุกอย่างนี้ได้แล้ว


ส่วนที่ 1: เพิ่มวิดเจ็ตการจอง Mindbody ลงในร้านค้า Shopify ของคุณ

เป้าหมายของเรานั้นง่ายมาก: คือการสร้างหน้า "จองตอนนี้" บนร้านค้า Shopify ของคุณ ที่แสดงตารางเวลา Mindbody แบบเรียลไทม์ เพื่อให้ลูกค้าสามารถจองได้โดยไม่ต้องออกจากเว็บไซต์ของคุณ

สิ่งที่คุณต้องเตรียมก่อนเป็นอันดับแรก

  • จิตใจและร่างกายของคุณ เว็บไซต์แบรนด์ โค้ดตัวอย่างสำหรับวิดเจ็ต (คุณจะได้รับโค้ดนี้จากบัญชี Mindbody ของคุณ)
  • แพ็กเกจ Shopify พร้อมร้านค้าออนไลน์ (Basic, Grow, Advanced หรือ Plus)
  • สิทธิ์การเข้าถึงระดับผู้ดูแลระบบสำหรับร้านค้า Shopify ของคุณ
  • ธีมร้านค้าออนไลน์เวอร์ชั่น 2.0 (เช่น Dawn)

ถ้าคุณมีทุกอย่างครบแล้ว คุณก็พร้อมแล้ว

ขั้นตอนที่ 1: สร้างหน้าเว็บ

ในหน้าผู้ดูแลระบบ Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ → หน้าเว็บ → เพิ่มหน้าเว็บ.

ตั้งชื่อหน้าเพจว่า “จองเลย” ชื่อนี้จะสร้างที่อยู่เว็บเพจขึ้นมาด้วย คุณสามารถเพิ่มคำนำสั้นๆ ในช่องเนื้อหาได้หากต้องการ จากนั้นคลิก บันทึก.

หน้าจอ Shopify Pages โดยมีปุ่ม Add page ถูกไฮไลต์อยู่

ขั้นตอนที่ 2: สร้างเทมเพลตแบบกำหนดเอง

ขณะที่คุณกำลังแก้ไขหน้าเว็บอยู่ ให้ดูที่ด้านขวามือสำหรับ... แม่แบบ เมนูแบบเลื่อนลง คลิกแล้วเลือก สร้างเทมเพลต.

ตั้งชื่อเทมเพลตตามชื่อหน้าเว็บของคุณ (ตัวอย่างเช่น “จองตอนนี้”) และใช้ หน้าเริ่มต้น เป็นฐาน คลิก บันทึก.

วิธีนี้จะทำให้หน้าการจองของคุณมีเทมเพลตเฉพาะ คุณจึงสามารถเพิ่มวิดเจ็ตลงไปได้โดยไม่ส่งผลกระทบต่อส่วนอื่นๆ ของร้านค้าของคุณ

ขั้นตอนที่ 3: เพิ่มโค้ดวิดเจ็ตด้วยส่วน Liquid แบบกำหนดเอง

ตอนนี้ไปที่ ร้านค้าออนไลน์ → ธีม และคลิก ปรับแต่ง บนธีมสดของคุณ

ใช้เมนูแบบเลื่อนลงด้านบนเพื่อเลือกหน้าและเทมเพลตใหม่ที่คุณเพิ่งสร้าง ในแผงด้านซ้าย ให้คลิก เพิ่มส่วน → ของเหลวแบบกำหนดเอง.

วางโค้ดวิดเจ็ตการจอง Mindbody ของคุณลงในช่อง โค้ดจะมีลักษณะดังนี้:

<div class="mindbody-widget" data-widget-type="Schedules" data-widget-id="XXXXXXXXXXX"></div>
<script async src="https://brandedweb.mindbodyonline.com/embed/widget.js"></script>

เปลี่ยน XXXXXXXXXXX โดยใช้รหัสวิดเจ็ตของคุณเองจาก Mindbody คลิก บันทึกและตัวอย่างวิดเจ็ตการจองจะปรากฏขึ้นทันที

ตัวแก้ไขธีม Dawn: ส่วน Liquid แบบกำหนดเองที่เก็บโค้ดวิดเจ็ต Mindbody โดยตารางเรียนจะแสดงผลแบบเรียลไทม์ในหน้าตัวอย่าง

ขั้นตอนที่ 4: เปิดใช้งานหน้าเว็บ

กลับไปที่ ร้านค้าออนไลน์ → หน้าเว็บ และเปิดหน้าเว็บของคุณ

ชุด การมองเห็น → มองเห็นได้จากนั้นคลิก บันทึกกรุณาเข้าชมที่อยู่เว็บเพจเพื่อตรวจสอบว่าวิดเจ็ตโหลดถูกต้องและตารางเวลาของคุณแสดงขึ้นหรือไม่

หน้า Landing Page "จองเลย" ของ Shopify ที่มีคำอธิบายวิธีการจอง ลิงก์ไปยังบริการต่างๆ และวิดเจ็ตการจองของ Mindbody Schedules

ขั้นตอนที่ 5: เพิ่มหน้าเพจลงในเมนูร้านค้าของคุณ

ขั้นตอนสุดท้าย: ทำให้หน้าเว็บค้นหาได้ง่าย ไปที่ ร้านค้าออนไลน์ → เมนูนำทาง และเปิดของคุณ เมนูหลัก.

คลิก เพิ่มรายการเมนูตั้งชื่อว่า “จองตอนนี้” และเชื่อมโยงไปยังหน้าเว็บที่คุณสร้างไว้ คลิก เพิ่ม, แล้ว บันทึก.

หน้าจอการนำทางของ Shopify แสดงเมนูหลักพร้อมรายการ "จองตอนนี้" ที่เพิ่มเข้ามาใหม่

แค่นั้นเอง ลูกค้าสามารถจองได้โดยตรงจากร้านค้าของคุณแล้ว

(ไม่บังคับ): เพิ่มหน้าลงทะเบียนด้วยก็ได้

หากคุณต้องการหน้าลงทะเบียนด้วย ให้ทำซ้ำขั้นตอนที่ 1 ถึง 4 โดยใช้โค้ดวิดเจ็ตลงทะเบียนนี้แทน:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>
<healcode-widget data-type="registrations" data-widget-partner="object" data-widget-id="XXXXXXXXXXX" data-widget-version="0"></healcode-widget>

จากนั้นเชื่อมโยงทั้งสองหน้าเข้าด้วยกัน เพื่อให้ลูกค้าสามารถสลับไปมาระหว่างการจองและการลงทะเบียนได้อย่างง่ายดาย


ส่วนที่ 2: การขายสินค้าบน Shopify โดยไม่ต้องใช้ระบบประมวลผลการชำระเงิน Mindbody

ในบางภูมิภาค บริการประมวลผลการชำระเงินของ Mindbody อาจไม่พร้อมใช้งาน ซึ่งหมายความว่าคุณไม่สามารถรับชำระเงินผ่าน Mindbody ได้โดยตรง ข่าวดีก็คือ คุณยังคงสามารถขายบริการ แพ็กเกจ และการเป็นสมาชิกบน Shopify ได้ และทุกอย่างจะถูกส่งไปยัง Mindbody อย่างถูกต้อง ขั้นตอนการทำงานจะเปลี่ยนไปเล็กน้อย คือ “ซื้อก่อน จองทีหลัง”

ขั้นตอนการทำงานเป็นอย่างไร

  1. ลูกค้าซื้อบริการ แพ็กเกจ หรือสมัครสมาชิกในร้านค้า Shopify ของคุณ
  2. ร้านค้าเชื่อมต่อ ระบบจะสร้างหรือจับคู่ข้อมูลลูกค้าใน Mindbody และบันทึกการซื้อ เพื่อให้ยอดเครดิตของลูกค้าถูกบันทึกไว้ใน Mindbody เรียบร้อยแล้ว
  3. จากนั้นลูกค้าจะล็อกอินเข้าสู่ Mindbody เพื่อทำการจองนัดหมายหรือคลาสเรียนจริง

ShopConnect คือระบบที่เชื่อมต่อสองระบบเข้าด้วยกัน ลูกค้าชำระเงินใน Shopify และ ShopConnect จะตรวจสอบให้แน่ใจว่าการซื้อนั้นปรากฏในบัญชีลูกค้าที่ถูกต้องใน Mindbody โดยที่คุณไม่ต้องป้อนข้อมูลซ้ำอีก

จุดบกพร่องเพียงจุดเดียว และวิธีแก้ไขให้ราบรื่น

มีช่วงเวลาหนึ่งที่อาจทำให้ลูกค้าสับสนหากคุณไม่เตรียมตัวรับมือ หลังจากที่พวกเขาชำระเงินในร้านค้า Shopify ของคุณแล้ว Mindbody จะส่งอีเมลรหัสผ่านไปให้ สำหรับลูกค้าที่ไม่เคยได้ยินชื่อ "Mindbody" มาก่อน อีเมลนั้นอาจดูเหมือนสแปม และพวกเขาอาจเพิกเฉย จากนั้นพวกเขาก็จะสงสัยว่าคลาสเรียนของพวกเขาอยู่ที่ไหน

วิธีแก้ไขคือการสื่อสาร เอกสารแนะนำให้ใช้เพียงช่องทางเดียว ข้อความหลัก คุณสามารถนำรูปแบบนี้มาใช้ซ้ำในอีเมลที่ลูกค้าได้รับหลังการซื้อสินค้า:

“ขอบคุณที่ทำการสั่งซื้อสินค้าจากร้านค้าออนไลน์ของเรา! โปรดตรวจสอบอีเมลรหัสผ่านของคุณจากระบบจองออนไลน์ของเรา” มินด์บอดี้ออนไลน์เมื่อตั้งรหัสผ่านเสร็จแล้ว ให้คลิก ที่นี่ เพื่อจองนัดหมายหรือคลาสเรียนของคุณ”

คำว่า “ที่นี่” จะเชื่อมโยงไปยังหน้าการจองของคุณ (หน้า “จองตอนนี้” ของ Shopify ที่คุณสร้างไว้ในส่วนที่ 1 หรือหน้าที่เทียบเท่ากันบนเว็บไซต์อื่น)

ควรส่งข้อความไปที่ใด: อีเมลสามฉบับ

ข้อความหลักจะถูกปรับเปลี่ยนให้เหมาะสมกับอีเมลทั้งสามฉบับที่ลูกค้าได้รับหลังจากการซื้อสินค้า

อีเมลฉบับที่ 1: อีเมลยืนยันคำสั่งซื้อจาก Shopify ใน Shopify ให้ไปที่ การตั้งค่า → การแจ้งเตือน → การยืนยันคำสั่งซื้อเพิ่มข้อความหลักไว้ใกล้ส่วนบนของอีเมล เหนือสรุปคำสั่งซื้อ วิธีนี้จะช่วยกำหนดความคาดหวังของลูกค้าตั้งแต่ตอนที่พวกเขายังให้ความสนใจอยู่ขณะชำระเงิน

อีเมลฉบับที่ 2: อีเมลแจ้งเตือน "ลืมข้อมูลการเข้าสู่ระบบ" จาก Mindbody นี่คืออีเมลอัตโนมัติที่ใช้ร่วมกัน ดังนั้นคุณไม่สามารถแทนที่เนื้อหาทั้งหมดได้ แต่ให้เพิ่มบล็อกเงื่อนไขต่อท้ายเนื้อหาเดิมแทน:

คุณเพิ่งสั่งซื้อสินค้าจากร้านค้าออนไลน์ของเราใช่ไหม? หลังจากเข้าสู่ระบบด้วยข้อมูลข้างต้นแล้ว ให้คลิก ที่นี่ เพื่อสำรองนัดหมายหรือคลาสที่คุณซื้อไว้ การซื้อของคุณได้ถูกบันทึกไว้เรียบร้อยแล้ว

คุณจะพบสิ่งนี้ได้ในการตั้งค่าอีเมลอัตโนมัติของ Mindbody Business ระบบจะให้ข้อมูลการเข้าสู่ระบบแก่ลูกค้า พร้อมเชื่อมโยงกลับไปยังการซื้อสินค้าที่ลูกค้าเพิ่งทำไป

อีเมลฉบับที่ 3: อีเมลต้อนรับจาก Mindbody แก้ไขเวอร์ชันโหมดธุรกิจ เนื่องจาก ShopConnect สร้างไคลเอ็นต์ในโหมดธุรกิจ เพิ่มบล็อกประเภทเดียวกัน:

คุณเพิ่งสั่งซื้อสินค้าจากร้านค้าออนไลน์ของเราใช่ไหม? เข้าสู่ระบบบัญชีของคุณ จากนั้นคลิก ที่นี่ เพื่อสำรองนัดหมายหรือคลาสที่คุณซื้อไว้ การซื้อของคุณได้ถูกบันทึกไว้เรียบร้อยแล้ว

สิ่งนี้ปรากฏอยู่ในอีเมลอัตโนมัติของ Mindbody Business ด้วยเช่นกัน โดยจะเน้นย้ำขั้นตอนการจองระหว่างขั้นตอนการเริ่มต้นใช้งาน

ลิงก์ “ที่นี่” แต่ละลิงก์ควรนำลูกค้าไปยังหน้าเว็บที่มีวิดเจ็ตการจองออนไลน์ของ Mindbody ที่ฝังอยู่ คุณมีสองตัวเลือก:

  • หน้า Shopify (ต้องใช้แพ็กเกจ Basic หรือสูงกว่า ไม่สามารถใช้ได้กับแพ็กเกจ Starter) นี่คือหน้า "จองตอนนี้" จากส่วนที่ 1 อย่างแท้จริง
  • เว็บไซต์ภายนอก หากหน้าจองของคุณอยู่บน Squarespace, Wix, WordPress หรือแพลตฟอร์มอื่น ให้ฝังวิดเจ็ตลงในแพลตฟอร์มนั้น แล้วชี้ลิงก์ไปยังวิดเจ็ตนั้นแทน

ไม่ว่าจะอย่างไรก็ตาม มันก็คือหน้าเดียวกันกับที่แสดงไว้ตอนท้ายของส่วนที่ 1: ข้อความอธิบายอยู่ด้านบน และวิดเจ็ตการจองอยู่ด้านล่าง

สถานที่ที่ควรค่าแก่การรู้จัก

ShopConnect ประกอบด้วย Send_mbo_password_reset_email การตั้งค่าที่ควบคุมว่า ShopConnect จะส่งอีเมลรีเซ็ต mật รหัสผ่านไปยัง Mindbody โดยอัตโนมัติหรือไม่ ควรทราบว่ามีการตั้งค่านี้อยู่ เพื่อให้คุณสามารถปรับข้อความอีเมลของคุณให้ตรงกับสิ่งที่ส่งไปจริงได้


เหตุใดเรื่องนี้จึงสำคัญ

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

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

บทสรุป

  • วิดเจ็ตการจองเป็นขั้นตอนการทำงานห้าขั้นตอนของ Shopify สร้างหน้าเว็บ เลือกเทมเพลต ใส่โค้ดวิดเจ็ต Mindbody ของคุณผ่าน Custom Liquid ตั้งค่าให้มองเห็นได้ และเพิ่มลงในเมนูของคุณ
  • คุณสามารถขายสินค้าบน Shopify ได้โดยไม่ต้องใช้ระบบประมวลผลการชำระเงินของ Mindbody ขั้นตอนจะเป็น “ซื้อก่อน จองทีหลัง” และ ShopConnect จะบันทึกการซื้อแต่ละครั้งลงในบัญชีลูกค้า Mindbody ที่ถูกต้องโดยอัตโนมัติ
  • การสื่อสารคือหัวใจสำคัญของกระบวนการที่ไม่ต้องมีการประมวลผลการชำระเงิน ข้อความหลักเพียงข้อความเดียวที่ปรับเปลี่ยนให้เหมาะสมกับอีเมลทั้งสามฉบับ จะช่วยป้องกันความสับสนเรื่อง "อีเมลรหัสผ่าน Mindbody นี้คืออะไร?"
  • ลิงก์ "ที่นี่" และวิดเจ็ตการจองของคุณควรอยู่ในหน้าเดียวกัน สร้างครั้งเดียว แล้วเชื่อมโยงไปยังทุกที่

กำลังใช้งาน ShopConnect อยู่และต้องการความช่วยเหลือในการเชื่อมต่อร้านค้า Shopify กับ Mindbody ใช่ไหม? ติดต่อทีม APIANT ได้เลย เรายินดีให้คำแนะนำและช่วยเหลือคุณอย่างเต็มที่