Remota
Ship. Share. Collaborate.
No-download, easy, interactive screen sharing built for onboarding and support
Usage: a basic example
First, install Remota through one of the following methods:
npm install @concordalabs/remota
yarn add @concordalabs/remota
- Add this to your HTML:
<script src="https://unpkg.com/@concordalabs/remota/dist/remota.min.js"></script>
Once installed, add the following snippet somewhere in your application and import the created file at the start of your application.
import Remota from "@concordalabs/remota"; // only required if using npm/yarn method
const query = new URLSearchParams(new URL(window.location.href).search);
const code = query.get("code");
if (!code) return;
const remota = Remota.host({ clientId: "your-clientId", key: "your-key", code });
remota.onControlChangePrompt(({ user }) => remota.acceptControlChange(user));
remota.onClose(() => alert('session finished'));
The example above is simplified to automatically try to connect to Remota in case you pass code
as a URL query parameter. It does the following:
- Get the query parameter
- Create a Remota session client as a host (the user will always be a session host)
- Start remota
- Define how to handle two Remota events: control change requests and session ending. In here, it will accept control requres automatically, but you can design a modal to get the confirmation (or use
window.confirm
).
Once you have the above up example set-up, head to remota.xyz, and start a new session. With access code in hands, open your application using http://your-app?code=YOUR_CODE_HERE
.
Now both clients should be connected and you should be able to co-browse.
Hiding private data
If you need to block private information from your agents (example: password and bank details), add remoteSecured
class to the HTML component:
<input class="remoteSecured" name="bank_sort_code" value="000000" />
API
The following methods are used in the most simple set-ups and will already be integrated with the default UI. Check our TypeScript documentation in case you need to have access to other APIs (useful for custom UIs).
.onControlChangePrompt(({ user }) => { ... })
It is triggered when an agent requests control. .acceptControlChange(user)
and .denyControlChange()
can be used to reply to this prompt. Example:
remota.onControlChangePrompt(({ user }) => window.confirm('Pass control?')
? remota.acceptControlChange(user)
: remota.denyControlChange())
remota.onClose(() => { ... })
It is triggered when a user click on the End
button from the UI. Usefull in case you want to show an alert or redirect the user somewhere.