Wondering what’s next for npm?Check out our public roadmap! »

    @concordalabs/remota

    0.8.3 • Public • Published

    Remota

    Ship. Share. Collaborate.

    No-download, easy, interactive screen sharing built for onboarding and support

    Usage: a basic example

    ⚠️ 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
    • 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:

    1. Get the query parameter
    2. Create a Remota session client as a host (the user will always be a session host)
    3. Start remota
    4. 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.

    Keywords

    none

    Install

    npm i @concordalabs/remota

    DownloadsWeekly Downloads

    17

    Version

    0.8.3

    License

    ISC

    Unpacked Size

    416 kB

    Total Files

    137

    Last publish

    Collaborators

    • avatar