Niva's Embeddable Widgets are plug-and-play UI components that allow you to collect information or documents from your users without writing your own frontend upload or validation logic. They’re designed to help you integrate with Niva with minimal effort.1.
No need to build your own upload fields or handle edge cases like file size validation.
2.
We handle ongoing improvements and bug fixes, so you can focus on your product.
3.
As more widgets become available, you can add them to your existing workflow without refactoring everything.
Note: For highly customized UI requirements or bespoke workflows, consider using our API endpoints directly rather than relying on widgets.
Installation#
To start using Embeddable Widgets, you’ll only need to include our JavaScript file in your HTML. This registers custom web components you can drop into your pages.Add the Script
Include the following <script> tag in the <head> (or at the end of <body>):This file contains the code for all of our embeddable widgets—present and future. There are no external dependencies, and all modern browsers are supported. This must always be loaded directly from https://assets.niva.co, rather than included in a bundle. assets.niva.co will automatically provide the latest available SDK.Authentication#
Using a widget requires a public token (used by the browser) which is safe to embed in your HTML. This token is available in your API settings page.Your public token is different from your private token. Do not ever embed your private token in your HTML.
Submission Token#
Some widgets act on an already created submission. For example, the document upload widget allows document uploads to a previously created submission. Before the widget can accept a user's file, you must create a submission in the backend using your private token and the Niva JSON API.The token field in the response is needed to authenticate your widget for the submission.The submission token is valid for 24 hours. If the token has expired, you can fetch a new refreshed token by using the GET submission API endpoint.
Once you have the submission token from your backend, you can embed the widget in your frontend and pass it as an attribute to the widget element.Here’s a quick example using the Document Upload Widget (the first widget we offer):