The connected consumer: how to add WebRTC to your site in less than 10 minutes

Introduction

Mobile apps currently present one of the biggest opportunities for developers to deliver multi-channel engagement, as a user registering on an app creates a logged-in persona that can be measured across touch points and physical locations.

However, it’s also true that device users generally love to communicate, and while they want to receive the right content across all the channels they subscribe to – whether that’s online via their tablet, mobile desktop, social media or through apps, they want to feel connected – and sometimes with the added feature to be able to chat to their bank, a customer service rep or a brand, in addition to their friends, family and peers.

WebRTC: the connected customer

WebRTC is the best way to bring one-click, real-time, two-way communication to the browser - whether that be on the web or via a mobile device app. A customer can quickly connect to a contact centre agent through video, voice or chat exactly when they want, creating a seamless experience. Important contextual information is passed between the customer and the agent, making the interaction both more efficient and more human.

forge by Acision making it easy

Whether you want to add two-way video chat, or a simple click-to-call button on your website or app, forge by Acision makes it easy. The software from forge by Acision allows developers and enterprises to easily integrate rich communication functionality into their apps, including chat (SMS and IP messaging), push notifications, group messaging, video chat, VOIP calling and rich media file transfer using the data channel.

In the following tutorial, find out how to create your first video chat application using the forge by Acision SDK in less than 10 minutes. If you don’t already have an account to access the SDK, you can connect to the forge developer portal and create one in minutes.

Tutorial

You will notice in the JavaScript code js/app.js that we have numbered each section of the code for your reference. Below we will go into each part of the code to explain how it works and how it all ties in together to help you build your first WebRTC app using the Acision Forge platform.

You will need to set a few variables listed below:

• Enter your test API KEY that you received when you registered for your account. Navigate to LINE 20 in the js/app.js file.
• We are using hard coded values for users in this tutorial to get you up and running quickly. In your forge account where your free testing API KEY is listed you will see view user accounts, click on the link to reveal your testing usernames and passwords. Select two different usernames and passwords to enter at LINE 28 & 29 and LINE 33 & 34 in this js/app.js file.

Walkthrough Code

Below is an overview of the js/app.js file used to power the app.

1. LINE 11: define platform variables
2. LINE 17: define Acision Forge account API KEY
3. LINE 22: define the two users credentials for the applications
4. LINE 37: determine which user is connected to the platform by checking the query string
5. LINE 42: define the local user for the application
6. LINE 47: define the remote user for the application
7. LINE 52: create a new instance of the Forge SDK
8. LINE 66: onConnected event dispatched after making a successful connection to the Forge platform
9. LINE 87: onDisconnect event dispatched after disconnecting from the Forge platform
10. LINE 117: onAuthFailure event if authentication fails
11. LINE 130: start video chat once the Forge platform have successfully connected
12. LINE 163: receive an incoming call from a remote user
13. LINE 194: accept the incoming call from the remote user
14. LINE 229: onCallConnect event once the incoming call is connected successfully
15. LINE 242: onCallClose event once the call has been terminated either by user action or network
16. LINE 261: disconnect from the Forge SDK manually

Connecting a Remote User

In this demo you will be using hard coded variables for your two users that are connected in the application. Note this is not recommended for production applications. The forge by Acision platform provides many OAuth connections including GitHub, LinkedIn, Facebook, and Google plus it allows you to use custom OAuth 2.0 authentications.

You can connect to the two users by using either of the following:

USER ONE

• http://example.com
• http://example.com?q=1

USER TWO

• http://example.com?q=2

This example assumes that you upload the application to your root domain or localhost.

Video: forge SDK tutorial: simple authentication for web

Conclusion

The promise that WebRTC can bring to any customer-facing business is extremely clear. It is intended to unleash creativity and usher in a new era of ‘democratized’ communications in which application developers take the forefront. It humanises the digital.

By initiating more personal, two-way interactions, companies will find that they have more loyal and engaged customers that are more integrated with the company’s products and services, which translates to superior brand loyalty, positive reviews, and the best of all measurable increases in sales and revenue.