Quick Start

Follow this quick start quide to get up and running with Weavy in no time. If you want to learn more in depth about any topic, please check out the rest of the documentation.

1. Create the Weavy Backend

The first thing you need to do is to set up the Weavy Backend. Head over to get.weavy.io and create a free account. This is the easiest and quickest way to get up and running with a Weavy backend and does not require you to deploy anything yourself. When your backend is up and running you will have access to all information you need on your account page.

2. Select a Weavy frontend of your choice

Now it's time to get something displayed in your own application. Choose between either the vanilla JS Drop-in UI or the React UI kit. We'll be using the Drop-in UI for this Quick Start, but if you prefer the React UI kit, head over to the React UI kit documentation to learn more about how to setup Weavy using React. It's just as easy as the Drop-in UI.

3. Add the Drop-in UI library

Let's start by loading the Drop-in UI library in your application. You have two options here:

npm install @weavy/dropin-js

Fig 1. Adding the library with npm

or...

<!-- HTML -->
<script src="https://cdn.jsdelivr.net/npm/@weavy/dropin-js/dist/weavy-dropin.js" crossorigin="anonymous"></script>

Fig 2. Adding the library from CDN

4. Add the styles

Now that we have the library in place we need the Weavy css to make it look amazing. The Weavy frontend styles can be added as:

npm install @weavy/themes

Fig 3. Adding the styles with npm

or...

<!-- HTML -->
<link href="https://cdn.jsdelivr.net/npm/@weavy/themes/dist/weavy-default.css" rel="stylesheet" crossorigin="anonymous" />

Fig 4. Adding the styles from CDN

5. Initializing Weavy

Now it's time to add the Messenger app. The Messenger is one of our apps that you can add to your application. Add the following javascript to your page:

// import from the packages if you are using npm and a build system such as webpack
import Weavy from "@weavy/dropin-js";
import "@weavy/themes/dist/weavy-default.css";

const weavy = new Weavy({
  url: "https://my-backend.weavy.io",
  jwt: () => "{SERVER_GENERATED_TOKEN}"
});

const messenger = weavy.app({ 
  id: "my-messenger", 
  type: "messenger",
  container: "#my-container"
})

Fig 5. Add the script to your page

Make sure you have an element in you html with the id my-container. This id could of course be anything you like.

<!-- HTML -->
<div id="my-container"></div>

Fig 6. Add the element container for Weavy Messenger

6. Setting the url

In step 5 above, replace the url parameter with the url to the Weavy backend you created at weavy.io.

7. Setting the correct JWT

In step 5 above you can see that the Weavy instance is expecting a JSON Web Token (JWT). Instead of {SERVER_GENERATED_TOKEN} this must be a valid JWT with user information of the currently signed in user in YOUR application. When you created the Weavy backend at weavy.io, you actually got a JWT for demo use that you can use for a limited period of time. This token is just to get you up to speed and simplify the initial set up process. When everything is up and running in your test environment, you should definitely check out the authentication documentation on how to authenticate and pass real JWT's from the Weavy frontend library to the Weavy backend.

Sign in to your weavy.io account and click the "Quick Start" button in the top right corner. In the code example on the page, copy the JWT and replace the {SERVER_GENERATED_TOKEN} string.

8. Try it out!

Run you application and the Weavy Messenger will show up on your page.

Weavy Docs