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

Question

(* 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?

score 1 · Answer 1 · answered Jul 21 '16 at 00:42

1

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

For #2, what were you expecting?

answered Jul 21 '16 at 00:42

Michael Zlatkovsky - Microsoft

8,424
1
33
46

For getString, please see my update... I didn't use the `url` argument, is it correct (the test is fine)? – SoftTimur Jul 21 '16 at 01:05

Michael Saunders · Accepted Answer · 2016-07-27T20:11:10.310

0

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

edited Jul 27 '16 at 20:11

answered Jul 21 '16 at 22:48

Michael Saunders

2,662
1
12
21

It does not work... Actually, I realise that the window is due to `href="mailto:questions@uservoice.com"`. Clicking on `Contact us` leads to sending an email... So what should I put as the value of `href`? I tried almost all the ways [here](https://developer.uservoice.com/docs/widgets/methods/), but none of them works in an add-in... – SoftTimur Jul 21 '16 at 23:20
Ah, changed my answer since I didn't notice you were using a link. That's the problem. – Michael Saunders Jul 21 '16 at 23:53
I put exactly [this code](http://jsbin.com/cojabawupu/2/edit?html,output) to my Home.html. The JSBin works, whereas this codes does not work in an add-in: clicking on `Contact us` does not have any reaction... – SoftTimur Jul 22 '16 at 00:30
Ok, I've edited my response to include my entire working sample with all the fixes – Michael Saunders Jul 27 '16 at 18:01
I tested your your response, it still does not work... really odd, please see the update in the OP... – SoftTimur Jul 27 '16 at 19:57
Make sure you've cleared your browser cache - instructions added – Michael Saunders Jul 27 '16 at 20:01
1

Are you hosting the code locally or on the internet? – Michael Saunders Jul 27 '16 at 20:08
I've hosted this exact page at https://michael-saunders.com/testing/uv.html. Point your manifest there – Michael Saunders Jul 27 '16 at 20:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118473/discussion-between-michael-saunders-and-softtimur). – Michael Saunders Jul 27 '16 at 20:11
I tried to host the code on the internet, it finally works... did not know there may be a difference between locally and on the internet... Thank you very much... – SoftTimur Jul 27 '16 at 20:16
No problem. Must be some weird check that Uservoice is doing for some reason – Michael Saunders Jul 27 '16 at 20:19

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

2 Answers2

Linked