Ship. Share. Collaborate.
\nNo-download, easy, interactive screen sharing built for onboarding and support
\n\n## Usage: a basic example\n\n⚠️ You need to create an account at [remota.xyz](https://remota.xyz) before starting.\n\nFirst, install Remota through one of the following methods:\n\n- `npm install @concordalabs/remota`\n- `yarn add @concordalabs/remota`\n- Add this to your HTML: ``\n\nOnce installed, add the following snippet somewhere in your application and import the created file at the start of your application.\n\n```js\nimport Remota from \"@concordalabs/remota\"; // only required if using npm/yarn method\n\nconst query = new URLSearchParams(new URL(window.location.href).search);\nconst code = query.get(\"code\");\nif (!code) return;\n\nconst remota = Remota.host({ clientId: \"your-clientId\", key: \"your-key\", code });\n\nremota.onControlChangePrompt(({ user }) => remota.acceptControlChange(user));\nremota.onClose(() => alert('session finished'));\n```\n\nThe 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:\n\n1. Get the query parameter\n2. Create a Remota session client as a host (the user will always be a session host)\n3. Start remota\n4. 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`).\n\nOnce you have the above up example set-up, head to [remota.xyz](https://remota.xyz), and start a new session. With access code in hands, open your application using `http://your-app?code=YOUR_CODE_HERE`.\n\nNow both clients should be connected and you should be able to co-browse.\n\n### Hiding private data\n\nIf you need to block private information from your agents (example: password and bank details), add `remoteSecured` class to the HTML component:\n\n```html\n\n```\n\n## API\n\nThe following methods are used in the most simple set-ups and will already be integrated with the default UI. Check our [TypeScript documentation](https://concordalabs.github.io/remota) in case you need to have access to other APIs (useful for custom UIs).\n\n### .onControlChangePrompt(({ user }) => { ... })\n\nIt is triggered when an agent requests control. `.acceptControlChange(user)` and `.denyControlChange()` can be used to reply to this prompt. Example:\n\n```js\nremota.onControlChangePrompt(({ user }) => window.confirm('Pass control?')\n ? remota.acceptControlChange(user)\n : remota.denyControlChange())\n```\n\n### remota.onClose(() => { ... })\n\nIt 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.\n","readmeFilename":"README.md","description":"