EVENT: Forge new frontiers: The Weavy + Atlassian Forge hackathonRead more
QUICKSTART

Add Weavy to your app built with Retool

This quickstart tutorial will show how to use our UIKit Web and add our building blocks as custom components to your app built with Retool.

Have Retool ready, set the parameters to unlock the tutorial, and get started.

Don't have the parameters? Sign up for free, or sign in and set up your environment to get the parameters.

1. 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
  • All settings are already included, so all you have to do is Deploy (up to the right).
    • If the Deploy button is disabled, 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

2. Add query

Navigate to your app, go to Code in the left panel to add a query, and 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

 

importworkflow-empty

3. Add custom component

Open up your app in Retool and 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
  • Top-level navigation
  • Storage and cookies

4. Modify Model

For the custom component, update Model with;
Update model 
{
  "token" : {{ getAccessToken.data.access_token }}
}

5. 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>

<wy-#### uid="wyuid####"></wy-####>
  • Line 6 - getting the access token from the workflow.
  • Line 10 - building block rendered. Change what building block in the dropdown in the parameters at the top of the page.

    You can set UID to whatever you want. It's the unique identification for the building block - for example if you want to have more than one chat in the same view.

6. Take it for a test run

The Custom Component with Weavy should load instantly, but toggle to Preview mode to see the full experience.

On this page
Unlock the tutorial with your Weavy API key.
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
Start building
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
Start importing

There's more

Check out the other tutorials for setting up workflows, queries, and more.

All tutorials