การฝัง EdCommerce บนเว็บไซต์ภายนอก

Last updated: October 16, 2026

คู่มือฉบับรวมสำหรับการฝังเนื้อหา EdCommerce บนเว็บไซต์ภายนอกและหน้า Landing Page ครอบคลุม 3 วิธี ได้แก่ (1) การฝังแบบฟอร์มเก็บข้อมูลลูกค้า: คัดลอก iframe ของแบบฟอร์มเก็บข้อมูลลูกค้า EdCommerce จาก Settings > Ecommerce > Forms — โดยเลือกตามสำนักงานผ่านเมนู 3 จุด หรือใช้แบบฟอร์มเดียวสำหรับทุกสำนักงานผ่านปุ่ม 'Copy Iframe for Lead Form' ในเมนูด้านบน — แล้ววาง HTML ลงในเว็บไซต์ภายนอกหรือ CMS ใด ๆ เช่น WordPress/Elementor, Shopify หรือ Wix; ปรับแต่งได้โดยแก้ไข URL ของ iframe เพื่อเพิ่มรหัสภาษา (EN, PT, ES, ES_MX, PT_BR, DE, IT, TR, FR, JA, KO) หรือรหัส HEX เพื่อกำหนดสีปุ่มส่ง สามารถฝังภายนอกได้เฉพาะแบบฟอร์มเก็บข้อมูลลูกค้าเท่านั้น — แบบฟอร์มการจองใช้ได้เฉพาะใน EdCommerce — และข้อมูลลูกค้าที่ส่งเข้ามาจะซิงค์กับ Edvisor โดยอัตโนมัติ ระบบจะมอบหมายให้ที่ปรึกษาที่เหมาะสมตามกฎธุรกิจของคุณ และนำไปไว้ในไปป์ไลน์และขั้นตอนที่ถูกต้อง (2) การฝังวิดเจ็ตหลักสูตร: สร้างวิดเจ็ตใน EdCommerce Settings > Widgets ปรับแต่งรูปลักษณ์ แล้ววางข้อมูลโค้ดที่สร้างขึ้นลงในบล็อก HTML พร้อมคำแนะนำทีละขั้นตอนสำหรับ WordPress (Elementor และ Visual Composer), Wix และ Squarespace รวมถึงกรณีการใช้งานต่าง ๆ (3) การเพิ่ม EdCommerce ลงใน WordPress: เชื่อมโยงเว็บไซต์ EdCommerce จากเมนูนำทางของ WordPress ผ่าน Appearance > Menus โดยใช้ Custom Link ไปยัง URL ของ EdCommerce (ดูได้ที่ Settings > EdCommerce > EdCommerce Details) และควรตั้งค่าให้เปิดในแท็บใหม่

ด้วย EdCommerce คุณสามารถนำเนื้อหาของคุณไปไว้บนเว็บไซต์ภายนอกหรือหน้า Landing Page ใด ๆ ก็ได้ — ไม่ว่าจะเป็นการฝังแบบฟอร์มเก็บข้อมูลลูกค้า การฝังวิดเจ็ตหลักสูตร หรือการเพิ่มลิงก์ไปยังเว็บไซต์ EdCommerce ของคุณ บทความนี้ครอบคลุมทั้งสามวิธี

การฝังแบบฟอร์ม EdCommerce

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

ในส่วนนี้เราจะแสดงวิธีฝังแบบฟอร์มเก็บข้อมูลลูกค้าของคุณบนหน้าอื่น ๆ ของเว็บไซต์ เพื่อให้สามารถเก็บข้อมูลลูกค้าได้ไม่เพียงจากร้านค้าออนไลน์ของคุณ แต่จากหน้าเว็บใด ๆ ก็ได้

\ข้อมูลลูกค้าเหล่านี้จะถูกซิงโครไนซ์กับบัญชี Edvisor ของคุณ จากนั้นระบบจะมอบหมายให้ที่ปรึกษาที่เหมาะสมโดยอัตโนมัติ และเพิ่มลงในไปป์ไลน์และขั้นตอนที่เหมาะสม*

*หากคุณยังไม่ได้ตั้งค่าแบบฟอร์ม โปรดกลับไปดูบทความนี้เพื่อเรียนรู้วิธีตั้งค่าและปรับแต่งแบบฟอร์มภายในเว็บไซต์ EdCommerce ของคุณ

**โปรดทราบว่าเฉพาะ แบบฟอร์มเก็บข้อมูลลูกค้า เท่านั้นที่สามารถฝังบนเว็บไซต์ของคุณได้ แบบฟอร์มการจองใช้ได้เฉพาะใน EdCommerce

วิธีฝังแบบฟอร์ม EdCommerce ของคุณบนหน้า Landing Page หรือเว็บไซต์ใด ๆ

ไปที่: Settings > Ecommerce > Forms.

จากนั้น คลิกไอคอน 3 จุด ถัดจากสำนักงานแต่ละแห่ง แล้วเลือก 'Copy Iframe for Lead Form' หากคุณต้องการฝังแบบฟอร์มที่สร้างขึ้นสำหรับสำนักงานใดสำนักงานหนึ่งโดยเฉพาะ

หรือคลิกปุ่ม 'Copy Iframe for Lead Form' จากเมนูด้านบนเพื่อฝังแบบฟอร์มเดียวสำหรับทุกสำนักงาน

คุณจะได้รับโค้ด HTML เพื่อคัดลอกและวางลงในเว็บไซต์ของคุณ

หากคุณกำลังใช้ CMS เช่น WordPress (พร้อมเครื่องมือสร้างเว็บไซต์อย่าง Elementor หรือ Visual Composer), Shopify หรือ Wix โดยทั่วไปแพลตฟอร์มเหล่านี้จะมีวิธีที่ง่ายในการฝังสิ่งต่าง ๆ ด้วยโค้ด HTML

โดยปกติจะเป็นวิดเจ็ตหรือรายการในกล่องเครื่องมือที่คุณสามารถลากและวางได้อย่างง่ายดาย

ตัวอย่างเช่น หากคุณใช้เครื่องมือสร้างเว็บไซต์อย่าง Elementor คุณสามารถเพิ่มสิ่งนี้ผ่านวิดเจ็ต HTML ได้

วิธีปรับแต่งภาษาของแบบฟอร์ม

หากคุณต้องการกำหนดภาษาของแบบฟอร์มเก็บข้อมูลลูกค้าเป้าหมาย ให้เพิ่มรหัสภาษาที่ท้าย URL ภายในโค้ด HTML:

ตัวอย่าง:

src="https://dev-virtual.edvisor.io/edvisor/ecommerce-campaign/lead-form-iframe/en"

ดูรหัสภาษาสำหรับภาษาต่าง ๆ ที่มีให้บริการได้ที่นี่:

EN = ภาษาอังกฤษ
PT = ภาษาโปรตุเกส
ES = ภาษาสเปน
ES_MX = ภาษาสเปนแบบละตินอเมริกา
PT_BR = ภาษาโปรตุเกสแบบบราซิล
DE = ภาษาเยอรมัน
IT = ภาษาอิตาลี
TR = ภาษาตุรกี
FR = ภาษาฝรั่งเศส
JA = ภาษาญี่ปุ่น
KO = ภาษาเกาหลี

วิธีปรับแต่งสีปุ่มของแบบฟอร์ม

คุณยังสามารถปรับสีปุ่ม 'ส่ง' ในแบบฟอร์มเก็บข้อมูลลูกค้าเป้าหมายที่ฝังไว้ให้เข้ากับแบรนด์ของคุณได้อีกด้วย โดยทำได้ง่าย ๆ ดังนี้:

ค้นหารหัส HEX ของสีแบรนด์ของคุณ (ตัวอย่างเช่น #4EB2F4)
เพิ่มรหัส HEX นี้ลงใน URL ของแบบฟอร์มที่คุณต้องการฝัง

ตัวอย่างเช่น หากคุณต้องการใช้สีที่มีรหัส HEX เป็น #4EB2F4 URL ของคุณจะมีลักษณะดังนี้:

<iframe title="Lead Form"
    src="https://virtual.edvisor.io/nuevalengua/cotizador/lead-form-iframe/en/4EB2F4/9447"
    width="500"
    height="900"
    frameborder="0"
    allowfullscreen="true">
</iframe>

เพียงแทนที่ #4EB2F4 ด้วยรหัสสี HEX ที่กำหนดเองของคุณ แล้วดูผลลัพธ์อันน่าทึ่งได้เลย!

เมื่อนักเรียนกรอกแบบฟอร์มใดแบบฟอร์มหนึ่งเสร็จสมบูรณ์ ข้อมูลลูกค้าเป้าหมายจะถูกมอบหมายให้กับที่ปรึกษาที่เหมาะสมตามกฎทางธุรกิจที่กำหนดไว้ในการตั้งค่า EdCommerce ของคุณ นอกจากนี้ ข้อมูลลูกค้าเป้าหมายเหล่านี้จะซิงโครไนซ์กับบัญชี Edvisor ของคุณ และถูกเพิ่มไปยังไปป์ไลน์และระยะที่ถูกต้อง

การฝังหลักสูตร EdCommerce

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

ซึ่งหมายความว่าคุณจะได้รับประโยชน์สูงสุดจากทั้งสองด้าน ทั้งฟังก์ชันการทำงานของเว็บไซต์ปัจจุบันและฟีเจอร์อันทรงพลังของ EdCommerce

คุณสามารถทำได้โดยการสร้างและฝังวิดเจ็ต มาดูกันว่าต้องทำอย่างไร

วิธีสร้างวิดเจ็ต EdCommerce

เข้าสู่การตั้งค่า EdCommerce: เข้าสู่ระบบบัญชี EdCommerce ของคุณและไปที่ส่วน 'การตั้งค่า'
สร้างวิดเจ็ต: ในเมนูด้านซ้าย เลือก 'วิดเจ็ต' จากนั้นเลือก 'สร้างวิดเจ็ตใหม่'
กรอกรายละเอียดวิดเจ็ต: กรอกแบบฟอร์มด้วยชื่อวิดเจ็ต ภาษาที่ต้องการ สกุลเงิน และสัญชาติของนักเรียน
เลือกเนื้อหา: เลือกโปรแกรมหรือผู้ให้บริการการศึกษาที่ต้องการแสดงในวิดเจ็ต เพียงคลิกที่ "โปรแกรม" หรือ "ผู้ให้บริการ" แล้วเลือกสิ่งที่ต้องการแสดงจากรายการทางด้านขวา
ปรับแต่งรูปลักษณ์: ปรับรูปลักษณ์ของวิดเจ็ตโดยแก้ไขรูปแบบฟอนต์ สีพื้นหลัง และเงาของกล่องให้เข้ากับดีไซน์เว็บไซต์ของคุณ คุณยังสามารถปรับระยะห่างภายในเพื่อให้พอดียิ่งขึ้นได้โดยคลิกไอคอนรูปสี่เหลี่ยมภายในตัวอย่างวิดเจ็ต
บันทึกวิดเจ็ต: เมื่อพอใจกับการตั้งค่าแล้ว ให้คลิก 'บันทึก'

หลังจากบันทึกวิดเจ็ตแล้ว คุณจะได้รับโค้ดสั้น ๆ

คุณต้องเพิ่มโค้ดนี้ลงในเว็บไซต์ของคุณ อ่านต่อเพื่อดูวิธีการ

วิธีเพิ่มวิดเจ็ต EdCommerce ลงในเว็บไซต์ของคุณ

เพียงเปิดหน้าเว็บไซต์ที่คุณต้องการวางวิดเจ็ตนี้ แล้วแทรกกล่อง HTML พร้อมโค้ด

วิธีเพิ่มโค้ดอาจแตกต่างกันไปตาม CMS ของเว็บไซต์ (เช่น WordPress หรือ Wix) โดยทั่วไป โปรแกรมแก้ไขเว็บไซต์ทั้งหมดจะอนุญาตให้คุณลากและวางกล่อง HTML ได้

ตัวอย่างมีดังนี้:

WordPress (ด้วย Elementor):

เปิดหน้าที่คุณต้องการแก้ไขด้วย Elementor
ลากวิดเจ็ต 'HTML' จากแผงด้านซ้ายไปยังตำแหน่งบนหน้าที่คุณต้องการวางวิดเจ็ต
วางโค้ดสั้น EdCommerce ลงในกล่องโค้ด HTML
คลิก 'อัปเดต' เพื่อบันทึกการเปลี่ยนแปลง

WordPress (ด้วย Visual Composer):

แก้ไขหน้าที่คุณต้องการใส่วิดเจ็ต
คลิกปุ่ม '+' เพื่อเพิ่มองค์ประกอบใหม่
เลือก 'HTML ดิบ' หรือ 'HTML แบบกำหนดเอง' จากองค์ประกอบเนื้อหา
วางโค้ดสั้น EdCommerce ลงในกล่องข้อความ
บันทึกการเปลี่ยนแปลงโดยคลิก 'อัปเดต' บนหน้า

Wix:

ไปยังหน้าที่คุณต้องการแก้ไขใน Wix Editor
คลิก 'เพิ่ม' (+) ทางด้านซ้ายของโปรแกรมแก้ไข แล้วเลือก 'เพิ่มเติม'
เลือก 'HTML iframe' จากเมนูแบบเลื่อนลง
คลิก 'ป้อนโค้ด' จากนั้นวางโค้ดสั้น EdCommerce ลงในกล่องการตั้งค่า HTML
คลิก 'นำไปใช้' เพื่อบันทึกและดูวิดเจ็ตบนหน้าของคุณ

Squarespace:

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

หากคุณไม่พบโมดูล HTML ในโปรแกรมแก้ไขของคุณ ให้ลองทำโดยแก้ไขโค้ดของโมดูล 'ข้อความแบบสมบูรณ์'

กรณีการใช้งาน

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

ตัวอย่างต่อไปนี้แสดงให้เห็นว่า EdCommerce widgets สามารถนำไปใช้งานอย่างสร้างสรรค์บนเว็บไซต์ของคุณได้อย่างไร:

การเพิ่มประสิทธิภาพโพสต์บล็อก:

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

หน้าอีเวนต์:

สำหรับหน้าเว็บที่โปรโมตงานมหกรรมการศึกษาหรือการสัมมนาผ่านเว็บ ให้ฝังวิดเจ็ตเพื่อแสดงหลักสูตรหรือสถาบันที่เข้าร่วมงาน วิธีนี้ช่วยให้ผู้เข้าชมเห็นภาพล่วงหน้าว่าจะพบกับอะไร และสามารถกระตุ้นให้เกิดการลงทะเบียนหรือสอบถามข้อมูลเพิ่มเติม

หน้าเฉพาะสถานที่:

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

หน้าขอบคุณสำหรับการสมัครรับจดหมายข่าว:

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

ระหว่างแคมเปญส่งเสริมการขาย:

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

การเพิ่ม EdCommerce ลงใน WordPress

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

ขั้นตอนที่ 1

เข้าสู่ แผงควบคุมผู้ดูแลระบบ ของ WordPress และไปที่ส่วน "รูปลักษณ์" จากนั้นคลิก "เมนู"

ขั้นตอนที่ 2

ในส่วน "เมนู" ให้ไปที่ "ลิงก์แบบกำหนดเอง" และกรอก URL ของแพลตฟอร์ม EdCommerce รวมถึงข้อความ CTA ที่คุณต้องการให้แสดงในเมนูเว็บไซต์ของคุณ

จากนั้นคลิก "เพิ่มลงในเมนู" เพื่อเพิ่มรายการใหม่นี้ลงในเมนูหลักของคุณ

หากต้องการค้นหา URL ของ EdCommerce ให้ไปที่ส่วนการตั้งค่าบนแพลตฟอร์มของคุณ คลิก "EdCommerce" จากนั้นคลิก "รายละเอียด EdCommerce"

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