{"id":7208,"date":"2025-03-27T19:32:03","date_gmt":"2025-03-27T11:32:03","guid":{"rendered":"https:\/\/doc.smartflomeet.ttns.in\/developer\/?page_id=7208"},"modified":"2025-03-27T19:54:37","modified_gmt":"2025-03-27T11:54:37","slug":"co-browsing","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/solutions\/co-browsing\/","title":{"rendered":"Co-browsing"},"content":{"rendered":"\n<p>Co-browsing is collaborative and interactive. It allows participants to browse together during a video conference call. In addition, co-browsing is simultaneous and synchronous. It allows both participants to see what the other participant does on the screen in a co-browsing session.<\/p>\n\n\n\n<p>Here are some examples of how you can use co-browsing to expand your customer interaction:<\/p>\n\n\n\n<ul><li>Fill out forms and applications together, guiding the participant in real-time.<\/li><li>Showcase two-way interactive presentations that are more engaging for your participants \/ viewers \/ audience.<\/li><\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"how-does-co-browsing-work\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#how-does-co-browsing-work\"><\/a>How does co-browsing work?<\/h2>\n\n\n\n<p>Co-browsing is related to a website or webpage. You must prepare your website or web pages for co-browsing first. Once they are ready, you invite others to join a Co-Browsing session with you through a Unique URL, i.e., an existing URL with some Query String Parameters.<\/p>\n\n\n\n<p>Once the other person joins, you can see each other&#8217;s cursor position on the page, and all actions at one end get replicated at the other. If one end clicks on a link, the other end reaches the same page.<\/p>\n\n\n\n<p>You can invite more people to join the same Co-Browsing Session.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"set-up-co-browsing\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#set-up-co-browsing\"><\/a>Set-up Co-Browsing<\/h2>\n\n\n\n<p>How to use Co-Browsing with your website<\/p>\n\n\n\n<h3 id=\"download-sdk\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#download-sdk\"><\/a><\/h3>\n\n\n<div class=\"ub-buttons align-button-center\"  id=\"ub-button-753e3c17-e9da-41ae-b62d-40a12f3e4949\"><div class=\"ub-button-container\">\n    <a href=\"\/developer\/wp-content\/uploads\/cobrowse-sdk\/EnxCoBrowse.js.v1.zip\" target=\"_blank\"\n    rel=\"noopener noreferrer nofollow\"\n    class=\"ub-button-block-main ub-button-medium\" role=\"button\">\n    <div class=\"ub-button-content-holder\"><span class=\"ub-button-block-btn\">Download Co-Browsing SDK v1.0<\/span>\n    <\/div><\/a><\/div><\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"update-your-website\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#update-your-website\"><\/a>Update your Website<\/h3>\n\n\n\n<p>Get your website ready for Co-Browsing by following the simple steps given below:<\/p>\n\n\n\n<ul><li>Download the SDK. This file helps in the easy integration of Co-Browsing.<\/li><li>Extract a JS file named&nbsp;<strong>EnxCoBrowse.js<\/strong>&nbsp;from the zip file.<\/li><li>Save the JS file within your website&#8217;s accessible path.<\/li><li>Add the code below to each webpage for which you need the Co-Browsing feature.<\/li><li>Add the code either<ul><li>within&nbsp;<code>&lt;HEAD&gt;&lt;\/HEAD&gt;<\/code>&nbsp;tag or<\/li><li>towards the end of the page.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Sample Code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script src=\"\/PATH\/EnxCoBrowse.js\"&gt;&lt;\/script&gt;&lt;script src=\"https:\/\/togetherjs.com\/togetherjs-min.js\"&gt;&lt;\/script&gt;<\/pre>\n\n\n\n<p>As a result, your website \/ webpages are ready for your Co-browsing Session.<\/p>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;You are using an Open Source Library Together.JS, for Co-Browsing. If your Co-Browsing Session needs to cover a specific use-case, you can extend the&nbsp;<code>EnxCoBrowse.js<\/code>&nbsp;file we created for easy integration. Please, read through all the features&#8217; support of TogetherJS to successfully extend.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"qualify-url-with-unique-session-name\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#qualify-url-with-unique-session-name\"><\/a>Qualify URL with Unique Session Name<\/h3>\n\n\n\n<p>As you have set up your website for Co-Browsing, you can now co-browse with another person by visiting any of your website&#8217;s URLs (whichever pages include the .js files mentioned above). To do so, you must append a Query String to the URL to include a Unique Session Name. e.g&nbsp;<code>https:\/\/your-domain.com\/any-page.html?cobrowse_name=SOME_UNIQUE_ID<\/code><\/p>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;A Query String Parameter&nbsp;<code>cobrowse_name<\/code>&nbsp;is added to the URL. If one or more people visit this URL, they can browse together. Concurrent co-browsing session among different group of people is feasible. If another group of people visits the same page with another value used with&nbsp;<strong>cobrowse_name<\/strong>, they browse together. If a group of people visits with a unique&nbsp;<code>cobrowse_name<\/code>, they browse together. Their session does not interfere with any other group co-browsing concurrently.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"implement-with-enablex-video-session\"><a href=\"https:\/\/developer.enablex.io\/docs\/references\/video-features\/collab-features\/co-browsing\/#implement-with-enablex-video-session\"><\/a>Implement with EnableX Video Session<\/h3>\n\n\n\n<p>After testing your Co-browsing session with the help of Query String, you can implement it in your Video Session hosted by EnableX.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Solution<\/strong><\/p>\n\n\n\n<ul><li>An initiator must share a Co-Browsing URL (Appended with a Unique Query String) with other user(s) in a Video Session.<\/li><li>On the Co-Browsing Initiator Side, a new Browser Window opens with the same URL shared with others.<\/li><li>On the receiving end, a new Browser Window opens with the same URL as the Co-Browsing URL is received.<\/li><li>Both ends can browse on the newly opened browser window\/tab alongside the Video Session.<\/li><\/ul>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>How to share the Co-Browsing Link with others<\/strong><\/p>\n\n\n\n<p>You can pass custom message using Custom Signaling. Refer related documentation:<\/p>\n\n\n\n<ul><li><a href=\"\/developer\/video-api\/client-api\/web-toolkit\/\">Web SDK<\/a><\/li><li><a href=\"\/developer\/video-api\/client-api\/android-toolkit\/\">Android SDK<\/a><\/li><li><a href=\"\/developer\/video-api\/client-api\/ios-toolkit\/\">iOS SDK<\/a><\/li><\/ul>\n\n\n\n<p>Regarding Custom Signaling Methods and Events, using the preferred SDK method, you must prepare a JSON to pass onto the other end of the session. Listen to the Event to process further.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Example using Web SDK:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var CoBrowseMsg = {\n    \"broadcast\": false,  \n    \"message\": {\n\t\t\"action\": \"cobrowse\",\n\t\t\"url\": \"YOUR_CO_BROWSE_URL\"\n\t}\n}\n\n\/\/ To initiate co-borwsing with selected user(s)\nroom.sendUserData(CoBrowseMsg, false, [client-id-1, client-id-2], function(data){\n    \/\/ Message sent\n\t\/\/ Open New Browse Tab for co-browsing\n\twindow.open(\"YOUR_CO_BROWSE_URL\", \"_blank\");\n});\n\n\/\/ Receipient listens to event and opens Window to co-browse\nroom.addEventListener(\"user-data-received\", function (event) {\n     var InMsg = event.message.msg;\n     if (InMsg.message.action == 'cobrowse') {\n        \/\/ Open New Browse Tab for co-browsing\n\t\twindow.open(InMsg.message.url, \"_blank\");\n     }\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Co-browsing is collaborative and interactive. It allows participants to browse together during a video conference call. In addition, co-browsing is simultaneous and synchronous. It allows both participants to see what the other participant does on the screen in a co-browsing session. Here are some examples of how you can use co-browsing to expand your customer interaction: Fill out forms and applications together, guiding the participant in real-time. Showcase two-way interactive&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":116,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Co-browsing is collaborative and interactive. It allows participants to browse together during a video conference call. In addition, co-browsing is simultaneous and synchronous. It allows both participants to see what the other participant does on the screen in a co-browsing session. Here are some examples of how you can use co-browsing to expand your customer&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/7208"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=7208"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/7208\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/116"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=7208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}