Skip to main content

FluentCommunity

#General

Can we Do something like the "Hosted with X Cloud" in the right sidebar?

I have a couple of advertisers that might really like having links like that on the site. Is there a way I can do that. Not sure what size it is but it looks cool. How can I set that up on my site?

  • 2 likes
  • 3 comments

Tawsif Ahmed Riyad

Check the below JS snippet, use it in Settings > Customization > Custom JS

<script>
(function () {
    var WIDGET_ID = 'my_custom_side_widget';

    function injectWidget() {
        var sideBox = document.querySelector('.fcom_main_side_wrap .fcom_side_box');
        if (!sideBox) return;                              // sidebar not mounted yet
        if (sideBox.querySelector('#' + WIDGET_ID)) return; // already added

        var widget = document.createElement('div');
        widget.id = WIDGET_ID;
        widget.className = 'app_side_widget my_custom_widget';
        widget.setAttribute('role', 'region');
        widget.setAttribute('aria-label', 'My Widget');

        // ==== EDIT YOUR CONTENT BELOW ====
        widget.innerHTML =
            '<div style="text-align:center;">' +
                '<p style="display:flex; gap:6px; margin-top:0; justify-content:center;">' +
                    'Hosted with ' +
                    '<a target="_blank" rel="noreferrer noopener" style="display:block;" ' +
                       'href="https://example.com">MySite</a>' +
                '</p>' +
            '</div>';
        // ==== EDIT YOUR CONTENT ABOVE ====

        sideBox.appendChild(widget); // prepend() for top
    }

    document.addEventListener('route_updated', function () {
        setTimeout(injectWidget, 100);
    });

    var obs = new MutationObserver(injectWidget);
    obs.observe(document.body, { childList: true, subtree: true });

    injectWidget();
})();
</script>

Kim Welch

I guess I can include the little logo just like I would for a linked image?

Tawsif Ahmed Riyad

Kim Welch, yes, you can.