https://www.thesingingclassroom.com/js/song-cta.js?v=ptoj1yhJ5h9Jhzj3FX9J8UySJQL6K-ejBFTOu1RSs4M

1(function () {
2    // Free-song call to action (Gregg 2026-09-16). Rendered dynamically here in JS rather than in the song
3    // template, because song pages are served from CMS-published files and a template change would need each
4    // page republished. This script is loaded site-wide via _Layout (which IS live on published pages) but is
5    // self-scoping: it does nothing unless (1) this is a song page (has #song-content), (2) the page has a
6    // Vimeo video, and (3) the viewer is logged out (a "/login" link exists only in the logged-out nav). So it
7    // shows to the strangers arriving on the free song pages, never to paying members and never on non-song
8    // pages, and it covers future public song pages automatically with no republish.
9    //
10    // The video lives in the #resources media block near the top of the page (NOT in #song-content, which
11    // holds the lyrics/materials text), so the CTA is inserted directly under that block.
12    //
13    // The copy and the "158" are FIXED per Gregg: do NOT make the number dynamic, because the site's song
14    // counts (meta 158 vs 179 audited vs homepage 150+) are being reconciled separately by him.
15    function init() {
16        if (!document.getElementById('song-content')) { return; }      // song pages only
17        var video = document.querySelector('iframe[src*="vimeo"]');    // the teaching video
18        if (!video) { return; }
19        if (!document.querySelector('a[href^="/login"]')) { return; }  // logged-out visitors only
20        if (document.getElementById('song-cta')) { return; }           // never insert twice
21
22        // Anchor to the media block that holds the video so the CTA sits directly under it.
23        var anchor = video.closest('#resources') || video.parentElement;
24        if (!anchor || !anchor.parentNode) { return; }
25
26        var cta = document.createElement('div');
27        cta.id = 'song-cta';
28        cta.className = 'song-cta d-flex flex-column flex-sm-row align-items-sm-center gap-3 my-4 astro-jjtb43f3';
29
30        var line = document.createElement('span');
31        line.className = 'fw-bold m-0 astro-jjtb43f3';
32        line.textContent = '158 more songs like this one. Free for 7 days.';
33
34        var btn = document.createElement('a');
35        btn.className = 'btn rounded-pill astro-3ef6ksr2';
36        btn.setAttribute('href', '/subscribe');
37        btn.textContent = 'Start Your Free Trial';
38
39        cta.appendChild(line);
40        cta.appendChild(btn);
41        anchor.parentNode.insertBefore(cta, anchor.nextSibling);
42    }
43
44    if (document.readyState === 'loading') {
45        document.addEventListener('DOMContentLoaded', init);
46    } else {
47        init();
48    }
49})();