Guides
Back to the USERSNAP website

Installation on Blazor

Suggest Edits

Installing the Usersnap space code snippet in a Blazor app is a relatively straightforward process.

Generally speaking, you can use the Usersnap code snippet either in your Blazor WebAssembly app or your Blazor Server app.

Blazor WebAssembly

In a Blazor WebAssembly app, you can add the Usersnap snippet code to the index.html file, which is located in the wwwroot folder of your app. This file is responsible for loading the assets and initializing the app, so adding the Usersnap snippet here will ensure that it's loaded on every page of your app.

<body>
    ...

    <script src="_framework/blazor.webassembly.js"></script>
    <script>

      window.onUsersnapCXLoad = function(api) {
         api.init();
         window.Usersnap = api;
      }
      var script = document.createElement('script');
      script.defer = 1;
      script.src = 'https://widget.usersnap.com/global/load/[GLOBAL_API_KEY]?onload=onUsersnapCXLoad';
      document.getElementsByTagName('head')[0].appendChild(script);

    </script>
</body>

Please note that It is possible to add the Usersnap code snippet in the head of the HTML file in a Blazor WebAssembly app, as it is a single page application (SPA) but the script is only loaded once when the application is loaded.

Alternatively, you can use JavaScript interop to call the Usersnap script when you need it, this way you can call the script when the user triggers an action, for example, when a button is clicked.

You can check the official Blazor JavaScript interoperability guide for more information.

Blazor Server

In a Blazor Server app, you can add the Usersnap code snippet to the _Host.cshtml file, which is located in the Pages directory of your app. This file is responsible for rendering the initial HTML of your app, so adding the Usersnap snippet here will ensure that it's loaded on every page of your app.
The _Host.cshtml file acts as the entry point for the app and is responsible for rendering the initial HTML sent to the client, and also where global resources (such as stylesheets or scripts) and additional configurations can be added.

<body>
    ...

    <script src="_framework/blazor.server.js"></script>
    <script>

      window.onUsersnapCXLoad = function(api) {
         api.init();
         window.Usersnap = api;
      }
      var script = document.createElement('script');
      script.defer = 1;
      script.src = 'https://widget.usersnap.com/global/load/[GLOBAL_API_KEY]?onload=onUsersnapCXLoad';
      document.getElementsByTagName('head')[0].appendChild(script);

    </script>
</body>

You can check the official Blazor JavaScript interoperability guide for more information.

Using the Usersnap API in a Blazor app

If you want to use the Usersnap API within your Blazor project, you will need to use JavaScript interop to call the API from your C# code.
JavaScript Interop allows you to call JavaScript code from C# and vice versa.

First, You need to expose the Usersnap API on the window object by adding our code snippet to the _Host.cshtml file for a Blazor Server app, or to the index.html file for a Blazor WebAssembly app:

<script>
   window.onUsersnapLoad = function(api) {
       api.init();
       window.Usersnap = api;
     }
     var script = document.createElement('script');
     script.defer = 1;
     script.src = 'https://widget.usersnap.com/global/load/<GLOBAL_API_KEY>?onload=onUsersnapLoad';
     document.getElementsByTagName('head')[0].appendChild(script);
</script>

Once the API is exposed, you can call it from your C# code using the IJSRuntime interface.

By injecting the IJSRuntime interface in the component where you want to use the Usersnap API, you can call the API by using the InvokeVoidAsync method:

await JSRuntime.InvokeVoidAsync("Usersnap.show", new object[] { "[Project-API-Key]" });

It is important to note that you should only call the API after the page is fully loaded, to avoid any issues with the functionality of your app. You can use the OnAfterRender method of the component to make sure the API is called only when the component is fully rendered.
For more information, check out the official Call JavaScript functions from .NET methods guide.

Updated almost 2 years ago