The easiest way to join a video call on your website is by sharing a unique link. In this tutorial, we’ll see how to access query parameters from a URL and use them with the Web UIKit. We’ll also look at how to generate unique links for your video calls or livestreams.
Setup for React
You can get the code for the example on GitHub. We’ll build on top of the example. You can now run
npm i && npm start to start the React server and visit the hello world app on
You can download the example project and get started by opening the index.html file.
Accessing Query Parameters
Let’s say we have our website hosted on
example.com, and we want a user to join a room called
test. We can create a link
example.com/?channel=test, where we can add data to the query parameter (the
key=value pair after the
? symbol in the URL). We can have multiple parameters separated by
We create a function called
parseParams that uses the
URLSearchParams function to return the query parameters from the URL. We add the
key=value pairs to an object and return it.
Using the Query with the Web UIKit in React
We can simply call the
parseParams function with the spread (
…) operator inside the
rtcProps. This pattern lets us have nice defaults in case the query parameters are missing. And it lets us overwrite any of the
rtcProps. You can pass in any other supported props like
activeSpeaker as well.
Using the Query with the Web UIKit in Vanilla JS
You can select the web component by using
querySelector. You can then update the object properties. In the code snippet, I’m iterating over the parameters to update all the values present in the URL directly (skipping the
Note: The end user can easily modify query parameters in a URL. If you’re directly passing data directly to your app, you should sanitize the user input. For example, using this code, a user with their role set to
“audience” can easily change it to
“host” to join as a host, which can be undesirable for your app.
Bonus: Generating Links
A quick way to generate unique links is by using the current timestamp using the
If you have questions while following this blog post or using the Web UIKit, I invite you to join the Agora Developer Slack community, where you can ask them in the
#web-help-me channel. Feel free to open issues for feature requests or to report bugs on the GitHub Repo.