You will need:
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
For our Weavy component to work, we need an access token from the authentication workflow.
Go to Code in the left panel, click the + and select Import Workflow
getAccessTokenWeavyRetoolWorkflow from the Select Workflow dropdownWorkflow parameters according to the JSON snippet below.Workflow paramaters
{
"uid" : "{{ current_user.sid }}",
"fullname" : "{{ current_user.fullName }}",
"email" : "{{ current_user.email }}",
"avatar" : "{{ current_user.profilePhotoUrl }}"
}Run behavior to AutomaticSave & RunMake sure you have imported the authentication workflow into Retool following our tutorial before adding Weavy features to your app.
Search for Custom component in the components search bar.
Drag and drop it onto the canvas and do the following in the inspector:
For Content;
ModelIFrame CodeCheck the following for Interaction;
Model with;Model in the inspector - copy and paste this code
{
"token" : {{ getAccessToken.data.access_token }}
}In the IFrame code for the custom component, we'll initiate the Weavy context and pass the access token to the token factory for authentication.
Once authenticated, we can render the files component from Weavy.
IFrame Code in the inspector - copy and paste this code
<script src="WEAVY-URL/uikit-web/weavy.js"></script>
<script>
const weavy = new Weavy();
weavy.url = "WEAVY-URL";
window.Retool.subscribe(function (model) {
weavy.tokenFactory = model.token ? async (refresh) => model.token : undefined;
});
</script>
<style>
:root {
--wy-theme-color: #3170F9;
--wy-border-radius:8px;
font-family: "Inter var", sans-serif
}
html, body {
padding: 0px;
margin:0px;
height:100%;
}
</style>
<div style="height:100%;display:flex;background:#fff">
<wy-files uid="weavy-retool-files"></wy-files>
</div>Replace WEAVY-URL with your backend URL.
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
The Custom Component with the Files component should load instantly - but toggle to Preview mode to see the full experience.
Note that this is fully working now and available for all your users if you want - Google Drive support added, just like that.
To access live chat with our developer success team you need a Weavy account.