GoInstant (which is part of Salesforce) is a JavaScript API for integrating real-time, multi-user experiences into any web or mobile application. It’s easy to use and provides the full stack needed from client-side widgets to pub/sub messaging to a real-time data store. GoInstant is secure and scales automatically with your application’s needs.
It’s also free to use–just sign up here: https://goinstant.com/signup
Real-time, collaborative experiences are cropping up all over. In the consumer space there are apps that do real-time messaging, or provide live updates of data (e.g. sports scores, stock quotes, etc.) In the enterprise, real-time collaboration is evident in tools such as Google Docs, where two or more people can write and edit a document simultaneously. There are other examples as well, but we’re just scratching the surface of what’s possible.
At GoInstant we see a couple of major use cases for real-time collaboration in the enterprise. The first is in streamlining workflows–where two or more people have to review and approve something (such as an email marketing campaign)–and it can be done faster when they’re able to work together. The second is in providing hands-on support through a complex process, such as filling out lengthy forms.
GoInstant makes all of this possible. And it’s quite easy to integrate GoInstant into Visualforce where you’re building your enterprise applications and features every single day. Below we’ve provided a quick tutorial and example for how to turn a Visualforce page into a real-time, collaborative experience. The end result is a single page form that can have two or more people simultaneously working together.
Want to see this in action?
1. Go to this URL: http://sdo-demo-main-141dbcf2797.force.com/goinstantdemo/goinstant_simple_demo_live
2. At the bottom of the form you’ll see a URL that you can share with a friend or open in a different browser to experience how real-time collaboration works.
Step #1. Sign up for GoInstant and get a connection URL.
This step only takes about 1 minute and you’ll need to do this to get your connect URL, which we’ll use later in this example. Sign up here and once you’re in, create a new app and copy your connect URL.
Step #2. Create a simple Visualforce page with a form
This is a straightforward Visualforce page using Apex:
<apex:page docType="html-5.0">
<apex:form id="page1">
<apex:pageBlock title="Customer Satisfaction Survey">
<apex:pageBlockSection>
<apex:input label="First Name" type="text" />
</apex:pageBlockSection>
<apex:pageBlockSection>
<apex:input label="Last Name" type="text" />
</apex:pageBlockSection>
<apex:pageBlockSection>
<apex:inputTextarea label="Comments" />
</apex:pageBlockSection>
<apex:pageBlockSection>
<apex:inputCheckbox label="I had shopped here before" />
</apex:pageBlockSection>
<apex:pageBlockSection title="On a scale from 1 to 5 (5 being awesome), how would you rate your shopping experience">
<apex:selectRadio>
<apex:selectOption itemValue="1" itemlabel="1"/>
<apex:selectOption itemValue="2" itemlabel="2"/>
<apex:selectOption itemValue="3" itemlabel="3"/>
<apex:selectOption itemValue="4" itemlabel="4"/>
<apex:selectOption itemValue="5" itemlabel="5"/>
</apex:selectRadio>
</apex:pageBlockSection>
<apex:pageBlockSection >
<a href="simple_goinstant_demo2">Next</a>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>Your page should look something like this:
Step #3. Add GoInstant to the page
Now it’s time to start making the form multi-user. First, add the core dependencies needed, just after the opening apex:page tag in the code above.
<apex:includeScript value="https://cdn.goinstant.net/v1/platform.min.js"/>
<apex:includeScript value="https://cdn.goinstant.net/widgets/form/latest/form.min.js"/>
<apex:includeScript value="https://cdn.goinstant.net/widgets/user-list/latest/user-list.min.js"/>
<apex:includeScript value="https://cdn.goinstant.net/widgets/click-indicator/latest/click-indicator.min.js"/>
<apex:includeScript value="https://cdn.goinstant.net/widgets/user-colors/latest/user-colors.min.js"/>
<apex:stylesheet value="https://cdn.goinstant.net/widgets/form/latest/form.css"/>
<apex:stylesheet value="https://cdn.goinstant.net/widgets/user-list/latest/user-list.css"/>
<apex:stylesheet value="https://cdn.goinstant.net/widgets/click-indicator/latest/click-indicator.css"/>We just added the GoInstant library and GoInstant widgets. The widgets add very useful functionality such as click indicators (to see when people click on the page), and form synchronization (so you can see what a user fills into the form as they type and help them out).
Step #4. Join a room
Now that we have all our dependencies, we’re ready to start hooking things up. With GoInstant, when you connect, you join a room. You can think of a room as the general container for the session that you’re sharing with other users. You and the other users will be present in a room and the data you share will exist within that room.
The following code creates a random room and gets a person to join it:
function getRoomName() {
var roomInUrl = window.location.search.replace('?goinstant_room=','');
var newRoom = 'gi' + Math.floor((Math.random()*10000));
return sessionStorage.gi_room_name = roomInUrl || sessionStorage.gi_room_name || newRoom;
}
var connectUrl = 'https://goinstant.net/account/appId'; // Replace with your connect URL
goinstant.connect(connectUrl, {
room: getRoomName()
}, function(err, connection, room) {
if (err) {
console.error(err.message);
}
// We’re connected! Awesome!
});Let’s also add an “invite a friend” link so you can get others to join you:
Invite someone to the session:
<script>
document.write(window.location + '?goinstant_room=' + getRoomName() );
</script>Step #5. Add the GoInstant Widgets
The GoInstant Widgets add useful functionality to a multi-user page. We’re going to add the user list, user colors, click indicator, and form synchronization widgets:
// Get the UserList constructor.
var UserList = goinstant.widgets.UserList;
// Create a new instance of the UserList widget
var userList = new UserList({
room: giRoom,
collapsed: true
});
// Initialize the UserList widget
userList.initialize(function(err) {
if (err) {
return console.log('user list error:', err);
}
});
// Get the UserColors constructor.
var UserColors = goinstant.widgets.UserColors;
// Create a new instance of the UserColors widget
var userColors = new UserColors({ room: giRoom });
// Choose a color for the current user. If the user already has a color
// assigned from a prior use of 'choose' then that existing color will be
// returned.
userColors.choose(function(err, color) {
if (err) {
return console.log('user colors error:', err);
}
});
// Get the ClickIndicator constructor.
var ClickIndicator = goinstant.widgets.ClickIndicator;
// Create a new instance of the Click Indicator widget
var clickIndicator = new ClickIndicator({ room: giRoom });
// Initialize the Click Indicator widget
clickIndicator.initialize(function(err) {
if (err) {
return console.log('click indicator error' , err);
}
});
// Get the Form constructor.
var Form = goinstant.widgets.Form;
// Automatically sync all the forms
var allForms = document.getElementsByTagName('form');
for (var i = 0, len = allForms.length; i < len; i++) {
var thisForm = allForms[i];
if (thisForm.name) {
var formKey = giRoom.key(thisForm.name+'_form_key');
// Create a new instance of the widget
var form = new Form({
key: formKey,
el: thisForm,
room: giRoom
});
form.initialize(function(err) {
if (err) {
return console.error('Could not initialize widget:', err);
}
// Your form should now be initialized!
});
}
}Step #6. Invite a friend and try it out!
You now have a multi-user, collaborative Visualforce page. You can invite others to join you with the “invite a friend” link, and everyone will be able to interact together.
Here’s a link to download all of the code we’ve shared and try this example out: . Make sure you add your connect URL on line 21.
You can also try a live example and share that with friends or use two browsers to see the collaboration in action.
Don’t forget to sign up for GoInstant, to get started!
This is a guest post from Ben Yoskovitz, Head of Product at GoInstant, a salesforce company. You can meet Ben and other members of the GoInstant team at Dreamforce.
