Please enable JS

API

VEEDEEO API Implementation Example

This article is a step-by-step guide that describes an example of the integration of the VEEDEEO API with a web page. You can use this simple integration example as basis and inspiration to create your own video API implementation scenarios and create rich video capable websites and applications.

If you have questions or need help with the API implementation, please contact our support team using your prefered channel: phone, email or Twitter.

API Usage

The VEEDEEO API enables you to add video communications to your web applications and websites in a very easy and flexible way.

You can use the API to check the availability of VEEDEEO users - for a particular VEEDEEO Account or a particular user queue - and to get the video number that is available to receive a video call.

A typical usage of the VEEDEEO API is i.e. to create a video touch point from a website - i.e. to enable website visitors and customers to instantly start a video call with your sales or support helpdesk directly from their browsers - without the need to install any software.

To use the VEEDEEO API you need to have an active VEEDEEO Account and a valid API Key. To get your API Key you need to contact support and open a API Key Request.

Sample Scenario

In this integration scenario we want to build a button / link in a website that starts a video call with an available user from a specific user group (or queue).

You can use links or buttons to place a "call to action" (CTA) for a video call, as well as any other HTML element - such as videos or a images. Attractive call to actions (such as animated images or short videos) will increase adoption for your video touch point.

Before Starting

This integration example uses the jQuery Javascript library. Please make sure you have jQuery loaded in your webpage before you declare the integration functions described below.

You can import a jQuery library by using the following syntax in the <head> section of your web page:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
                                        

Step 1: Create Call to Action

Place the video CTA <div> and <a> link in your webpage, within the <body> section.

We will also create a CSS class (".video-cta-show") that will be used to display the CTA <div> when needed. You should put the <style> code in the <head> section of your page.

The CSS class for the CTA <div> (".video-cta-div") should include the "display: none" property so that this <div> is not shown to the user by default when the page is loaded:

<head>
  <style>
    .video-cta-div{
      display: none;
    }
    .video-cta-show{
      display: block;
    }
  </style>
</head>

<body>

  (... remaining page code ...)

  <div class="video-cta-div">
    <a class="video-cta-link" href="#">
      Start Video Call
    <a>
  </div>
  
  (... remaining page code ...)
  
</body>
                                        

Note that we have added specific classes to the <div> and <a> elements that will be used by the jQuery functions below.

Step 2: Create Function to Show CTA

In this example, we want to show only the CTA div only if there are users available to receive the video call.

Therefore, we will create a jQuery function in the <head> section of the page that will call the VEEDEEO API using the "getau" request to query for available users:

<head>

  (... remaining page code ...)

  <script>
    $(document).ready(function() {
      $.ajax({
          url: "https://veedeeo.secure.force.com/services/apexrest/veedeeoapiREST?key=[api_key]&req=getau&vq=sales"
      }).then(function(data) {
          var r = $.parseJSON(data);
          if(r.available > 0){
             $('.video-cta-div').addClass("video-cta-show");
          }
      });
    });
  </script>
</head>
                                        

Note that in the API call we specify the vq parameter = "sales" so that we query only users in the "sales" queue.

This jQuery function will query the VEEDEEO API and if there are users available for the specified queue it will add the "video-cta-show" class to the CTA <div>making it apear on the webpage.

VEEDEEO currently supports only WebRTC compatible browsers (such as Google Chrome, Mozilla Firefox and Opera). Therefore, besides validating if there are users available, it also makes sense to check if the browser actualy supports WebRTC before showing the CTA to the website visitor.

Step 3: Create Function to Start Video Call

To start a video call we simply need to call the VEEDEEO Call page passing the "vn" parameter in the URL. In this integration scenario we will create a function that will query the VEEDEEO API for the next available user (request "getvn") and open a new browser window using the correct video call link.

You can put this function at the end of the <body> section of your web page:

<body>
  
  (... remaining page code ...)
  
  <script>
    $('.video-cta-link').click(function(){
    
        var newTab = window.open('', '_blank');
    
        $.ajax({
            url: "https://veedeeo.secure.force.com/services/apexrest/veedeeoapiREST?key=[api_key]&req=getvn&vq=sales"
        }).then(function(data2) {
            
            var r = $.parseJSON(data2);
            
            if( r.vnumber != ""){
            
                newTab.location.href = "https://veedeeo.secure.force.com/veedeeoSpace?vn=" + r.vnumber;
                
            }else{
            
                newTab.alert('Sorry - no one is available right now... Please try again in a few moments.');
                newTab.close();
                
            }
        });
    });
  </script>
</body>
                                        

The above function will be triggered when the website visitor clicks on the "Start Video Call" link.

Note that this function has a fall-back in case no more users are available (i.e.: from the moment the CTA is shown - because there are available users - and the moment the website visitor actualy uses the CTA, there is a chance that the available user(s) have received a video call and for that reason turned "unavailable" in the meanwhile. In this situation, the function is informing the user that there are no available users and closes the video call tab.

View the VEEDEEO API documentation here