Tutorial
Add group chat to your Retool app
Sign in
Prerequisites
We assume you are well acquainted with the Retool IDE and have an account. If not, please take a look at the Web apps introduction first.
We assume you are well acquainted with the Retool IDE and have an account. If not, please take a look at the Web apps introduction first.
We'll import this workflow, get the authenticated user in your Retool app, sync it with Weavy, and return an access token.
WeavyRetoolWorkflow.JSON
(link below)Create New
and select From JSON
Upload a file
in the modal and then Create workflow
Deploy
(up to the right)
Latest version deployed
), or some of the settings might not have loaded correctly - refresh, and it should be working.Now, we'll put the workflow to work in your app to get an access token for the logged-in user.
Navigate to your app, go to Code
in the left panel, to add a query, select Import Workflow
getAccessToken
WeavyRetoolWorkflow
from the Select Workflow dropdown{{ current_user.profilePhotoUrl }}
{{ current_user.email }}
{{ current_user.fullName }}
{{ current_user.sid }}
Run behavior
and select Automatic
Save & Run
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
;
Model
IFrame Code
Check 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 chat 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-chat uid="weavy-retool-chat"></wy-chat>
</div>
The Custom Component
with the Chat 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 - group chat added, just like that.
We need an API key to communicate with Weavy for authentication, etc
The next step is to fetch the logged-in user of your Retool app, create a workflow to sync the user with Weavy and generate an access token so all of your users can start using our building blocks contextually.
Get answers faster with a direct channel to our developer success team or by asking our generative AI.
Want to do it the traditional way? Then fill out the form 😉.