How it works
Alva Courses adds a Button block as one call-to-action button, such as a link to your booking page. An HTML block places your own markup in the lesson exactly as you type it, which suits iframe embed codes for forms and calendars. Both blocks are included on every plan.
Button is in the Add Content menu of both the standard lesson editor and the fullscreen builder. HTML is offered only in the fullscreen builder, but an HTML block you have already added can still be edited in the standard lesson editor.
Add a Button or HTML block
1. Open the lesson
In the Shopify admin, open Alva Courses, click Courses, select a course and open the lesson. For an HTML block, also click Full Screen in the page header: the fullscreen builder opens on that lesson.
2. Add a Button block
Click Add Content and choose Button. New blocks go to the end of the lesson; use the up and down arrows on the block to move it. In the standard lesson editor, a new block's arrows work only after you save the lesson.
3. Enter the button text and link
Type the label in Button Text and the address in Button URL. The label appears exactly as you type it, so characters such as < and & show as typed. Students see the button only when Button Text has a value. Fill in Button URL too: a button with no address still shows, but clicking it just opens the same page again in a new tab.
Addresses that start with http:// or https://, email links that start with mailto:, and paths on your own store that start with / (such as /pages/contact) are used as typed. Anything else gets https:// added in front, so www.example.com works but phone links and #anchors don't.
4. Choose the alignment
Under Alignment, click Left, Center or Right; a new button starts centred. Once both fields have a value, a preview appears in the block. The preview is always blue; the course player uses your course colours instead.
5. Add an HTML block in the fullscreen builder
In the fullscreen builder, click Add Content in the lesson toolbar and choose HTML. Paste your code into HTML Content. A Preview: box below the field updates about half a second after you stop typing.
6. Save and preview the lesson
In the fullscreen builder, click Save this lesson; in the standard lesson editor, click Save in the save bar. Then click Preview to open the saved lesson in your storefront, where the course player's own styles apply.
What an HTML block can and can't do
An HTML block is shown exactly as you saved it. Alva Courses doesn't check or clean the code, so paste only code you trust, as the note under the field warns. In the course player:
- Scripts don't run. Code inside <script> tags is ignored in the editor preview and in the course player, so embeds that need a script won't load. If a tool offers an iframe version of its embed code, use that.
- Iframes work. Most embedded frames are stretched to the full width of the lesson, so set the height you need in the code. For a YouTube video, the YouTube block is the simpler choice.
- Links take your course's link colour and open in a new tab.
- Images fill the lesson width unless they have an inline width, and students can click them to enlarge them.
- The player's styles beat many inline styles. Headings, paragraphs, lists and div elements lose their own colours, backgrounds, borders, spacing and font weight, and text uses the course font when one is set. To restyle them, see Custom CSS isn't applying to the course player.
What learners see
Students see a Button block as a button in your course colour. If Advanced Color Customization is turned on for the course, it uses the Button Background, Button Text and Button Hover colours under Interactive Colors instead — see Brand the course player. Clicking the button opens the link in a new tab, so the lesson stays open behind it. HTML content appears in place among the lesson's other blocks.
Common questions
Why isn't HTML in the Add Content menu?
The standard lesson editor doesn't offer it. Click Full Screen, select the lesson, then open Add Content in the lesson toolbar, where HTML is listed. HTML blocks you have already added stay editable in the standard lesson editor.
Why is my button blue in the editor?
The preview inside the block always uses a standard blue. In the course player the button takes your course colour, or your Button Background, Button Text and Button Hover colours when Advanced Color Customization is turned on.
Can a link in an HTML block open another lesson?
The HTML block has no lesson picker. To link to another lesson, add the link in a Text block and choose the Lesson tab in its link editor. The lesson then opens inside the course player.
Does lesson search find text in these blocks?
Yes. Lesson search in the course editor matches the visible text of HTML blocks and button labels. It doesn't match link addresses or the code, scripts and styles inside an HTML block.
See also
Was this helpful?
Last updated 2026-10-12