Embed the widget into a web page

How to integrate the feedback request into a page

This little guide should support you in adding the feedback request embedded into your web pages or web applications 😀. As a little note upfront, this needs simple technical skills to integrate. As we don't know what technology you are using on your website or app, we try to make this very generic for you.

How to embed a feedback widget into your website content

Let's take a sample page.

We created a new project type "Engagement" with thumbs up and down.

As a next step, we implemented the Usersnap widget code into the pages.

The next step is to implement a similar HTML code like this to your website. You can decide on your own what you want to display here. A click on one of the thumbs will initiate a JavaScript function that sends a rating.

<b>Was this content helpful to you?</b>
      <br /><br />
      <a href="#" onClick="javascript:openWidgetEmbed( 1 )"><img width="50" border="0" src="img/t-up.png" /></a> 
      <a href="#" onClick="javascript:openWidgetEmbed( -1 )"><img width="50" border="0" src="img/t-down.png" /></a>

This JavaScript function is a custom-made one. It's not automatically available (via our API). You have to add it to your website codebase. If you are not technically experienced, please, ask one of your developers to do that.

📘

Be aware that this has to be implemented after the initialization of the Usersnap snippet code.

<html>
    <body>

      <b>Was this content helpful to you?</b>
      <br /><br />
      <a href="#" onClick="javascript:openWidgetEmbed( 1 )"><img width="50" border="0" src="img/t-up.png" /></a> 
      <a href="#" onClick="javascript:openWidgetEmbed( -1 )"><img width="50" border="0" src="img/t-down.png" /></a>
      <script>
        window.onUsersnapCXLoad = function(api) {
          api.init();
          window.Usersnap = api; // please, expose the API with that

        }

        var script = document.createElement('script');
        script.defer = 1;
        script.src = 'https://widget.usersnap.com/global/load/[Global snippet API-key]?onload=onUsersnapCXLoad';
        document.getElementsByTagName('head')[0].appendChild(script);
      </script>

    <script>
        function openWidgetEmbed( rating ) {
          var projectID = '[project-specific API-key]';

          window.Usersnap.on('open', function(event) {
            // in case you have only one widget the value will be set on this widget
            if (event.apiKey === projectID) {
                event.api.setValue('rating', rating);
            }

          });

          window.Usersnap.show(projectID).then((widgetApi) => widgetApi.open());
          window.Usersnap.on('close', function(event) {
              window.Usersnap.hide(projectID);
          });
        }
    </script>
    </body>
</html>

Can I show statistics in my website how often this article was helpful?

Unfortunately, this is not possible yet. Usersnap is a customer feedback platform and offers a variety of different widgets to collect feedback from NPS, CSAT via visual feedback to feature requests. But we do not specifically provide a HelpCenter solution and that's why this is a more generic solution.

On the other hand with a pure help center solution, your feedback ends up in a silo and that's potentially not what you want.


Did this page help you?