Uservoice Javascript widget - How to popup feedback form automatically on page load

Question

In an HTML page, how can I know when a externally loaded Javascript object is defined and ready for methods to be called on it?

Problem specifics:

I'm using the uservoice feedback web application including their Javascript widget and their SSO (Single-SignOn) option.

Everything works fine. There is a prominent Feedback tab stuck on the left of the window. And I can use the following anchor for additional links to open their popup feedback widget:

<a href="#" onclick="UserVoice.Popin.show(uservoiceOptions); return false;">feedback</a>

But... I'm having trouble trying to support a extra workflow - on one particular page (e.g. the feedback page) I want the uservoice feedback form to automatically popup when the user goes to the page without being initiated via a click event.

I tried putting the following at the bottom of the page:

<script type="text/javascript">
function _autoPopupUserVoice() {
  UserVoice.Popin.show(uservoiceOptions);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _autoPopupUserVoice : function() { _loadSuper(); _autoPopupUserVoice(); };
</script>

But Firebug shows a error:

"UserVoice is not defined".

So I guess the uservoice Javascript hasn't been executed by the time _autoPopupUserVoice() is called.

I've tried a few other things but haven't managed to get it working. How can know when the Uservoice Javascript object is loaded and ready for methods to be called on it?

For reference the Uservoice object is loaded via the following Javascript at the end of the page:

<script type="text/javascript">
function _loadUserVoice() {
  var s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', ("https:" == document.location.protocol ? "https://" : "http://") + "cdn.uservoice.com/javascripts/widgets/tab.js");
  document.getElementsByTagName('head')[0].appendChild(s);
}
_loadSuper = window.onload;
window.onload = (typeof window.onload != 'function') ? _loadUserVoice : function() { _loadSuper(); _loadUserVoice(); };

Tom · Accepted Answer · 2009-12-08T19:09:55.877

I came up with the following javascript which I put at the bottom of the page, under the Uservoice widget code. It loops round every 100ms and tests whether the Uservoice object is defined. Once it is defined, it calls the Popin method to popup the widget:

<script type="text/javascript">

// Show the Uservoice feedback widget
function _autoPopupUserVoice() {
    UserVoice.Popin.show(uservoiceOptions);
}

// Wait for the uservoice JS object to load, fire _autoPopupUserVoice when it is finished.
if ((typeof window['UserVoice'] == 'undefined')) {

    var timer = setInterval(function () {
        ok = false;
        try { ok = (typeof window['UserVoice'] != 'undefined');} catch (e) {}

        if (ok) {
            clearInterval(timer);
            _autoPopupUserVoice();
        }
    }, 100);
}
</script>

I'm sure there's a better way to do this. Perhaps there is even a callback function that I'm unaware of?

Update (8/Dec/09): This method is semi-approved by Uservoice:

Thanks for contacting UserVoice support. That method looks perfectly reasonable. We don't have any in built methods for doing this (currently, we are looking at this type of functionality) but the code described even though quite hacky, should do the trick.

score 1 · Answer 2 · edited Nov 06 '21 at 11:41

This will done by using jquery. Instead of calling the page you can call the particular section on page load using Javascript.

$(document).ready(function() {  

        var id = '#dialog';
    
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
        //transition effect     
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9);  
    
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
              
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //transition effect
        $(id).fadeIn(2000);     
    
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        
        $('#mask').hide();
        $('.window').hide();
    });     
    
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     
    
});

Uservoice Javascript widget - How to popup feedback form automatically on page load

Problem specifics:

2 Answers2