Ship. Share. Collaborate.
No-download, easy, interactive screen sharing built for onboarding and support
⚠️ You need to create an account at remota.xyz before starting.
First, install Remota through one of the following methods:
npm install @concordalabs/remota
yarn add @concordalabs/remota
<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:
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.
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" />
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).
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())
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.
Generated using TypeDoc