✍️ Description
This component can be used to let your customers import data into Via directly from your website without requiring a login.
🔨 Usage
First, you will need to create a Import instance. The import constructor takes 4 parameters.
| Code Block |
|---|
|
const importer = new Extend.import(boardId, listId, companyId, embedToken) |
BoardId* (string) | ListId* (string) | companyId* (string) | embedToken* (string) |
|---|
The Board ID on which you want the cards to be imported to. | The List ID on which you want the cards to be imported to. | Your Company ID | The embed token you obtained from the ‘API Settings’ in your admin dashboard |
With the Import component fully configured, now call open on the importer to start the import process.
| Code Block |
|---|
|
importer.open(); |
Basic example
| Code Block |
|---|
|
<script
type="text/javascript"
src="https://attachments.viaboards.io/embed/embeds-prod.js"
></script>
<script type="text/javascript">
const boardId = "YOUR_BOARD_ID";
const listId = "YOUR_LIST_ID";
const companyId = "YOUR_COMPANYID";
const embedToken = "YOUR_EMBED_TOKEN";
const importer = new Extend.import(boardId, listId, companyId, embedToken);
importer.onSuccess((message) => {
// Do something with the data here
return "Done!";
});
</script>
<div id="root">
<button onclick="importer.open()">Open Importer</button>
</div> |
📲 Callbacks
onClosed
This will get called anytime the importer is closed by the user or another process.
| Code Block |
|---|
|
importer.onClosed((message) => {
console.log(message);
}); |
onLoaded
This is fired after the importer iFrame is fully loaded and ready to be displayed to the user.
| Code Block |
|---|
|
importer.onLoaded((message) => {
console.log(message);
}); |
onError
Any and all errors will be routed to this callback.
| Code Block |
|---|
|
importer.onError((message) => {
console.log(message);
}); |
onProccessing
Fired when a import process is started.
| Code Block |
|---|
|
importer.onProccessing((message) => {
console.log(message);
}); |
onSuccess
When the import process is complete we will respond here.
| Code Block |
|---|
|
importer.onSuccess((message) => {
console.log(message);
}); |
