Embed a UserVoice widget in an add-in in Excel for Windows

问题

(* I clean up the initial thread *)

I want to add the UserVoice widget to one Excel add-in. I have made the following example code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
  </head>
  <body>
    <div id="contact_us">Contact us</div>
  </body>
  <script>
    // Include the UserVoice JavaScript SDK (only needed once on a page)
    UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/KIXLyRfZDu6MdnaaVtnlSw.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();

    UserVoice.push(['addTrigger', '#contact_us', {}]);
  </script>
  </body>
</html>

It works well under JSBin and Excel Online, clicking on Contact us shows the message window. However, under Excel 2016 for Windows, after several seconds of loading (as expected), clicking Contact us does not open such a window.

I don't know if there is something special we need to set up in Home.html or the manifest file of the add-in, or the setting of Excel for Windows. I am also trying to change the position where the window is supposed to pop up (but still not yet works)... Could anyone help?

Edit 1 I test the code of Michael Saunders, it works under Excel Online, but still does not work in Excel for Windows. The follows is a screenshot. Note that, after clicking on Contact us, the triangle symbol (in red) appeared (in my initial example, it has the same phenomena. And if we just click on the blank area of the task pane, it has the same phenomena too.)

Maybe the box is already shown, but not in an area of the task pane that we can see?

回答1:

Here's a complete working page:

<!DOCTYPE html>
<html>
<head>
    <title>UserVoice test</title>
    <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/Office.js" type="text/javascript"></script>
</head>
<body>
    <div id="contact_us">Contact us</div>
</body>
<script>
    UserVoice=window.UserVoice||[];(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/KIXLyRfZDu6MdnaaVtnlSw.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})();
    UserVoice.push(['set', {
        width:'300px',
        post_suggestion_enabled:true
    }]);
    UserVoice.push(['identify', {}]);
    UserVoice.push(['addTrigger', '#contact_us', { mode: 'contact',menu_enabled:true, }]);
</script>
</html>

Some things I changed include:

Changed the #contact_us element to be a div instead of a link.
Removed your extra tag
Added the optional parameters in the addTrigger call
Added identify and set statements

Also, make sure your environment is in a good state:

Clear your browser cache to ensure that old code isn't present during debugging: open Internet Explorer (not Edge) and select Safety > Delete Browsing History > Select all boxes > Delete > close all IE windows and all Office windows.
Host the code online

回答2:

In terms of loading-speed, could you load the UserVoice dynamically, i.e., using jQuery.getScript(...)?

For #2, what were you expecting?

来源：https://stackoverflow.com/questions/38492961/embed-a-uservoice-widget-in-an-add-in-in-excel-for-windows

标签

javascript

ms-office

office-js

uservoice