A mini-course embed is blank or clipped: isolate the failing layer

Separate a course problem from a host-page problem

Write down the exact symptom: empty area, loading indicator, access prompt, lower controls cut off, or the wrong lesson. These are not interchangeable failures. Compare the intended learner destination with the embedded version using authorized access and the same course version. If the direct destination also fails, start with publication and learner access rather than editing host CSS.

The current publishing documentation distinguishes an unpublished course from a working share link. A draft that is not accessible is not evidence of a broken embed. Do not release incomplete content simply to remove that symptom.

Match the code to the host and the content

Mini Course Generator documents JavaScript and iframe options for individual courses, but JavaScript for collections. Its JavaScript instructions use separate head and body portions. The merchant recommends JavaScript for multi-page lessons and notes that some host previews do not display embeds. Follow the current generated code rather than constructing identifiers yourself.

In your host, check that the allowed custom-code location is the one actually rendered on the target page. A snippet saved in a site-wide setting may have a page restriction; an HTML block may treat script text differently from a script injection setting. These are diagnostic possibilities, not a claim about your particular builder. Consult that builder’s documented integration path before changing security settings.

Use the symptom to choose one next check

• Direct course works; host area is empty: compare the installed snippet and target course with the generated version. Ask the host administrator whether required external content is blocked; do not disable protections globally.
• Text appears but the next control is below the frame: inspect container height and the lesson’s internal scroll area. Test a long answer and a short answer; a fixed height that fits the introduction may fail on feedback.
• The next page opens partway down: compare the host scroll and embedded scroll separately. A screenshot of the top page does not establish that later pages start in a usable position.
• A verification prompt appears: treat it as an access boundary, not something to hide with CSS. Check the intended learner mode.
• The wrong content appears: compare course/collection selection and the published version before replacing the snippet.

Record enough to make a repair reproducible

A useful issue note might read: “The direct fictional room-booking lesson opens. On the staff portal, the practice page appears but its Submit control is outside the visible frame at a narrow width. The problem occurs after selecting the longest answer; the introduction fits.” Add browser, viewport, destination and time, but remove private learner names, access codes and tokenized links.

Change one relevant setting, then check the same route again. If a correction makes the short screen work but hides later feedback, it has not solved the problem. Keep a direct authorized access route available while the host issue is investigated.

Know when an embed is the wrong delivery choice

The merchant warns that payment-gated collections can interrupt the embedded journey and recommends a direct destination for that case. More generally, an embed is a poor trade when maintaining the surrounding portal costs more than the presentation benefit. A clearly labelled direct link is preferable to a nested scrolling box that learners cannot reliably use.

Finish with the small-screen check and the access diagnostic where relevant. A working appearance does not prove privacy, accessibility or learning effectiveness.