Skip to main content

Embed Courses or Forms on Your Website

Embed a booking widget, course cards showing start or multiple dates, a collection, course button or form on WordPress, Wix, Squarespace or any website.

Written by Artur Binzaru

Use the Standard Website Embed to show Cademy courses, a booking button or a published General form inside a page on your own website, such as WordPress, Wix or Squarespace. An embed, sometimes called a booking widget, is a window into Cademy content, added with a small piece of code called an iframe.

​

This guide is for the person setting up the embed in Cademy and the person who edits the website.

​


​

What the Website Embed Widget Can Show: Courses, Collections or Forms

  • Show all your published courses, a collection (a group of courses you choose), one course or a General form.

  • Use your Cademy brand colour and course information without copying the course text into each website page.

  • The Cademy Embeds app is free and works with websites that allow its iframe and helper script.

Customers browse courses on your website; booking opens Cademy checkout in a new tab.

​

For separate course pages inside your WordPress theme and search-friendly course pages on your own domain, compare the standard embed with Add Your Courses to WordPress With the Cademy Plugin. That is a separate plugin and setup; it is not required for the standard embed.

​


​

What You Need Before Embedding Courses on Your Website

  • You need the System Admin role in Cademy, which gives full access to the provider account, to open Apps and set up embeds.

  • You or your website administrator need permission to add iframe code, install the helper script and publish the website page.

  • Use courses intended for public display, or a published General form. A General form collects information without a course booking.

In Cademy Admin, open Apps, then Cademy Embeds. If it is not installed, select Install. Continue when the Embeds builder appears.

The preview shows live Cademy content. Check its appearance without starting a booking or submitting a form: a form submission creates a real response.

​


​

Create an Embed and Get the Embed Code

  1. In Cademy Admin, open Apps → Cademy Embeds.

  2. Under What would you like to embed?, choose Multiple Courses, A Single Course or A Form. Changing this type resets the builder’s selections.

  3. Choose the content and settings, described later in this guide. Select the required collection, course or form before using Get Code.

  4. Inspect the live preview. Switch between Desktop and Mobile to check the layout.

  5. Select Get Code. In Add This Embed to Your Website, choose General, WordPress, Wix or Squarespace under Your Platform.

  6. Copy Embed Code, or Embed Address for Wix. Also copy Helper Script - Once Per Site if your website does not already have it. Then follow the steps for your website below.

The Embeds builder with Multiple Courses chosen: the three choices Multiple Courses, A Single Course and A Form, then Content, Layout, Collections Row and Options, and on the right the live preview of Harbour Training’s courses with Desktop, Mobile and Get Code above it; Get Code is outlined.

Example of the Embeds builder with Multiple Courses selected and Get Code at the top right.

​

The window Add This Embed to Your Website over the Embeds builder: Your Platform with General, WordPress, Wix and Squarespace, the Steps, Embed Code with its Copy button and Helper Script - Once Per Site with its Copy button; Your Platform with its four choices and the heading Embed Code are outlined.

Example of the Add This Embed to Your Website window, with General selected under Your Platform.

There is no separate builder Save step. The code or address contains your selections. Changing the preview alone does not update an embed already on your website: see “Update an Embed After Changing Its Settings” below.

​

Embed an Enquiry Form or Survey (General Form)

Choose A Form, then under Content, open Choose a Form… and select the form. Only published General forms that have not been archived appear. Check the preview, select Get Code and add the embed using the website steps below.

​

To create and publish the form, see “Put an Enquiry Form or Survey on Your Website (Embed)” in Create and Share a Survey or Enquiry Form (General Form).

What the form embed shows: the form fields and submit button. It leaves out the logo, title, description and cover image, so add a heading and introduction on your website page.

Website responses appear in the form’s Responses, under Source → Embed. Checkout and Feedback forms cannot be embedded.

​


​

Add the Embed Code to Your Website

The website owner adds the code or address to the page and installs the helper once per site.

​

Review Cookie consent on your website in the builder with your website administrator. Adding an embed does not replace your responsibility for your website’s consent and tracking setup. See Manage Cookie Consent for Website Embeds.

​

Add the Embed to Any Website (General)

  1. Copy Embed Code and paste it into the page HTML where the embed should appear.

  2. Ask the website administrator to add Helper Script - Once Per Site just before the closing </body> tag if it is not already installed.

  3. Save or publish the website page. Open its public address and check the content, layout and sizing on desktop and mobile.

Add the Embed to WordPress (Custom HTML Block)

Your account must be allowed to add iframe and script code; WordPress can remove it when the required permissions are missing. WordPress.com also requires an eligible paid plan with hosting features activated for interactive embeds.

  1. Choose WordPress under Your Platform and copy Embed Code.

  2. Edit the WordPress page and add a Custom HTML block. If Edit HTML is shown, select it, paste the code into the HTML editor, then select Update. If the code field is already open, paste the code there.

  3. Have your website administrator add Helper Script - Once Per Site through the site’s approved footer-script method, before the closing body tag. Do not add a second copy if it is already present.

  4. Save or publish the page, open its public address and check the embed on desktop and mobile. If code is removed or blocked, ask the website administrator to check the platform permissions.

​

Add the Embed to Wix

Wix’s Custom Code area requires a published site and a connected domain. Use the Embed Address rather than pasting Cademy’s iframe code into the site-address field.

  1. Choose Wix under Your Platform in Cademy and copy Embed Address.

  2. In the Wix editor, open the page and select Add Elements → Embed Code → Popular Embeds → Embed a site.

  3. Select Enter Website Address, paste the address and select Apply. Check the embed container’s size.

  4. For the helper, open the website’s Settings → Custom Code → + Add Custom Code. Paste Helper Script - Once Per Site, give it a name, choose All pages and Body – end, then select Apply. Add it only once.

  5. Save or publish the page, then inspect its public desktop and mobile layouts. Adjust the Wix container if the content is cut off.

See Wix’s site embed instructions and Custom Code instructions for current platform details.

​

Add the Embed to Squarespace (Code Block)

Your Squarespace plan must support iframe and JavaScript code and site-wide Code Injection. Check its Code block requirements and Code Injection instructions first.

  1. Choose Squarespace under Your Platform in Cademy and copy Embed Code.

  2. Edit the Squarespace page and add a Code block. Select its pencil icon to open the block editor, choose HTML under Type, paste the code and leave Display Source off.

  3. Open the site’s Code Injection area using the Squarespace instructions linked above. Put Helper Script - Once Per Site in Footer and select Save. Add it only once.

  4. Save or publish the page and inspect its public desktop and mobile layouts.

​


​

Change in Cademy Not Visible on Your Website Embed Right Away

The embed reads course information from Cademy when the page loads. Changes to a course’s details, dates, prices or publication need no new code: save them in Cademy, then refresh the public website page, ideally in a private browser window. Cademy does not guarantee that a change shows instantly.

​

The embed’s own settings are different. The content selection, layout, collections row, options, filters and card details are stored in the code or address you copied, so changing them in the builder does not change an embed already on your website.

​

Update an Embed After Changing Its Settings

  1. Open Apps → Cademy Embeds and choose the setup you want again, such as the layout, filters or card details.

  2. Select Get Code and copy the new Embed Code, or Embed Address for Wix.

  3. Replace the old code or address on every website page that uses this embed, then save or publish those pages.

  4. Open each public page and check the result. If your website uses a cache, clear it so visitors get the updated page.

You do not need to replace the helper script.

​

Embedded Collection or Course Code Shows an Error or Blank Area on Your Website

If the embed does not appear as expected on your website, check these:

  • No results match your filter, with a Clear filters button, although no visitor chose a filter: the selected collection has no courses published for your minisite and embeds, or Only show courses that have future dates scheduled leaves none. Clear filters does not fix this. A visitor’s own search or filter shows a similar message. Check the collection’s courses in Cademy, and see Create a Course Collection to Share or Embed.

  • A not-found page instead of one course: the course is no longer published or was deleted. Publish it again, or create a new embed for the right course. An unpublished form stops accepting responses until you publish it again.

  • A blank area, or the code shown as text: your website removed or blocked the code. Check the platform’s code permissions and plan, and that the complete code or address was pasted.

  • Content cut off or the wrong height: check that the helper script is installed once on the site, and adjust the container size on Wix.

After correcting the setup, save or publish the website page and refresh its public address. If the problem remains, send Cademy Support the page address, what you expected to see and any error message.

​

Add Another Course at Checkout Goes to the Wrong Site

When Allow multiple courses per checkout is on, checkout shows + Add Another Course or Date. From an embed, this takes the customer back to the website page the embed is on, so they can choose another course. Checkout gets that page address from the helper script. Without the helper, checkout gets only what the visitor’s browser passes on: with standard browser settings that is your website’s main address, so the customer lands on your home page; if nothing is passed on, they land on your Cademy minisite. To fix it, install Helper Script - Once Per Site on the website, then test the journey again from the published page.

​


​

Show Several Courses or a Collection (Multiple Courses)

Choose All Published Courses or One Collection

  • All Published Courses: your published course listing, subject to its public visibility and the chosen filters.

  • A Collection: choose the collection whose courses you want to show.

Choose a Layout and Show the Start Date or Multiple Dates Label on Course Cards

Under Layout, choose Grid, Rows, Dates List, Date Cards or Calendar.

  • Grid and Rows show one card per course. With Dates selected under Card Details, a course with one upcoming date shows that start date and time; a course with more than one upcoming date shows Multiple Dates. On-demand courses show Pre-recorded Online course.

  • Dates List and Date Cards show each upcoming date as its own row or card, with a large date, so visitors can see every start date.

  • Calendar shows dates on a calendar.

Course Order and Displaying All Courses on One Page Instead of Splitting Into Pages

With All Published Courses, courses with the soonest upcoming date come first, and courses without an upcoming date follow. Grid and Rows first show 12 courses with All Published Courses, or 20 with A Collection. When there are more, visitors select Load More to add the next courses on the same page. The builder has no setting to change the order or the number shown first, or to show every course at once. To show fewer courses, embed a collection.

​

Show or Hide the Collections Row

Collections Row is available when All Published Courses is selected and the layout is not Calendar. Choose Auto, Grid, Carousel or Hidden.

​

Show Only Upcoming Courses or Open Checkout From a Date (Options)

  • Only show courses that have future dates scheduled is available for every layout except Calendar.

  • Open checkout when a customer clicks a date is available only for Dates List and Date Cards. For an available date, it opens the relevant Cademy or External Bookings journey. A sold-out date opens the Cademy waitlist when enabled, otherwise its course details.

Options are hidden for Calendar. The Search & Filters and Card Details controls below are inside Options.

​

Choose the Search Bar and Filters Visitors See (Search & Filters)

In Options, open the button beside Search & Filters. The choices are Search Bar, Delivery, Location, Collection, Category, Tags, Level and CPD, when available. All available choices are selected by default and the button shows All Filters. Clear every checkbox for No Filters. If a shared address already contains a search or filter, Clear Filters can still appear so visitors can remove it.

​

On Grid and Rows, the whole search and filter area is hidden when six or fewer courses are displayed and no search or visitor filter is active. When it is visible, Location, Collection, Category and Tags appear only when matching course information exists. With A Collection, Collection is left out because the embed is already limited to it, and Category and Tags are also unavailable.

​

CPD means continuing professional development. Its filter requires the CPD feature, included in Pro, Teams and Enterprise, and CPD enabled under Settings → CPD; otherwise it is hidden in the builder. Visitors select Awards CPD and can enter a minimum number of points or hours. With the helper installed, filtering updates the website page address, so it can be shared. See Set Up and Award CPD Points or Hours.

​

The Embeds builder with Multiple Courses and Grid chosen and, under Options, the list beside Search &amp; Filters open: Search Bar, Delivery, Location, Collection, Category, Tags, Level and CPD, all ticked; the button All Filters and the opened list are outlined.

Search & Filters in a Multiple Courses embed.

​

Choose What Course Cards Show: Dates, Price, Location and More (Card Details)

In Options, open the button beside Card Details. The choices are Dates, Delivery & Location, Price, Rating, Duration, Level, Category, Tags and CPD, when available. Dates, Delivery & Location, Price and Rating are selected by default, giving Default Details. Select every available choice for All Details, or clear them for No Details.

​

If account settings hide prices or reviews, Price or Rating is disabled with Hidden by your account settings. See Hide Prices From Customers on Courses and Checkout.

​

CPD is off by default and has the same requirements as the CPD filter. Select it to show a badge on courses with CPD points or hours.

​

Other details appear only when the course has that information. On Dates List and Date Cards, the large date always remains; Dates controls the smaller date and time detail. Rating is not shown on Rows or Dates List. No Details hides the optional details only: the name, image and labels such as Sold out remain.

​

The Embeds builder with Multiple Courses and Grid chosen and, under Options, the list beside Card Details open: Dates, Delivery &amp; Location, Price and Rating ticked, Duration, Level, Category, Tags and CPD not ticked; the button Default Details and the opened list are outlined.

The four default Card Details are selected.

​


​

Embed One Course: Booking Button, Dates or Course Card (A Single Course)

Choose A Single Course, then under Content, select the course. Under Layout, the choices are Date Rows, Date Cards, Dates Table, Dates Carousel, Date Ticket Cards, Full Course Page, Feature Card and Price Card.

​

The Embeds builder with A Single Course chosen: under Content the course CPR and Basic Life Support is selected, and under Layout are Date Rows, Date Cards, Dates Table, Dates Carousel, Date Ticket Cards, Full Course Page, Feature Card and Price Card, with Date Cards chosen; the preview shows the course’s two dates as cards. The selected course and the eight layouts are outlined.

Example of A Single Course with a course selected and the eight layouts under Layout.

​

The five date layouts are hidden for On-demand and On-request courses, which do not use scheduled dates. If you switch from a date layout to one of those course types, the selection changes to Price Card. Check the selected course and layout before getting the code.

​

Can I Remove the Online or In-Person Tag From a Feature Card Embed?

No. Feature Card always shows the course image, name, delivery badge (such as Online or In-Person, with the location), date line, price and actions. Single-course layouts have no Card Details choices, so these cannot be hidden. The delivery badge comes from how and where the course is delivered; see Set the Course Venue or Online Joining Link. A Multiple Courses embed of a collection lets you clear Delivery & Location under Card Details.

​

Rename the Embed Booking Button and Change Its Colour

Buttons and highlights in embeds use your brand colour, set under Profile in Cademy Admin. A custom brand colour needs the Custom Brand Colour feature, included in Pro and Teams. See Update Your Business Profile on Your Minisite. The builder has no separate colour setting for one embed.

​

To change the button wording, save a custom Booking Button label on the course. It is used by the main booking button in Full Course Page and Price Card, and by the booking action in Feature Card, when that action is available. Feature Card’s View action is not renamed. Other actions, multiple-course listings and date actions keep their normal wording. The account must include Custom Labels, available on Pro, Teams and Enterprise. See Rename Course Buttons and Labels (Custom Labels).

​


​

Check Embedded Prices When Dates Use Different Currencies

When dates use different currencies, check each date’s price in your chosen layout and the currency shown when booking. Course cards do not convert prices between currencies. See Choose the Currency for Your Course Prices.

​


​

Frequently Asked Questions

Will customers leave my website to complete checkout?
Yes, to complete a booking. Booking buttons and bookable dates open Cademy checkout in a new browser tab; checkout does not run inside your page. In Grid, Rows and Calendar, selecting a course first opens its course page inside the embed. Supported External Bookings actions open the external website in a new tab. Contact Us and Join Waitlist open their form inside the embed, and A Form is submitted inside your page.

​

Do I need to know how to code?
No. Cademy generates the code, but someone with the right website permissions must place it and the helper script.

​

What is Helper Script - Once Per Site?
Extra code that supports embed resizing, navigation and sharing filtered addresses. It also tells the embed the address of the page it is on, which booking links pass on to checkout. Add it once per website. It does not keep checkout inside the page.

​

Can I add more than one embed to my website?
Yes. Add the code or address for each embed. The helper still needs only one installation per website.

​

Do External Bookings work in a Standard Website Embed?
Yes, supported booking actions open the configured external website in a new tab. Existing availability and access rules still apply. Contact Us and Cademy waitlists remain Cademy journeys. See Send Customers to an External Booking Website.

​

Is the Standard Website Embed free?
Yes, the Cademy Embeds app is free. Your website platform can require a paid plan or particular permissions for code. Booking, payment-processing and other account fees are separate; see What Each Cademy Plan Includes and Costs.

​

Why is my form missing from the picker?
It must be a published General form and must not be archived. Check it under Forms and publish it as described in Create and Share a Survey or Enquiry Form (General Form). If an eligible form is still missing, refresh the builder, then ask Cademy Support.

Did this answer your question?