외부 웹사이트에 EdCommerce 삽입하기

Last updated: October 16, 2026

외부 웹사이트 및 랜딩 페이지에 EdCommerce 콘텐츠를 삽입하는 방법을 설명하는 종합 가이드로, 세 가지 방법을 다룹니다. (1) 리드 양식 삽입: Settings > Ecommerce > Forms에서 EdCommerce 리드 양식 iframe을 복사합니다. 3점 메뉴를 통해 사무실별로 복사하거나, 상단 메뉴의 'Copy Iframe for Lead Form' 버튼을 통해 모든 사무실에 사용할 단일 양식을 복사할 수 있습니다. 그런 다음 WordPress/Elementor, Shopify 또는 Wix와 같은 외부 웹사이트나 CMS에 HTML을 붙여넣습니다. iframe URL을 편집하여 언어 코드(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) WordPress에 EdCommerce 추가: Appearance > Menus에서 Custom Link를 사용하여 WordPress 탐색 메뉴에 EdCommerce 사이트를 연결합니다. EdCommerce URL은 Settings > EdCommerce > EdCommerce Details에서 확인할 수 있으며, 새 탭에서 열리도록 설정하는 것이 좋습니다.

EdCommerce를 사용하면 리드 양식 삽입, 프로그램 위젯 삽입 또는 EdCommerce 사이트 링크 추가를 통해 모든 외부 웹사이트나 랜딩 페이지에 콘텐츠를 가져올 수 있습니다. 이 기사에서는 세 가지 방법을 모두 다룹니다.

EdCommerce 양식 삽입

EdCommerce는 다양한 리드 및 예약 양식을 만들고 개인화할 수 있는 강력한 기능을 제공하므로 리드와 예약으로부터 필요한 정보를 간편하게 수집할 수 있습니다.

여기에서는 웹사이트의 다른 페이지에 리드 양식을 삽입하는 방법을 보여드립니다. 이를 통해 온라인 스토어뿐만 아니라 모든 웹페이지에서 리드를 수집할 수 있습니다.

\이러한 리드는 Edvisor 계정과 동기화되고, 적절한 상담원에게 자동으로 배정되며, 해당 파이프라인과 단계에 추가됩니다.*

*아직 양식을 구성하지 않았다면 이 기사로 돌아가 EdCommerce 사이트에서 양식을 설정하고 개인화하는 방법을 알아보세요.

**웹사이트에 삽입할 수 있는 것은 리드 양식뿐입니다. 예약 양식은 EdCommerce 전용입니다.

모든 랜딩 페이지 또는 웹사이트에 EdCommerce 양식을 삽입하는 방법

  • 다음으로 이동합니다: Settings > Ecommerce > Forms.

그런 다음 특정 사무실용으로 생성된 양식을 삽입하려면 각 사무실 옆의 3점 아이콘을 클릭하고 'Copy Iframe for Lead Form'을 선택합니다.

또는 상단 메뉴의 'Copy Iframe for Lead Form' 버튼을 클릭하여 모든 사무실에 사용할 단일 양식을 삽입할 수 있습니다.

웹사이트에 복사하여 붙여넣을 HTML 코드를 받게 됩니다.

WordPress( Elementor 또는 Visual Composer와 같은 사이트 빌더 사용), Shopify 또는 Wix와 같은 CMS를 사용하는 경우 일반적으로 HTML 코드 스니펫을 사용하여 항목을 임베드하는 간단한 방법을 제공합니다.

이는 보통 간단히 끌어다 놓을 수 있는 위젯 또는 도구 상자의 항목입니다.

예를 들어 Elementor와 같은 웹사이트 빌더를 사용하는 경우 HTML 위젯을 통해 추가할 수 있습니다.

양식 언어를 사용자 지정하는 방법

리드 양식의 언어를 지정하려면 HTML 코드 내부 URL 끝에 언어 코드를 추가하세요.

예시:

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 = 한국어

양식 버튼 색상을 사용자 지정하는 방법

임베드된 리드 양식의 '제출' 버튼 색상을 브랜드에 맞게 개인화할 수도 있습니다. 간단합니다.

  1. 브랜드 색상의 HEX 코드를 찾습니다(예: #4EB2F4).
  2. 이 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 위젯 생성 방법

  1. EdCommerce 설정에 액세스: EdCommerce 계정에 로그인하고 '설정' 섹션으로 이동합니다.
  2. 위젯 생성: 왼쪽 메뉴에서 '위젯'을 선택한 다음 '새 위젯 생성'을 선택합니다.
  3. 위젯 세부 정보 입력: 위젯 이름, 선호 언어, 통화 및 학생 국적을 입력하여 양식을 작성합니다.
  4. 콘텐츠 선택: 위젯에 표시할 프로그램 또는 교육 제공자를 선택합니다. "프로그램" 또는 "제공자"를 클릭하고 오른쪽 목록에서 표시할 항목을 선택하기만 하면 됩니다.
  5. 모양 사용자 지정: 글꼴 스타일, 배경색 및 상자 그림자를 편집하여 웹사이트 디자인에 맞게 위젯의 모양을 조정합니다. 위젯 미리보기 내부의 사각형 아이콘을 클릭하여 더 잘 맞도록 안쪽 여백을 조정할 수도 있습니다.
  6. 위젯 저장: 설정이 만족스러우면 '저장'을 클릭합니다.

위젯을 저장하면 코드 스니펫이 제공됩니다.

이 코드를 웹사이트에 추가해야 합니다. 방법을 알아보려면 계속 읽어보세요.

사이트에 EdCommerce 위젯을 추가하는 방법

위젯을 배치하려는 웹사이트의 페이지를 열고 코드가 포함된 HTML 상자를 삽입하기만 하면 됩니다.

웹사이트의 CMS(예: WordPress 또는 Wix)에 따라 이 코드를 추가하는 방법이 다를 수 있습니다. 일반적으로 모든 웹사이트 편집기에서 HTML 상자를 끌어다 놓을 수 있습니다.

다음은 몇 가지 예입니다:

WordPress (Elementor 사용):

  • Elementor로 편집하려는 페이지를 엽니다.
  • 왼쪽 패널에서 'HTML' 위젯을 위젯을 배치하려는 페이지로 끌어다 놓습니다.
  • EdCommerce 스니펫 코드를 HTML 코드 상자에 붙여넣습니다.
  • '업데이트'를 클릭하여 변경 사항을 저장합니다.

WordPress (Visual Composer 사용):

  • 위젯을 포함하려는 페이지를 편집합니다.
  • '+' 버튼을 클릭하여 새 요소를 추가합니다.
  • 콘텐츠 요소에서 'Raw HTML' 또는 'Custom HTML'을 선택합니다.
  • EdCommerce 스니펫 코드를 텍스트 상자에 붙여넣습니다.
  • 페이지에서 '업데이트'를 클릭하여 변경 사항을 저장합니다.

Wix:

  • Wix 편집기에서 편집하려는 페이지로 이동합니다.
  • 편집기 왼쪽에서 '추가' (+)를 클릭하고 '더보기'를 선택합니다.
  • 드롭다운 메뉴에서 'HTML iframe'을 선택합니다.
  • '코드 입력'을 클릭한 다음 HTML 설정 상자에 EdCommerce 스니펫 코드를 붙여넣습니다.
  • '적용'을 클릭하여 저장하고 페이지에서 위젯을 확인합니다.

Squarespace:

  • 위젯을 추가하려는 페이지로 이동합니다.
  • '+블록 추가'를 클릭하고 메뉴에서 '코드'를 선택합니다.
  • 코드 블록에 EdCommerce 스니펫 코드를 붙여넣고 '적용'을 클릭합니다.

편집기에서 HTML 모듈을 찾을 수 없다면 '서식 있는 텍스트' 모듈의 코드를 편집하여 추가해 보세요.

사용 사례

이 기능을 사용하면 웹사이트를 더욱 매력적이고 유익한 플랫폼으로 전환할 수 있습니다. 사이트에 이러한 위젯을 삽입하면 콘텐츠를 강화하고 사용자 참여를 높이며 전환을 늘릴 수 있습니다.

EdCommerce 위젯을 사이트 전반에서 창의적으로 활용할 수 있는 몇 가지 예시는 다음과 같습니다:

블로그 게시물 개선:

시드니와 같은 특정 지역에서의 유학에 관한 블로그 게시물을 작성하는 경우, 게시물 끝에 위젯을 삽입하세요. 시드니의 상위 3개 과정 또는 특별 프로모션을 소개하여 독자들이 이러한 옵션을 살펴보도록 유도할 수 있습니다. 콘텐츠를 관련 과정에 직접 연결함으로써 전환을 크게 늘릴 수 있습니다.

이벤트 페이지:

교육 박람회나 웨비나를 홍보하는 웹 페이지에는 위젯을 삽입하여 이벤트에 참여하는 과정이나 교육 기관을 소개하세요. 이를 통해 방문자는 어떤 내용을 기대할 수 있는지 미리 확인할 수 있으며, 가입이나 추가 문의를 유도할 수 있습니다.

지역별 페이지:

웹사이트에 특정 유학 목적지나 국가 전용 페이지가 있다면, 해당 페이지에 위젯을 삽입하여 해당 지역에서 이용 가능한 과정을 표시하세요. 이러한 목적지에 이미 관심이 있는 사용자에게 관련 옵션을 제공하는 좋은 방법입니다.

뉴스레터 가입 감사 페이지:

방문자가 뉴스레터를 구독하면 감사 페이지로 이동합니다. 이 페이지에 위젯을 삽입하여 인기 과정이나 추천 과정으로 즉시 관심을 유도할 수 있습니다.

프로모션 캠페인 진행 중:

특정 과정이나 목적지를 대상으로 프로모션 캠페인을 진행하는 경우, 캠페인 랜딩 페이지에 위젯을 통합하세요. 일관된 사용자 경험을 제공할 수 있도록 캠페인과 관련된 과정을 소개하도록 위젯을 맞춤 설정하세요.

WordPress에 EdCommerce 추가하기

다음 안내는 웹사이트 제작 도구로 WordPress를 사용하는 사용자를 위해 특별히 작성되었다는 점에 유의하세요. 다른 플랫폼이나 웹사이트 제작 도구를 사용 중인 경우에는 이 단계가 적용되지 않을 수 있습니다.

1단계

WordPress 관리자 패널에 접속한 후 "외모" 섹션으로 이동하여 "메뉴"를 클릭하세요.

2단계

"메뉴" 섹션에서 "사용자 정의 링크"로 이동하여 EdCommerce 플랫폼의 URL과 웹사이트 메뉴에 표시할 CTA 텍스트를 입력하세요.

그런 다음 "메뉴에 추가"를 클릭하여 이 새 항목을 기본 메뉴에 포함하세요.

EdCommerce의 URL을 확인하려면 플랫폼의 설정 섹션으로 이동하여 "EdCommerce"를 클릭한 다음 "EdCommerce 세부 정보"를 클릭하세요.

전문가 팁! 학생들이 페이지를 이탈하지 않도록 메뉴를 사용자 정의하여 링크가 새 탭에서 열리도록 하세요.