Try Agora for Free
Sign up and start building! You don’t pay until you scale.
Agora powers an average of over 50 billion minutes of human connections per month, and we’ve made it easier than ever before to build your own custom video chat app or launch your own live streaming service in as little as five lines of code with the release of our open-source, community-driven Web UIKit. We want to see your next project go to market in minutes instead of days!
The Agora Web UIKit is built on top of the Agora Web SDK using React. It gives you access to a high-level React component or a web component for non-React projects that you can add to your website and have a video call or live streaming experience ready to ship.
All you need to get started is an Agora Developer Account, it’s free to sign up here! Once you’re in the Agora console, create a new project and copy the Agora App ID, we’ll use this for our app.
Web components are awesome and allow the Agora Web UIKit to be used in any web application. If your website is built with vanilla JavaScript or a framework like Angular, Vue.js, or Svelte, you can use this approach. If your website uses React, you can move on to the next section.
Just import the web component script. You can then use the web component by passing in your Agora App ID and channel name as attributes. You can customize the UIKit to enable active-speaker detection, change layouts, join as the audience, etc. using these attributes. You can find out more in the detailed blog.
That’s all you need to add video conferencing to your website! Here’s a basic live demo that you can play around with.
The Agora Web UIKit is built to be customized and extended from the ground up. You can customize the UI and select features like an active speaker, dual-stream mode, and joining as an audience just by passing in props. It’s written with Typescript and is built using modular functional components, so you can pick individual pieces and build anything you like.
You can then render the <AgoraUIKit> component by passing in your Agora App ID and channel name as props:
That’s all there is to it. You can customize features by changing the props, and you can read about the different props in the docs. You can check out a full example here.
If you want a deeper dive, you can read this blog covering the example in-depth. The project is open-source; you can check out the GitHub Repo and the API Reference. We’re looking forward to community contributions and your feedback.
We also have UIKits available for Android, iOS, React Native, and Flutter. You can check those out as well.
If you have questions while using the Agora Web UIKit, I invite you to join the Agora Developer Slack community. You can ask your questions in the #web-help-me channel. Feel free to open issues for feature requests or to report bugs on the GitHub Repo. Or you can reach out to me on Twitter.
