Video Customer Support

Web server, hosting a simple web page, that illustrates how customer support with video can be offered joining a Webex Meeting from a browser.

Table of Contents

• Overview
• How to use it
• How to deploy your own version
  • Prerequisites
  • Create a Service App for Guest Management
  • Authorize your new Service App and get the access token
  • Build your project
• User Experience
• Integrations
• License
• Disclaimer
• Contact

Overview

Customers willing to join Webex Meetings from a browser, in any device, who want to embed the meetings experience into their web site, having full control of the User Interface, can use the Browser Webex SDK. An easy way to do this, with few lines of code, is to utilize the Webex Meetings Widget.

This project is based on Rajitha Kantheti's embeddable Meeting Widget project, which offers an easy way to consume the Meetings Widget.

To join a Webex Meeting programmatically, an access token is needed. This node.js server creates a Guest Token using a Service App for Guest Management.

We offer a always-on running instance of the project, and we also provide instruction to deploy your own server.

How to use it

You can access an always-on instance of the web server on this URL: https://video-support-wxsd.gitch.me). It will accept two URL parameters:

• sipAddress: This can be a Webex Meeting meeting number, a Webex Meeting link, a person ([email protected]), or even a Webex cloud-registered device ([email protected])!. This parameter is mandatory.

• message: A short welcome text message that will be shown to the customer. This parameter in optional, if none is provided, "Hi there! Welcome to our video support page. Please wait for the host to start the meeting" will be used as default. The text has to be in URL-encoded format.

  Example: https://video-support-wxsd.glitch.me/[email protected]&message=Video%20Support

Prerequisites

• Supported Desktop Browsers: Chrome (latest), Firefox (latest), Edge (latest) and Safari (latest)

• Supported Mobile Browsers: Chrome on Android (latest) and Safari on iOS (latest)

  Reference: Meetings Widget Requirements

• A Webex ORG with Webex Meetings enabled. The user joining from the browser is a guest, therefore you will need another user joining the Meeting as a host. This project doesn't support guest-to-gest meetings.

  You can get a developer sandbox for free at: https://developer.webex.com/docs/developer-sandbox-guide.

How to deploy your own version

Prerequisites

• Node.js version >= 14.5 must be installed on the system in order to run this through npm

Create a Service App for Guest Management

1. Log in the Webex for developers web site as a Webex administrator in your Webex ORG

2. Click on Start Building Apps and a Create a Service App

3. Choose the App Name, Icon, Contact Email, and a good description, like for example "Service App for Guest Management"

4. Select the guest-issuer:read and guest-issuer:write scopes

5. Click on Add Service App

6. Save your Client ID and Client Secret somewhere safe

   Do not close this window, you will need to come back here later.

Authorize your new Service App and get the access token

1. Log in Control Hub as a Webex administrator in your Webex ORG

2. Go to Apps, and click on Service Apps. Your new Service App should be listed

3. Click on the Service App, and enable it by clicking on the Authorize toggle switch. If you have more than one webex site in your org, choose in what site you want to authorize the Service App

4. Click on Save

5. Go back to Service App creation web page, and refresh it.

6. Under Authorized orgs, choose your Webex ORG, paste your Service App Client Secret, and click on Generate Tokens. Store the access_token somewhere safe

Build your project

1. Clone this repository and change directory:

   git clone https://github.com/wxsd-sales/video-customer-support.git && cd video-customer-support
   

2. Install all the dependencies using:

   npm install
   

3. Go to public/main.js file, and change the value for the variable myServerUrl. This must be your server URL, if you are running the project locally on your laptop, use 'http://localhost:3000'

4. Rename the example environment file from .env.example to .env:

   cp .env.example .env
   

5. Configure the .env file with your Client ID, Client Secret and Refresh Token. Choose the TCP port to be used, for example 3000

6. Start the application using:

   npm run start
   

   Now, you can access the web page using this URL: http://localhost:3000/[email protected]&message=Video%20Support (example for local deployment)

User Experience

After joining the meeting, the user will be asked to wait for the host to join:

When the host joins the communication setup is completed:

The video widget is draggable, allowing the end user to move it around the screen.

If you want to modify and customize the user experience, deploy your own instance and modify the files in the public folder

Integrations

This support web page can be used standalone, and can also be easily integrated in, for example, a digital conversation with the customer. In this repository you will find a Webex Connect flow that schedules a Webex Meeting, and creates a link for the customer to join from the support web page.

License

Distributed under the MIT License. See LICENSE for more information.

Disclaimer

Everything included is for demo and Proof of Concept purposes only. Use of the site is solely at your own risk. This site may contain links to third party content, which we do not warrant, endorse, or assume liability for. These demos are for Cisco Webex use cases, but are not Official Cisco Webex Branded demos.

Contact

Please contact the Webex SD team at [email protected] for questions. Or for Cisco internal, reach out to us on Webex App via our bot [email protected] & choose "Engagement Type: API/SDK Proof of Concept Integration Development".