Menyematkan EdCommerce di situs web eksternal

Last updated: October 16, 2026

Panduan lengkap untuk menyematkan konten EdCommerce di situs web eksternal dan halaman arahan, mencakup tiga metode. (1) Menyematkan formulir prospek: salin iframe formulir prospek EdCommerce dari Pengaturan > Ecommerce > Formulir — baik per kantor melalui menu 3 titik maupun satu formulir untuk semua kantor melalui tombol 'Salin Iframe untuk Formulir Prospek' di menu atas — lalu tempelkan HTML tersebut ke situs web eksternal atau CMS apa pun seperti WordPress/Elementor, Shopify, atau Wix; sesuaikan dengan mengedit URL iframe untuk menambahkan kode bahasa (EN, PT, ES, ES_MX, PT_BR, DE, IT, TR, FR, JA, KO) atau kode HEX untuk mengatur warna tombol Kirim. Hanya formulir prospek yang dapat disematkan secara eksternal — formulir pemesanan hanya tersedia di EdCommerce — dan prospek yang dikirim akan disinkronkan ke Edvisor, secara otomatis ditugaskan kepada konselor yang tepat sesuai aturan bisnis Anda, serta masuk ke pipeline dan tahap yang benar. (2) Menyematkan widget program: buat widget di Pengaturan EdCommerce > Widget, sesuaikan tampilannya, lalu tempelkan cuplikan kode yang dihasilkan ke blok HTML, dengan petunjuk langkah demi langkah untuk WordPress (Elementor dan Visual Composer), Wix, dan Squarespace, serta contoh penggunaannya. (3) Menambahkan EdCommerce ke WordPress: tautkan situs EdCommerce dari menu navigasi WordPress melalui Tampilan > Menu menggunakan Tautan Kustom ke URL EdCommerce Anda (ditemukan di Pengaturan > EdCommerce > Detail EdCommerce), sebaiknya diatur agar terbuka di tab baru.

Dengan EdCommerce, Anda dapat membawa konten Anda ke situs web eksternal atau halaman arahan mana pun — baik dengan menyematkan formulir prospek, menyematkan widget program, maupun menambahkan tautan ke situs EdCommerce Anda. Artikel ini membahas ketiganya.

Menyematkan formulir EdCommerce

EdCommerce menawarkan fitur canggih yang memungkinkan Anda membuat dan mempersonalisasi berbagai formulir prospek dan pemesanan, sehingga memudahkan Anda mengumpulkan informasi yang tepat dari prospek dan pemesan Anda.

Di sini kami akan menunjukkan cara menyematkan formulir prospek Anda di halaman lain pada situs web, sehingga Anda dapat mengumpulkan prospek tidak hanya dari toko online, tetapi dari halaman web mana pun.

\Prospek ini kemudian akan disinkronkan dengan akun Edvisor Anda, secara otomatis ditugaskan kepada konselor yang tepat, dan ditambahkan ke pipeline serta tahap yang sesuai.*

*Jika Anda belum mengonfigurasi formulir, lihat kembali artikel ini untuk mempelajari cara menyiapkan dan mempersonalisasi formulir di dalam situs EdCommerce Anda.

**Harap diperhatikan bahwa hanya formulir prospek yang dapat disematkan di situs web Anda. Formulir pemesanan hanya tersedia untuk EdCommerce.

Cara menyematkan formulir EdCommerce di halaman arahan atau situs web mana pun

  • Buka: Pengaturan > Ecommerce > Formulir.

Kemudian, klik ikon 3 titik di sebelah setiap kantor, lalu pilih 'Salin Iframe untuk Formulir Prospek' jika Anda ingin menyematkan formulir yang dibuat untuk kantor tertentu.

Atau cukup klik tombol 'Salin Iframe untuk Formulir Prospek' dari menu atas untuk menyematkan satu formulir unik (untuk semua kantor Anda).

Anda akan mendapatkan kode HTML untuk disalin dan ditempelkan di situs web Anda.

Jika Anda menggunakan CMS seperti WordPress (dengan pembuat situs seperti Elementor atau Visual Composer), Shopify, atau Wix, biasanya tersedia metode sederhana untuk menyematkan berbagai hal dengan cuplikan kode HTML.

Biasanya ini berupa widget atau item di kotak alat yang dapat Anda seret dan lepas.

Misalnya, jika Anda menggunakan pembuat situs seperti Elementor, Anda dapat menambahkannya melalui widget HTML-nya.

Cara menyesuaikan bahasa formulir Anda

Jika Anda ingin menentukan bahasa formulir prospek, tambahkan kode bahasa di akhir URL di dalam kode HTML:

Contoh:

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

Di sini Anda dapat melihat kode bahasa untuk berbagai bahasa yang tersedia:

  • EN = Inggris
  • PT = Portugis
  • ES = Spanyol
  • ES_MX = Spanyol Amerika Latin
  • PT_BR = Portugis Brasil
  • DE = Jerman
  • IT = Italia
  • TR = Turki
  • FR = Prancis
  • JA = Jepang
  • KO = Korea

Cara menyesuaikan warna tombol formulir Anda

Anda juga dapat mempersonalisasi warna tombol 'Kirim' pada formulir prospek yang disematkan agar sesuai dengan merek Anda. Caranya sederhana:

  1. Temukan kode HEX warna merek Anda (Contoh #4EB2F4).
  2. Tambahkan kode HEX ini ke URL formulir yang ingin Anda sematkan.

Misalnya, jika Anda ingin menggunakan warna dengan kode HEX #4EB2F4, URL Anda akan terlihat seperti ini:

<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>

Cukup ganti #4EB2F4 dengan kode warna HEX kustom Anda untuk melihat hasilnya!

Setelah seorang siswa mengisi salah satu formulir ini, prospek akan ditugaskan kepada konselor yang tepat berdasarkan aturan bisnis yang ditetapkan di pengaturan EdCommerce Anda. Prospek ini juga disinkronkan dengan akun Edvisor Anda, dan ditambahkan ke pipeline serta tahap yang benar.

Menyematkan program EdCommerce

Dengan EdCommerce, Anda tidak hanya dapat membuat halaman arahan e-commerce yang menarik dan bahkan membuat situs web lengkap, tetapi Anda juga dapat dengan mudah mengintegrasikan fitur-fiturnya yang canggih ke dalam situs web apa pun yang sudah ada yang Anda gunakan.

Ini berarti Anda mendapatkan yang terbaik dari kedua dunia – fungsionalitas situs web Anda saat ini dan fitur-fitur canggih EdCommerce.

Anda dapat melakukannya dengan membuat dan menyematkan widget. Mari kita lihat caranya.

Cara membuat widget EdCommerce

  1. Akses Pengaturan EdCommerce Anda: Masuk ke akun EdCommerce Anda dan buka bagian 'Pengaturan'.
  2. Buat Widget: Di menu sebelah kiri, pilih 'Widget', lalu 'Buat widget baru'.
  3. Isi Detail Widget: Lengkapi formulir dengan nama widget, bahasa pilihan, mata uang, dan kewarganegaraan siswa.
  4. Pilih konten: Pilih program atau penyedia pendidikan yang ingin ditampilkan di widget Anda. Cukup klik "Program" atau "Penyedia" dan pilih yang ingin Anda tampilkan dari daftar di sebelah kanan.
  5. Sesuaikan Tampilan: Sesuaikan tampilan widget dengan mengedit gaya font, warna latar belakang, dan bayangan kotak agar sesuai dengan desain situs web Anda. Anda juga dapat mengubah padding agar lebih pas dengan mengeklik ikon persegi di dalam pratinjau widget.
  6. Simpan Widget Anda: Setelah puas dengan pengaturannya, klik 'Simpan'.

Setelah menyimpan widget, Anda akan mendapatkan potongan kode.

Kode ini perlu ditambahkan ke situs web Anda, teruslah membaca untuk mengetahui caranya.

Cara menambahkan widget EdCommerce ke situs Anda

Cukup buka halaman di situs web tempat Anda ingin menempatkan widget ini dan masukkan kotak HTML dengan kode tersebut.

Tergantung pada CMS situs web Anda (seperti WordPress atau Wix), cara menambahkan kode ini mungkin berbeda. Umumnya, semua editor situs web memungkinkan Anda menyeret dan melepaskan kotak HTML.

Berikut beberapa contohnya:

WordPress (dengan Elementor):

  • Buka halaman yang ingin Anda edit dengan Elementor.
  • Seret widget 'HTML' dari panel sebelah kiri ke halaman tempat Anda ingin menempatkan widget.
  • Tempelkan potongan kode EdCommerce ke dalam kotak kode HTML.
  • Klik 'Perbarui' untuk menyimpan perubahan Anda.

WordPress (dengan Visual Composer):

  • Edit halaman tempat Anda ingin menyertakan widget.
  • Klik tombol '+' untuk menambahkan elemen baru.
  • Pilih 'HTML Mentah' atau 'HTML Kustom' dari elemen konten.
  • Tempelkan potongan kode EdCommerce ke dalam kotak teks.
  • Simpan perubahan Anda dengan mengeklik 'Perbarui' pada halaman.

Wix:

  • Buka halaman yang ingin Anda edit di Wix Editor.
  • Klik 'Tambah' (+) di sisi kiri editor dan pilih 'Lainnya'.
  • Pilih 'iframe HTML' dari menu tarik-turun.
  • Klik 'Masukkan Kode', lalu tempelkan potongan kode EdCommerce ke dalam kotak Pengaturan HTML.
  • Klik 'Terapkan' untuk menyimpan dan melihat widget di halaman Anda.

Squarespace:

  • Buka halaman tempat Anda ingin menambahkan widget.
  • Klik '+Tambahkan Blok' dan pilih 'Kode' dari menu.
  • Tempelkan potongan kode EdCommerce ke dalam blok kode dan klik 'Terapkan'.

Jika Anda tidak dapat menemukan modul HTML di editor, coba lakukan dengan mengedit kode modul 'teks kaya'.

Kasus penggunaan

Dengan fitur ini, Anda dapat mengubah situs web Anda menjadi platform yang lebih menarik dan informatif. Menyematkan widget ini di situs Anda dapat meningkatkan konten, mendorong keterlibatan pengguna, dan meningkatkan konversi.

Berikut beberapa contoh bagaimana widget Edcommerce dapat digunakan secara kreatif di seluruh situs Anda:

Peningkatan Postingan Blog:

Jika Anda menulis postingan blog tentang belajar di lokasi tertentu, seperti Sydney, sematkan widget di akhir postingan. Tampilkan 3 program teratas atau promosi khusus Anda di Sydney untuk mendorong pembaca menjelajahi opsi-opsi tersebut. Ini dapat meningkatkan konversi secara signifikan dengan menghubungkan konten secara langsung ke program yang relevan.

Halaman Acara:

Untuk halaman web yang mempromosikan pameran pendidikan atau webinar, sematkan widget untuk menampilkan program atau institusi yang berpartisipasi dalam acara tersebut. Ini memberikan gambaran kepada pengunjung tentang apa yang dapat diharapkan dan dapat mendorong pendaftaran atau pertanyaan lebih lanjut.

Halaman Spesifik Lokasi:

Jika situs web Anda memiliki halaman yang didedikasikan untuk tujuan studi atau negara tertentu, sematkan widget di halaman tersebut untuk menampilkan program yang tersedia di lokasi tersebut. Ini adalah cara yang bagus untuk menyediakan opsi yang relevan kepada pengguna yang sudah tertarik dengan tujuan-tujuan tersebut.

Halaman Terima Kasih Pendaftaran Newsletter:

Setelah pengunjung berlangganan newsletter Anda, mereka akan diarahkan ke halaman terima kasih. Di sini, Anda dapat menyematkan widget untuk langsung menarik perhatian mereka dengan program populer atau unggulan.

Selama Kampanye Promosi:

Jika Anda menjalankan kampanye promosi untuk kursus atau tujuan tertentu, integrasikan widget di halaman landing kampanye Anda. Sesuaikan widget untuk menampilkan program yang terkait dengan kampanye demi pengalaman pengguna yang selaras.

Menambahkan Edcommerce ke WordPress

Harap diperhatikan bahwa instruksi berikut dirancang khusus untuk pengguna yang menggunakan WordPress sebagai pembuat situs web mereka. Jika Anda menggunakan platform atau pembuat situs web yang berbeda, langkah-langkah ini mungkin tidak berlaku.

Langkah 1

Akses Panel Admin WordPress Anda, buka bagian "Tampilan", lalu klik "Menu".

Langkah 2

Di bagian "Menu", buka "Tautan Khusus", lalu masukkan URL platform Edcommerce Anda dan teks CTA yang ingin Anda tampilkan di menu situs web Anda.

Kemudian klik "Tambahkan ke Menu" untuk memasukkan item baru ini ke menu utama Anda.

Untuk menemukan URL Edcommerce Anda, buka bagian pengaturan di platform Anda, klik "Edcommerce", lalu "Detail Edcommerce".

Tips profesional! Untuk mencegah siswa meninggalkan halaman Anda, pastikan Anda mengatur menu agar tautan terbuka di tab baru.