HTML & JS Embed
If you are using a (currently) unsupported client framework, you can use our embedded script. This will show the Widget inside an iframe.
Add Script
You copy this snippet to your code before the closing body tag.
It will add impler
variable in window
, so we can call its init
and show
methods later.
Add Import Button
Import widgets get opened when the user clicks on Import
button. So let's add an import button,
Initialize Widget
Before the widget gets shown you have to call its init
method. So write this code, after added embed
script.
Here is the description of what we just did,
generateUuid
the function generates UUID which helps add multiple import widgets on the same page.init
method on impler initializes impler widget.readyCheckInterval
calls implerisReady()
method in the interval of 1 second to check whether the impler widget is initiated or not.Once
Impler
is ready we removedisabled
attribute from the import button, which the user can click to open the import widget.
Show Widget
After the initialization, when the user clicks on the Import button we will call show
method to open the widget,
That's it, your app is now ready to onboard user data into your application.
Customize Texts
Listening to Events
Impler instance provides message
an event listener which gets called for various events happening with the widget. Here is how to attach event listener,
eventData
follows the { type, value }
structure.
Complete Code Example
Data Seeding in Sample File
You can provide default data to fill in the Sample Excel file that gets generated from the Import widget. Default data act as a placeholder for the user to further add or update the data in the file.
Here is an example of how to provide data to fill in the sample file,
Advanced Validations
You can provide Advanced Validations in the column as validations
key,
Providing Runtime Schema
The schema and output provided in the web.impler.io portal for any import behave as default values for any Import. It's possible to override the default schema and output, to adapt dynamic nature of Import.
Here is an example of how to provide dynamic schema and output,
Passing Extra Parameters
It's an obvious need that we want to pass userId
or orgId
representing who imported the data. In that case, you can pass that data in an extra parameter.
You can pass string
, object
, or array
in extra. Here is an example of how to do it,
The extra parameters get sent to an application during the webhook call.
Changing Import Title
By default, the Import widget takes the name of the Import to show in the title. But it's possible to change the title
from the implementation side too. Helpful to keep the title separate from what the name is given in the web portal.
Here is how,
Programmatically Closing the Import Widget
You can close the import widget programmatically by calling close
method on impler instance,
Here is how,
Changing Theme Color
You can pass a primary color to the import widget, which will update the colors of all buttons accordingly to match your app's theme color.
Providing Authentication Header Value
In case the backend endpoint is authenticated with the token, it's possible to provide token value from the implementation side.
Have any doubts? Shoot us a message directly on Discord.
Last updated