Tutorial

Add group chat to your Retool app

This tutorial will show how to add a contextual group chat to your Retool app using our UIKit Web.

Have Retool ready, get your Weavy API key, and get started.

Don't have your Weavy API Key? Sign up for free, or sign in and set up your environment to get your API key.

1. What we are building

We're building a group chat - with built-in authentication with your users - that can be added to any view in your Retool app - just like the one you see here. 

Try it out, and see what you can do;

  • Attach and preview files
  • Reactions
  • Polls
  • Start a Zoom meeting
  • And more

Follow this tutorial, and you'll have a group chat within minutes in your Retool app.

2. Weavy API Key

First, we need the Weavy API key to be able to connect to our API to create and fetch user information.

3. Import workflow

First, we need to import a workflow that will sync the user with Weavy and give us an access token.

  • Download WeavyRetoolWorkflow.JSON
  • Go to Workflows in Retool
  • Click Create New and select From JSON
  • Choose to Upload a file in the modal and then Create workflow
  • All settings are already included, so all you have to do is Deploy (up to the right)
    • If the Deploy button is disabled, it's either already deployed (look for the text Latest version deployed) or some of the settings might not have loaded correctly - simply refresh, and it should be working.
    • Any message about no triggers configured can be ignored.
WeavyRetoolWorkflow.JSON

4. Add query

Navigate to your app, go to Code in the left panel, to add a query, select Import Workflow

  • Name it getAccessToken
  • Change to Run query automatically when inputs change
  • Select WeavyRetoolWorkflow from the Select Workflow dropdown
  • Change Workflow parameters to JSON and change the values to;
    • avatar: {{ current_user.profilePhotoUrl }}
    • email: {{ current_user.email }}
    • fullname: {{ current_user.fullName }}
    • uid: {{ current_user.sid }}
  • Click Save & Run
  • If successful, you should see an access token in the output window

 

importworkflow3

5. Add custom component

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;

  • Remove all code in Model
  • Remove all code in IFrame Code

Check the following for Interaction;

  • Downloads
  • Forms
  • Modals
  • Popups
  • Fullscreen
  • Top-level navigation
  • Storage and cookies
addcustomcomponent

6. Modify Model

For the custom component, update Model with;
Update model
{
  "token" : {{ getAccessToken.data.access_token }}
}
This will trigger the workflow, return an access token, and pass it to the custom component.

7. Modify IFrame Code

Modify IFrame Code in the inspector - copy and paste this code
<script src="WEAVY_SCRIPT"></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:0px;
    font-family: "Inter var", sans-serif
  }
  html, body { 
    padding: 0px; 
    margin:0px; 
    height:100%;
  }
</style>

<wy-chat uid="retool-chat"></wy-chat>
  • Line 6 - getting the access token from the workflow passed through the model.
  • Line 12-13 - set styling using CSS variables, find more variables here.
  • Line 23 - rendering the Chat building block.
You can set UID to whatever you want (cannot contain whitespace and must contain at least one non-digit).

It's the unique identification for the building block - for example, if you want to have more than one chat in the same view, you need different UIDs.

8. Take it for a test run

The Custom Component with the Chat building block added should load instantly, but toggle to Preview mode to see the full experience.

Messages being sent are from the logged in user in Retool, so you can invite others to the same app and start the conversation.

retool-chat
Next

What's next?

Build

Build workflow and custom component

A step-by-step guide to building a workflow and rendering a building block with the logged-in user.

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.

Best way to learn step by step how it works
Import

Import complete workflow and app

Use our JSON templates and import to quickly have it up and running to experiment.

We created a prebuilt workflow that fetches information about the current user in Retool, communicates with the Weavy API, and renders all our building blocks in an app.
The fastest way to get up and running with access tokens, etc.
Easy to extract to your own apps/modules