Build the future of communications.
Start building for free

Be On The Same Page As Your Customer (Literally) With Sync Co-Browsing

logo

If your customer hits a snag in your app, or on your website, you want to give them the best support you can. That means getting to the root of their problem and addressing it as fast as possible. Co-browsing helps you do just that. Co-browsing lets you synchronously and remotely navigate a webpage with a customer, so you see everything they see, and can answer their questions easily.

Using Twilio Sync, we’ll build a co-browsing app that lets you give your customers a new level of support.

Editor’s Note: Twilio Sync is still in Beta, request access here.

Twilio Sync

Twilio Sync lets you maintain state across any number of devices/endpoints in real time without needing to build, manage, or scale the backend infrastructure. Think of it as a really powerful tool that you could use to keep multiple “things” updated with simple or complex information in real time.

Co-browsing

Co-browsing is the technique where a contact centre agent can collaborate with a customer using only the web browser and provide a intuitive and personalized guidance for a complex web form as demonstrated in the GIF.

cobrowsinghowitworks

 

That’s what our app will look like once we’re done. Let’s get building.

 

Tools

Get your environment ready

We now need to collect all the config values we’ll need to run the application:

Service Instance SID – Like a database for your Sync data – generate one with the curl command below.
 
Account SID – Your primary Twilio account identifier – find this in the console here.
 
API Key – Used to authenticate – Use the IP Messaging dev tools to generate one here.
 
API Secret – Used to authenticate – just like the above, you’ll get one here.
 

Generate a Service Instance

Using the API key pair you generated above, create a service instance with this curl command:

curl -X POST https://preview.twilio.com/Sync/Services \
 -d 'FriendlyName=MySyncServiceInstance' \
 -u 'SKXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:your_api_secret'

 

App Components and Access Tokens

We have two different components in this app

  • A client (browser) – HTML form which we will make co-browsable
  • A server which vouches for the identity of your browser instances (each opened co-browsable page)

To keep things simple I have left out user creation and maintenance. I am using a randomly generated name for each page that is requested. In a real life scenario, you could create a one-to-one co-browsing session between a customer and user by implementing any popular authentication measures.

If you are feeling a bit lazy, you can download the server app from my Github repo.

git clone https://github.com/abhijitmehta/coBrowseLib.git

Next, let’s create a configuration file for the application using the sample provided in the repo

cp config.sample.js config.js

Edit config.js with the four configuration parameters we gathered from above.

module.exports = {
  //flag to get Twilio Account Setting from this file or from environment
  getTwiliAccountSettingsfromFile: 'Y',

  // Your primary Twilio Account SID
  accountSid: 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',

  // API Key/Secret Pair - generate a pair in the console
  apiKey: 'SKXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  apiSecret: 'your_api_secret',

  // Your Sync service instance SID
  serviceSid: 'ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
};

Next, we need to install our dependencies from npm:

npm install

Let’s Create Our Server First

The role of the server side of this app is to contact Twilio Sync and get an access token. This access token is passed to the Client (web-browser). By using the server app we do not need to export account information (Account SID, API Keys, Instance IDs) at the client. This allows secure communication between the Sync client on the browser to Twilo Sync on the cloud.

Set the variables for getting an access token in the endpoint for your server app:

    var twilio = require('twilio');
    var AccessToken = twilio.jwt.AccessToken;
    var SyncGrant = AccessToken.SyncGrant;

Let’s create the endpoint now, we will use this from the web page to request an access token

app.get("/getToken",function(i_Req,o_Res)
         {
            var identity=i_Req.query.identity;
            var endPointId=i_Req.query.endpointId;

            // Create a "grant" which enables a client to use Sync as a given user,
            // on a given endpoint
            var syncGrant = new SyncGrant(
                                          {
                                           serviceSid: TWILIO_SYNC_SID,
                                           endpointId: endPointId
                                          }
                                         );

            // Create an access token which we will sign and return to the client,
            // containing the grant we just created
            var token = new AccessToken( TWILIO_ACCOUNT_SID, TWILIO_SYNC_API_KEY, TWILIO_SYNC_API_SECRET);

            token.addGrant(syncGrant);
            token.identity = identity;

            // Serialize the token to a JWT string and include it in a JSON response
            o_Res.send(
                          {
                           identity: identity,
                           token: token.toJwt()
                          }
                      );


         }
      );

Cool, the endpoint is now ready! Let’s put it on the server now.

var server = http.createServer(app);
var port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log('Express server running on *:' + port);

Now we should be all set! Run the application using the node command or nodemon .

node .

or

nodemon

You should be now able to get an access token to start using Twilio Sync by just calling this endpoint

'/getToken?identity=xyz&endpointId=xyz123

Since the server is now ready, we need to create a form and then use the syncForms.js library supplied in the github repo to make it co-browsable. At this point you can create any html form or use the one provided here.

I have used the name firstSyncStart to point the server to this form.
Your application should now be running at http://localhost:3000/firstSyncStart Open this page in a couple browsers or tabs. This is a basic HTML form, this could very well be an existing form on your website like a mortgage application form, or a shopping cart. Nothing special about it.

Let’s use syncForms.js and make this form co-browsable.

Open “theFirstSyncStart.html” in your prefered editor and add the following lines:

      <script src="/js/syncForms.js" type="text/javascript"></script>
      <script src="/js/randomUserName.js" type="text/javascript"></script>

Let’s go to the form element syncThisTextArea now. It should look something like this:

    <!-- Textarea -->
                        <div class="form-group">
                          <label class="col-md-4 control-label" for="syncThisTextArea">Will Sync This Text area</label>
                          <div class="col-md-4">
                            <textarea class="form-control" id="syncThisTextArea" name="syncThisTextArea" >default text 
1
2
3
4
5
6
7
    <!-- Textarea -->
                        <div class="form-group">
                          <label class="col-md-4 control-label" for="syncThisTextArea">Will Sync This Text area</label>
                          <div class="col-md-4">
                            <textarea class="form-control" id="syncThisTextArea" name="syncThisTextArea" >default text </textarea>
                          </div>
                        </div>

Let’s add the tag data-coBrowsable="true" to this element

       <!-- Textarea -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="syncThisTextArea">Will Sync This Text area</label>
                 <div class="col-md-4">
                      <textarea class="form-control" id="syncThisTextArea" name="syncThisTextArea"  data-coBrowsable="true">default text 
1
2
3
4
5
6
7
       <!-- Textarea -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="syncThisTextArea">Will Sync This Text area</label>
                 <div class="col-md-4">
                      <textarea class="form-control" id="syncThisTextArea" name="syncThisTextArea"  data-coBrowsable="true">default text </textarea>
           </div>
                        </div>

Reboot your app:

  • If you started your app using “node .”, press Ctrl+C and then type “node .” again
  • If you started your app using “nodemon”, no specific action is required.

Now refresh the tabs you had opened on this page. Type anything on the text area and go to the other tab. You should now see the text area syncing.

cobrowsingcompletecrop

Voila! You just made your HTML form co-browsable with three lines of code.

Here’s a quick look the flow of things in our co-browsing app.
cobrowsingschema
 
You can read more about syncForms.js here.

Wrapping Up

We have only scratched the surface of what is possible using Twilio Sync, the only limit to its use is your imagination.

Once you have access to the Sync you can read more about its API here

Sync JS SDK is available for download here

Documentation on Sync REST API os available here

Sync JS Documentation here

Go ahead and try this library with forms you have today. You can also have a look at a slightly bigger version of a Co-Browsable page included in the repo by going to http://localhost:3000/firstSync

I am Abhijit Mehta. Thanks for reading! I spend each day helping developers build really cool stuff on Twilio platform. If you build something cool using Sync and Twilio, or if you have any questions, I’d love to hear about it. Please drop me a line on Twitter – @abhijitMehta or mail me at amehta@twilio.com

Authors
Sign up and start building
Not ready yet? Talk to an expert.