Get started with Weavy

This quick start will show you the steps for adding Weavy to your application.

Prerequisites

Weavy works with all major web frameworks, and whether you’re a hardcore full stacker, or a DIY developer using a Low Code platform, Weavy is for you. When adding Weavy to your web application there are just 3 prerequisites:

  • You must be able to add Weavy components to pages and views in your UI.
  • Your application must have a way to identify the currently logged in user.
  • There must be some way to make an API call from your backend to the Weavy environment.

Install Weavy

Go to get.weavy.com and create a Weavy environment (if you haven't already). Make a note of the URL —you’ll need it later. We'll reference this as {WEAVY_URL}.

Add the UIKit

The Weavy UIKit is a JavaScript library that you add to your app or website. Being built on web components, it runs natively in all browsers. Just add the following <script> element to load the UIKit directly from your Weavy environment.

<script type="module">
  import { Weavy, WyMessenger } from "{WEAVY-URL}/uikit-web/weavy.esm.js";
</script>

Initialize the UIKit

Next, you need to initialize the UIKit with the url to your Weavy environment and a tokenUrl for authentication.

For details on how to implement the token endpoint on your server see the authentication article.

const weavy = new Weavy();
weavy.url = "{WEAVY-URL}";
weavy.tokenUrl = "/token";

Add components

Finally, after initializing Weavy, you can start adding components to your application. In this example we'll show you how to add a messenger component that renders a fully functional chat application for private messaging with one-to-one and group chats.

Note that you need to replace {WEAVY-URL} with with the url to your environment and set the weavy.tokenUrl value to your token endpoint.

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { Weavy, WyMessenger } from "{WEAVY-URL}/uikit-web/weavy.esm.js";

      const weavy = new Weavy();
      weavy.url = "{WEAVY-URL}";
      weavy.tokenUrl = "/token";
    </script>
  </head>
  <body>
    <wy-messenger></wy-messenger>
  </body>
</html>

Troubleshooting

If things are not working as expected, check the output in the console window of your browser for any warnings and/or errors.

Next steps

Continue reading our comprehensive JavaScript guide for more in-depth information. If you prefer, we also have specific documentation for many common frameworks such as React, Angular, and Vue.js.