Chat building block
Use the chat building block to render a complete and functional chat inside your application. The chat block includes all the features you expect from a chat as as seen below.
Get started
Follow the steps below to get started in minutes!
1. Create account
Sign up for an account on https://get.weavy.com.
2. Create environment
Now that you have an account go ahead and create your first environment. The entry-level is free, making it a great starting point.
Make a note of the environment url as you'll need it later.
3. Create API key
Next, navigate to your environment and create an API key. Take note of the created key as you'll need it the next step.
4. Create access token
For the building block to be fully functional your need to supply it with an access_token for a user
(the building block communicates with the Weavy environment and the token is used to identify the user and authorize access).
In a real world application, issuing access tokens is done with a server-to-server call from your backend to the Weavy environment,
but in this guide we'll use a curl command to simplify things.
Replace {WEAVY-SERVER} and {API-KEY} with the values from step 2 and 3 above and then run the following command in your terminal.
curl -X POST https://{WEAVY-SERVER}/api/users/demouser/tokens -H "Authorization: Bearer {API-KEY}"
Then copy the access_token from the response since it's needed in the final step.
{"access_token":"wyu_qf2llm...","expires_in":3600}
5. Add building block
Finally, you'll want to add the <wy-chat> building block to your application.
Copy the snippet below and replace the {WEAVY-SERVER} and {ACCESS-TOKEN} placeholders for a functional example.
<!doctype html>
<html>
<head>
<script src="https://{WEAVY-SERVER}/uikit-web/weavy.js"></script>
<script>
const weavy = new Weavy();
weavy.url = "https://{WEAVY-SERVER}";
weavy.tokenFactory = async () => "{ACCESS-TOKEN}";
</script>
</head>
<body>
<wy-chat uid="demochat"></wy-chat>
</body>
</html>
You should now have a fully functional chat in your application - send your first message and start chatting away.
If things are not working as expected, check the output in the dev-tools window of your browser for any warnings or errors. Or join our community in Discord and ask for help!
If you want to try out the building block real quick and don't want to mess around in your existing application just yet, you can use a coding playground like JSFiddle - just paste the snippet in the HTML-part, edit the
{WEAVY-SERVER}and{ACCESS-TOKEN}and run it!
Next steps
This guide was intentionally very simple to get you started quickly, and we've taken some shortcuts such as hardcoding the access_token.
As a next step we suggest reading more about how to install the UIKit and how to authenticate and sync users etc.
Later on you probably want to add some styling to make it fit better into your UI. You might also want to learn more about the Web API and how to configure webhooks to listen for events etc.
If you are using a JS-framework and are curious about how to integrate Weavy you can find help in our guides for Angular and React.