<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
HACKATHON: Create cutting-edge enterprise apps using Retool + WeavyRead more
Get started

Add Weavy to your app built with Angular

This guide will show how to add Weavy to your Angular app using our UIKit. The final product will be our chat component rendered in your 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. Install UIKit Web

Run this in your terminal 
npm install @weavy/uikit-web

3. Create Weavy service

Configuring the Weavy backend URL and issuing of access tokens is best done as a service in Angular.
Copy and paste this into a terminal window and run it 
ng generate service weavy

This generates the following files:

  • src/app/weavy.service.spec.ts
  • src/app/weavy.service.ts

4. 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 WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*****************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"

5. 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 WY_BACKEND_URL/api/users/USER_ID/tokens -H "Authorization: Bearer WY_API_*****************"
This will return an access token - copy and use it below.

6. Edit weavy.service.ts

Open the generated weavy.service.ts file in your editor and add the following code.

Add this to the weavy.service.ts file 
import { Injectable, OnDestroy } from "@angular/core";
import { Weavy } from "@weavy/uikit-web";

@Injectable({
  providedIn: "root",
})
export class WeavyService implements OnDestroy {
  weavy = new Weavy();

  constructor() {
    this.weavy.url = new URL("WY_BACKEND_URL");
    this.weavy.tokenFactory = async (refresh) => "USER_ACCESS_TOKEN";
  }

  ngOnDestroy(): void {
    this.weavy.destroy();
  }
}

First we import the @weavy/uikit-web package and create a new Weavy() instance (importing the Weavy package also registers the web components for usage). Then we configure it with the URL to your Weavy backend.

To handle destruction of Weavy properly, you need to implement the OnDestroy interface in Angular.

7. Create components

Next, you need to create components for the Weavy features you want to use. In this example we'll create a component for the chat feature.
Copy and paste this into a terminal window and run it 
ng generate component chat

This generates the following files:

  • src/app/chat/chat.component.css
  • src/app/chat/chat.component.html
  • src/app/chat/chat.component.spec.ts
  • src/app/chat/chat.component.ts

8. Edit chat.component.ts

Edit the generated chat.component.ts file and add the following code.
Edit the generated chat.component.ts 
import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from "@angular/core";
import { WeavyService } from "../weavy.service";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [],
  templateUrl: "./chat.component.html",
  styleUrl: "./chat.component.css",
  providers: [WeavyService],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ChatComponent {
  @Input() uid!: string;

  constructor(private weavyService: WeavyService) {
    this.weavyService = weavyService;
  }
}

You need to add the uid property to the component with the @Input() decorator so that you can use the component dynamically.

To make external custom web components valid in the Angular HTML, you need to add the CUSTOM_ELEMENTS_SCHEMA. As of Angular v15.2 you need to make the component standalone by adding standalone: true.

You also need to connect the Weavy service to the component. This is done by importing our WeavyService, define it as a provider and adding a reference to it in the constructor.

9. Edit chat.component.html

Next, you'll add the HTML for the chat building block in chat.component.html. Note the property binding for the uid property to the web component.
Edit the chat.component.html file 
<wy-chat [uid]="uid"></wy-chat>

10. Use component

To use the chat component you first need to import the ChatComponent and reference it in the imports in the app component src/app/app.component.ts.
Edit the app.component.ts file 
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ChatComponent } from "./chat/chat.component";

@Component({
  selector: "app-root",
  standalone: true,
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [RouterOutlet, ChatComponent],
})
export class AppComponent {
  title = "weavy-example-app";
}

11. Edit app.component.html

Then you can simply reference it in your src/app/app.component.html template using the defined component selector name.
Edit the app.component.html file 
<app-chat uid="my-chat"></app-chat>

12. Run the example

To test the example you can use the built-in Angular dev server, which will compile and start a test server. It also recompiles and reloads the app in the browser whenever you make changes.

Try it out by running ng serve in your terminal and open the app in your browser, usually on http://localhost:4200.

Copy and paste this into a terminal window and run it 
ng serve

13. Done!

Voilà! Now you have a chat component to integrate anywhere in your web app.
On this page
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