<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Get started

Add Weavy to your web app

This guide will show how to add Weavy to your web app using our UIKit, built with web components.

The final product will be our chat component rendered in your web app.

Have your project ready, and let's get started.

1. Weavy API Key

We need the backend URL and an API key to communicate with Weavy.

2. Add script element

Loading the UIKit with a <script> element is the easiest way to add Weavy to your application as it automatically registers all components, and you can start using Weavy directly. Just add the following <script> element to load the UIKit directly from your Weavy backend.
Add to head of your page
<script src="WEAVY-URL/uikit-web/weavy.js"></script>

3. Create a demo user

For this tutorial, we're creating a demo user, and for that, we need a display name (what the end user sees) and a unique identifier.
Now it's time to create the user in Weavy through the API using Curl with the information provided.
Copy and paste this into a terminal window and run it
curl WEAVY-URL/api/users -H "Authorization: Bearer WEAVY-API-KEY" --json "{ 'uid': 'UID', 'name': 'NAME' }"

4. Issue access token

For our chat component to know who we're rendering for, we must issue an access token that we'll pass on to the UIKit.

Copy and paste this into a terminal window and run it
curl -X POST WEAVY-URL/api/users/UID/tokens -H "Authorization: Bearer WEAVY-API-KEY"

This will return an access token - copy and paste the value below.

5. Add chat component

Now, it's time to add the chat component to your web app using the access token we just generated.
This an example of how to add Weavy including head
<!DOCTYPE html>
<html>
  <head>
    <script src="WEAVY-URL/uikit-web/weavy.js"></script>
    <script>
      const weavy = new Weavy();
      weavy.url = "WEAVY-URL";
      weavy.tokenFactory = async (refresh) => "WEAVY-ACCESS-TOKEN";
    </script>
  </head>
  <body>
    <wy-chat uid="weavy-chat"></wy-chat>
  </body>
</html>

6. Done!

You should now have a group chat component up and running in your web app.

This tutorial's goal was to quickly introduce the concepts of Weavy, especially the understanding of creating users and issuing access tokens.

Now it's time to start building for real - follow our recommended next steps below.

Next

What's next?

Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account