Embedding EdCommerce on external websites

Last updated: October 16, 2026

Consolidated guide to embedding EdCommerce content on external websites and landing pages, covering three methods. (1) Embedding lead forms: copy an EdCommerce lead-form iframe from Settings > Ecommerce > Forms — either per office via the 3-dot menu or a single form for all offices via the top-menu 'Copy Iframe for Lead Form' button — and paste the HTML into any external website or CMS such as WordPress/Elementor, Shopify or Wix; customize by editing the iframe URL to append a language code (EN, PT, ES, ES_MX, PT_BR, DE, IT, TR, FR, JA, KO) or a HEX code to set the Submit button color. Only lead forms can be embedded externally — booking forms are EdCommerce-only — and submitted leads sync to Edvisor, are auto-assigned to the right counselor per your business rules, and land in the correct pipeline and stage. (2) Embedding program widgets: create a widget in EdCommerce Settings > Widgets, customize its appearance, and paste the generated code snippet into an HTML block, with step-by-step instructions for WordPress (Elementor and Visual Composer), Wix, and Squarespace, plus use cases. (3) Adding EdCommerce to WordPress: link an EdCommerce site from a WordPress navigation menu via Appearance > Menus using a Custom Link to your EdCommerce URL (found under Settings > EdCommerce > EdCommerce Details), ideally set to open in a new tab.

With EdCommerce you can bring your content onto any external website or landing page — whether that's embedding lead forms, embedding program widgets, or adding a link to your EdCommerce site. This article covers all three.

Embedding EdCommerce forms

EdCommerce offers a powerful feature that enables you to create and personalize different lead and booking forms, making it simple to gather the right information from your leads and bookings.

Here we will show you how to embed your lead forms on other pages of your website, enabling lead collection not just from your online store, but from any webpage.

\These leads will then be synchronized with your Edvisor account, automatically assigned to the right counselors, and added to the appropriate pipeline and stage.*

*If you haven't configured your forms yet, refer back to this article to learn how to set up and personalize forms within your EdCommerce site.

**Please note that only lead forms can be embedded on your website. Booking forms are exclusively for EdCommerce.

How to embed your EdCommerce forms on any landing page or website

  • Navigate to: Settings > Ecommerce > Forms.

Then, click the 3-dot icon next to each office, and select 'Copy Iframe for Lead Form' if you want to embed a form created for a specific office.

Or just click on the 'Copy Iframe for Lead Form' button from the top menu to embed a unique form (for all your offices).

You will get an HTML code to copy and paste in your website.

If you're using a CMS like WordPress (with a site builder like Elementor or Visual Composer), Shopify, or Wix, they typically offer a straightforward method for embedding things with HTML code snippets.

This is usually a widget or an item in your toolbox that you can simply drag and drop.

For example, if you use a website builder like Elementor, you can add it through its HTML widget.

How to customize your form language

If you want to define the language of the lead form, add the language code at the end of the URL inside the HTML code:

Example:

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

Here you can see the language codes for the different languages available:

  • EN = English
  • PT = Portuguese
  • ES = Spanish
  • ES_MX = Latin American Spanish
  • PT_BR = Brazilian Portuguese
  • DE = German
  • IT = Italian
  • TR = Turkish
  • FR = French
  • JA = Japanese
  • KO = Korean

How to customize your form button color

You can also personalize the color of the 'Submit' button on your embedded lead forms to match your brand. It's simple:

  1. Find the HEX code of your brand color (Example #4EB2F4).
  2. Add this HEX code to the URL of the form you want to embed.

For example, if you want to use the color with the HEX code #4EB2F4, your URL will look something like this:

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

Just replace #4EB2F4 with your custom HEX color code to see the magic happen!

Once a student completes one of these forms, the lead will be assigned to the right counselor based on the business rules established on your EdCommerce settings. These leads are also synchronized with your Edvisor account, and added to the correct pipeline and stage.

Embedding EdCommerce programs

With EdCommerce, not only can you craft stylish e-commerce landing pages and even create entire websites, but you can also seamlessly integrate its powerful features into any existing website you're using.

This means you get the best of both worlds – your current website's functionality and EdCommerce's powerful features.

You can do this by creating and embedding a widget. Let's see how to do it.

How to create an EdCommerce widget

  1. Access your EdCommerce Settings: Log in to your EdCommerce account and navigate to the 'Settings' section.
  2. Create a Widget: In the menu on the left, select 'Widgets', then 'Create new widget'.
  3. Fill in Widget Details: Complete the form with your widget's name, preferred language, currency, and student nationality.
  4. Choose the content: Select which programs or education providers to display in your widget. Just click on "Programs" or "Providers" and pick the ones you'd like to display from the list on the right.
  5. Customize Appearance: Adjust the widget's appearance by editing font style, background color, and box shadow to match your website's design. You can also modify the padding for a better fit by clicking on the square icon inside the widget preview.
  6. Save Your Widget: Once you're satisfied with the settings, click 'Save'.

After saving your widget, you will get a snippet of code.

This code needs to be added to your website, keep reading to learn how.

How to add an EdCommerce widget to your site

Simply open the page on your website where you'd like to place this widget and insert an HTML box with the code.

Depending on your website's CMS (like WordPress or Wix), the method to add this code might differ. Generally, all website editors allow you to drag and drop a HTML box.

Here are some examples:

WordPress (with Elementor):

  • Open the page you want to edit with Elementor.
  • Drag the 'HTML' widget from the left-hand panel to your page where you want the widget.
  • Paste the EdCommerce snippet code into the HTML code box.
  • Click 'Update' to save your changes.

WordPress (with Visual Composer):

  • Edit the page where you want to include the widget.
  • Click on the '+' button to add a new element.
  • Choose 'Raw HTML' or 'Custom HTML' from the content elements.
  • Paste your EdCommerce snippet code into the text box.
  • Save your changes by clicking 'Update' on the page.

Wix:

  • Navigate to the page you want to edit in the Wix Editor.
  • Click on 'Add' (+) on the left side of the editor and select 'More'.
  • Choose 'HTML iframe' from the dropdown menu.
  • Click 'Enter Code', and then paste the EdCommerce snippet code into the HTML Settings box.
  • Click 'Apply' to save and see the widget on your page.

Squarespace:

  • Go to the page where you want to add the widget.
  • Click on '+Add Block' and select 'Code' from the menu.
  • Paste your EdCommerce snippet code into the code block and click 'Apply'.

If you can't find an HTML module in your editor, try to do it by editing the code of a 'rich text' module.

Use cases

With this feature you can transform your website into a more engaging and informative platform. Embedding these widgets on your site can enhance content, boost user engagement, and increase conversions.

Here are some examples of how EdCommerce widgets can be creatively utilized across your site:

Blog Post Enhancements:

If you're writing a blog post about studying in a specific location, like Sydney, embed the widget at the end of the post. Feature your top 3 programs or special promotions in Sydney to encourage readers to explore these options. This can significantly increase conversions by directly linking content to relevant programs.

Event Pages:

For web pages promoting education fairs or webinars, embed the widget to showcase programs or institutions participating in the event. This gives visitors a preview of what to expect and can encourage sign-ups or further inquiries.

Location-Specific Pages:

If your website has pages dedicated to specific study destinations or countries, embed the widget on these pages to display programs available in those locations. It's a great way to provide relevant options to users already interested in these destinations.

Newsletter Sign-Up Thank You Pages:

After a visitor subscribes to your newsletter, they're directed to a thank-you page. Here, you can embed the widget to immediately engage them with popular or featured programs.

During Promotional Campaigns:

If you're running promotional campaigns for certain courses or destinations, integrate the widget on your campaign landing pages. Tailor the widget to feature programs related to the campaign for a cohesive user experience.

Adding EdCommerce to WordPress

Please be aware that the following instructions are specifically designed for users who utilize WordPress as their website builder. If you are using a different platform or website builder, these steps may not be applicable.

Step 1

Access your WordPress Admin Panel and navigate to the "Appearance" section and click on "Menus".

Step 2

In the "Menus" section, navigate to "Custom Links" and enter the URL of your EdCommerce platform, and the CTA text you'd like to have in your website's menu.

Then click on "Add to Menu" to include this new item in your main menu.

To find your EdCommerce's URL, go to the settings section on your platform, click on "EdCommerce" and then "EdCommerce Details".

Pro tip! To prevent students from abandoning your page, make sure you customize your menu to open the link in a new tab.