How do I create a subscribe button inside a component

steffiatebay sure! We made improvements in the mean time. We now use a toggle switch component in the sidebar like this:

Below is the code of the component with some stuff edited / translated for you. The JavaScript part is at the end of the code. This only works on forums, ideas and blogs and their overview pages. It does not work on category / node level.

<@liaMarkupCache ttl="30000" variation="node" anonymousOnly="false" />
<@compress single_line=true>

<#if (conditions to exclude certain type of nodes where the toggle is not active)>

<#assign defaultLink = "/t5/user/userloginpage?redirectreason=loginToSubscribe" />
<#assign buttonClassName ="lia-link-ticket-post-action" />
<#assign actionText = "E-mail notifications" />
<#assign ToggleTextSubscribed= "Off" />
<#assign ToggleTextUnsubscribed = "On" />
<#assign altText = "" />
<#assign subscribeTarget = "" />
<#assign unsubscribeTarget = "" />

<#if page.name == "ForumTopicPage">
    <#assign altText = "Receive an update on new comments in this topic." />
    <#assign subscribeTarget = "#addThreadUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "BlogArticlePage">
    <#assign altText = "Receive an update on new comments in this article." />
    <#assign subscribeTarget = "#addThreadUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "IdeaPage">
    <#assign altText = "Receive an update on new comments on this idea." />
    <#assign subscribeTarget = "#addThreadUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "ForumPage">
    <#assign altText = "Receive an update on new topics in ${coreNode.shortTitle}." />
    <#assign subscribeTarget = "#addBoardUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
<#elseif page.name == "BlogPage">
    <#assign altText = "Receive an update on new articles in ${coreNode.shortTitle}." />
    <#assign subscribeTarget = "#addBoardUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
<#elseif page.name == "IdeaExchangePage">
    <#assign altText = "Receive an update on new ideas in ${coreNode.shortTitle}" />
    <#assign subscribeTarget = "#addBoardUserEmailSubscription" />
    <#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
</#if>

<style>
    /* This is where I styled the toggle switch */
</style>

<#-- Build HTML of the component -->

<div class = "subscribe-unit">
    <div id="action">
        <span id="actionText">${actionText}</span>
        <a href="${defaultLink}" target="_blank" id="vfz-subscribe-button" class="${buttonClassName}" alt="${altText}" title="${altText}">
        <div class="vfz-toggle-container">
            <div class="vfz-toggle">
                <div class="vfz-toggle__helper">
                    <span class="vfz-toggle__slider" id="toggleSlider"></span>
                    <span class="vfz-toggle__value" id="toggleOn">${ToggleTextUnsubscribed}</span>
                    <span class="vfz-toggle__value" id="toggleOff">${ToggleTextSubscribed}</span>
                </div>
            </div>
        </div>
        </a>
    </div>
    <p id="altText">${altText}</p>
</div>

<#-- JavaScript link retrieval for logged in users -->

<#if !user.anonymous>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
    function duplicateSubscribeLinkToTopicStatus() {
        let subscribeLink = document.querySelector('${subscribeTarget}');
        let unsubscribeLink = document.querySelector('${unsubscribeTarget}');
        var targetLink = document.getElementById('vfz-subscribe-button');
        if (subscribeLink) {
            var newLink = subscribeLink.cloneNode(true);
            newLink.innerHTML = targetLink.innerHTML;
            
            newLink.className = "${buttonClassName}";
        }
        if (unsubscribeLink) {
            let a = document.querySelector('#toggleOn');
            let b = document.querySelector('#toggleOff');
            let c = document.querySelector('.vfz-toggle__slider');
            a.style.opacity = '1';
            b.style.opacity = '0';
            c.style.backgroundColor = '#f48c00';
            c.classList.add('vfz-toggle__slider--on');
            var newLink = unsubscribeLink.cloneNode(true);
            newLink.innerHTML = targetLink.innerHTML;
            newLink.className = "${buttonClassName}";
        }
        if (targetLink) {
            targetLink.parentNode.replaceChild(newLink, targetLink);
        }
    }
    duplicateSubscribeLinkToTopicStatus();
});
</script>
</#if>

</#if>
</@compress>

 Anyone who will use this code, please let us know 🙂 If you have improvements, please share.