For a little while, there have been a lot of Web Component-related posts created on this site, from building a Web Component to using that same component in different frameworks and libraries. All of that has led to the announcement of the Vonage Client SDK UI Web Components!
We have been building Web Components that are integrated with the Vonage Client SDK that can be used with or without JavaScript frameworks or libraries. The growing list of components can be found in the GitHub repository.
The goal of the Vonage Client SDK UI Web Components is to abstract or at least minimize the work a developer needs to integrate our Client SDK into their application. Imagine creating a fully functional chat application by placing UI components in the layout you choose. Just pass in the Conversation and each Web Component handles its responsibilities. Can’t picture it, no worries, here’s an actual image:
Sample Chat Application built with the Vonage Client SDK UI Web Components
For example, to create your own sample chat app, use this Glitch project.
Since the Vonage Voice API has become General Availability, here is how to integrate the Keypad Web Component into our existing Making an in-app voice call tutorial - the only change comes in the Create a client side application step.
Replace the current code for the client_js.html file with this:
<!-- import Web Components -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@vonage/vc-keypad@latest/vc-keypad.js?module"></script>
<script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
<style>
input, button { font-size: 1rem; }
#hangup { display:none; }
</style>
<h1>Call Phone from App</h1>
<vc-keypad placeholder="i.e. 14155550100" actiontext="Call" canceltext="Hang up"></vc-keypad>
<div id="status"></div>
<script>
const USER_JWT = "PASTE YOUR JWT HERE";
const keypadRef = document.querySelector("vc-keypad");
const statusElement = document.getElementById("status");
new NexmoClient({ debug: true })
.createSession(USER_JWT)
.then(app => {
keypadRef.addEventListener("digits-sent", event => {
console.log(event.detail.digits);
if (event.detail.digits !== ''){
app.callServer(event.detail.digits);
keypadRef.createAction();
} else {
statusElement.innerText = 'Please enter your phone number.';
}
});
app.on("member:call", (member, call) => {
keypadRef.addEventListener("action-ended", event => {
call.hangUp();
});
});
app.on("call:status:changed",(call) => {
statusElement.innerText = `Call status: ${call.status}`;
if (call.status === call.CALL_STATUS.COMPLETED){
keypadRef.cancelAction();
}
});
})
.catch(console.error);
</script>Note: Don't forget to re-add the generated user JWT.
The client webpage should look something like this:
Using the Vonage keypad Web Component in the Making an in-app voice call tutorial
A React implementation of the Keypad Web Component is covered in this blog post.
An early working version is now available in a Vonage Community GitHub repository. We welcome contributions, ideas, and feedback so, please take a look.
){kind=small}
