Developer API & Events

Extend and control Easy Table of Contents (eToC) using our comprehensive JavaScript API and event system. Built for developers who need deep theme integration.

---

🛠️ Global API

eToC exposes a global object on the window scope for manual interaction.

• window.EasyTOC: Access the core engine instance.
• window.EasyTOC.init(): Manually re-initialize the ToC discovery logic (useful for headless themes or AJAX page loads).
• window.EasyTOC.config: Access the active configuration object for the current page.

---

⚡ JavaScript Events

eToC dispatches several custom events that you can hook into to modify behavior or track user interaction.

1. ETOC:beforeInitTOC

Dispatched immediately before the ToC is generated. This is your last chance to modify the configuration or the page structure dynamically.

Example: Dynamically Ignoring a Heading If you want to hide a specific heading from the ToC based on its position or content without touching your theme code, use this event:

window.addEventListener('ETOC:beforeInitTOC', function(e) {
    // Find the first H2 inside the article
    const headingToIgnore = document.querySelector('.article-template__content h2:first-of-type');
    
    if (headingToIgnore) {
        // Adding the 'ignore' class prevents eToC from picking it up
        headingToIgnore.classList.add('ignore');
        console.log('eToC: Dynamically ignored the first heading.');
    }
});

2. easyTocBeforeScroll

Dispatched when a user clicks a link in the ToC, but before the scroll animation begins.

• event.detail.target: The destination heading element.
• event.detail.offset: The calculated pixel offset for the scroll.

3. easyTocAfterScroll

Dispatched once the smooth scroll animation has completed.

4. etocContainerReplySent

Dispatched when the RND engine has successfully identified the content wrapper.

---

💰 Advanced Example: Content Locker (Ad Wall)

You can use the ETOC:beforeInitTOC event to hide part of your article and show an "Ad/Popup" teaser until the user interacts.

window.addEventListener('ETOC:beforeInitTOC', (event) => {
    const config = event.detail.config;
    
    // Target the 3rd heading as the "Lock" point
    const headings = document.querySelectorAll(${config.content} h2, ${config.content} h3);
    const targetHeading = headings[2];
    if (targetHeading) {
        // 1. Create the Teaser UI
        const teaser = document.createElement('div');
        teaser.innerHTML = `
            

                
Unlock Full Article
                
                    Read More
                
            
        `;
        // 2. Hide everything from the target heading onwards
        let sibling = targetHeading;
        const hiddenEls = [];
        while (sibling) {
            hiddenEls.push(sibling);
            sibling.style.display = 'none';
            sibling = sibling.nextElementSibling;
        }
        // 3. Insert teaser
        targetHeading.parentNode.insertBefore(teaser, targetHeading);
        // 4. Handle Unlock
        document.getElementById('unlock-btn').addEventListener('click', () => {
            alert("Trigger your Newsletter popup or Ad here!");
            teaser.remove();
            hiddenEls.forEach(el => el.style.display = '');
            
            // Re-run discovery to update the ToC with now-visible headings
            window.EasyTOC.init();
        });
    }
});

---

Need more help with custom integrations? Contact our developer support team.