How to add widget with custom widget link (invisible button)

You can use custom link to open UserEcho widget. 

We will provide detailed steps how to implement it on your website.

First of all you need to configure your new widget in Portal -> Widgets.

Once you have it configured set "Button mode" to "Invisible" under "Widget button settings".

This will hide widget button from your website.

Now you need to add some custom link to your website. This is example how it could looks like:

<a href="javascript:;" class="js-ue-feedback">Need help?</a>

Now when we have the link it's time to make it alive. You have two ways to do it:

1. Load widget script when users click on the link (no script preload). It will not add any time to your page load but will take a little time to open the widget. We would still recommend this variant for invisible button.

Replace [my_alias] with your project alias and [my_widget_id] with your widget ID.

<!-- Start UserEcho Widget script -->
<script>
!(function () {
    // opens widget and checking if widget is ready to be opened
    function openWidget(){
        if (typeof UE === 'undefined'){
            setTimeout(openWidget,100)
        }else{
            UE.Widget.open()
        }
    }
    
    // load widget script by link click
    const ueds = document.querySelectorAll('.js-ue-feedback');
    if (ueds) {
        ueds.forEach(item => {
            item.addEventListener('click', function () {
                var _ws = document.createElement("script");
                _ws.type = "text/javascript";
                _ws.src = "https://[my_alias].userecho.com/s/cdn/widget/v3.js?id=[my_widget_id]";
                // this is important to do not wait!
                _ws.setAttribute("delay", 0);
                document.body.appendChild(_ws);
                openWidget();
            })
        })
    }
})()
</script>
<!-- End UserEcho Widget script -->

2. Load widget script on every page load (script preload). It will add a little load time to your page but make reaction on the link faster.

Replace [my_alias] with your project alias and [my_widget_id] with your widget ID.

<!-- Start UserEcho Widget script -->
<script src="https://[my_alias].userecho.com/s/cdn/widget/v3.js?id=[my_widget_id]"></script>
<script>
!(function () {
    // open widget by link click
    const ueds = document.querySelectorAll('.js-ue-feedback');
    if (ueds) {
        ueds.forEach(item => {
            item.addEventListener('click', function () {
                UE.Widget.open()
            })
        })
    }
})()
</script>
<!-- End UserEcho Widget script -->