KR102122002B1 - 다른 형태의 정보 공유를 통한 코브라우징의 통합 - Google Patents

Abstract

코브라우즈(co-browse) 서비스는 사용자의 브라우저에서 보여지는 웹 페이지가 원격적으로 보여지도록 허용하기 위하여 자바스크립트(JavaScript)를 사용한다. 웹 페이지에 대한 업데이트들은 HTML로 렌더링되고 코브라우즈 세션을 통해 포워딩된다. 가시적이지 않아야하는 웹 페이지의 양상들은, 코브라우즈 세션 상에서의 엘리먼트들의 컨텐츠를 자바스크립트가 전송하는 것을 방지하는 마스킹된(masked) 엘리먼트들의 리스트에서 규정된다. 원격 위치에서 웹 페이지를 보고 있는 사람은 오브젝트들을 선택할 수 있어서 이러한 오브젝트들이 사용자의 브라우저 내에서 하이라이트처리되도록 할 수 있다. 유사하게, 웹 페이지를 보고 있는 사람은 오브젝트들을 선택하고 그리고 오브젝트들로 정보를 입력함으로써 오브젝트들을 조종할 수 있다. 웹 페이지에 대한 업데이트들은 수집되고 합쳐져서 오직 최신의 업데이트들만 코브라우즈 세션을 통해 포워딩된다. 호버(hover) 상태와 같은 DOM에 영향을 미치지 않는 업데이트들 또한 상기 세션을 통해 전송된다.

Description

다른 형태의 정보 공유를 통한 코브라우징의 통합{INTEGRATING CO-BROWSING WITH OTHER FORMS OF INFORMATION SHARING}

본 발명은 통신 세션들에 관한 것으로, 보다 구체적으로는, 다른 형태들의 정보 공유를 통한 코브라우징(co-browsing)을 통합하기 위한 방법 및 장치에 관한 것이다.

본 출원은 2013년 7월 8일에 출원된 국제 출원 PCT/US2013/049615에 대한 계속(continuation)이며, 상기 국제 출원은 2013년 3월 11일에 출원된 미국 가특허 출원 제61/776,071호 및 2012년 7월 19일에 출원된 미국 가특허 출원 제61/673,729호에 우선권을 주장하며, 이들 특허 각각의 컨텐츠는 여기에서 참조로 통합된다.

판매 및 다른 고객 상호작용(interaction)을 위하여 웹 사이트들을 필요로 하는 회사들은 종종 고객 지원(customer support)을 제공하여, 만약 방문자가 상기 사이트를 돌아다니는 것에 불편함이 있는 경우, 상기 방문자는 고객 서비스 에이전트와 같은 활동가(live person)와 상호작용할 수 있다. 상기 에이전트는 음성 기반 통신 세션(전화 통화)을 사용하거나 또는 텍스트 기반 통신 세션(채팅 세션)을 사용하여 방문자와 상호작용할 수 있다.

예를 들어, 은행에서 동작되는 웹 사이트는, 잠재적 고객들로 하여금 고객 서비스 책임자와 채팅 및 대화하도록 허용하여 자신들 계좌들에 대해 이용가능한 특징들에 관한 보다 상세한 정보를 획득할 수 있도록, 헬프 서비스(help service)로의 링크를 포함할 수 있다. 고객이 헬프 버튼을 클릭하는 경우, 채팅 세션 또는 음성 세션이 시작되며, 이는 고객 책임자로 하여금 해당 고객과 연결되도록 야기할 것이다. 채팅 세션으로 타이핑되는 메시지들은 고객과 고객 책임자 사이에서 중계되거나 또는 에이전트와 고객은 실시간 대화(live conversation)를 하며 이는 고객으로 하여금 문제를 설명하고 에이전트로부터의 도움을 받도록 할 수 있다.

방문자가 웹사이트의 특정한 양상을 사용하거나 또는 접속하는데 문제가 있는 경우, 에이전트는 이러한 어려움을 어떻게 극복할지에 대하여 고객에게 알려주도록 시도할 수 있다. 불행하게도, 고객의 웹사이트의 화면을 에이전트가 확인하는 것이 불가능함으로 인하여 이와 관련하여 에이전트의 도움을 제공하는 능력이 방해될 수도 있다. 따라서, 에이전트의 관점으로부터, 방문자가 보고있는 것을 확인하기 위한 능력을 에이전트에게 제공하는 것이 바람직할 것이다.

본 출원의 하단에서 제시되는 요약서(Abstract) 및 이하의 발명의 내용(Summary)은, 이하의 발명을 실시하기 위한 구체적인 내용에서 논의되는 몇몇의 컨셉들을 제시하기 위하여 여기에서 제공된다. 상기 요약서 및 발명의 내용 섹션들은 포괄적이지 않으며 그리고 이하에서 표현되는 청구범위들에 의해 제시되는 보호가능한 내용의 범위를 기술하는 것으로 의도되는 것은 아니다.

코-브라우즈(co-browse) 서비스는 판매자의 고객 서비스 에이전트들로 하여금 고객이 현재 보고있는 웹 페이지들을 확인하도록 허용한다. 고객이 보고있는 것을 정확하게 파악하는 경우, 상기 에이전트는 유용한 도움을 제공하는데 있어서 보다 양호한 위치에 있을 수 있다. 에이전트의 화면으로부터 고객 민감 데이터(customer sensitive data)를 마스킹함으로써 프라이버시(privacy)가 향상될 수 있어서, 에이전트는 고객의 개인적인 데이터에 대한 엑세스를 획득하지 않고서도 도움을 제공할 수 있다. 일 실시예에서, JavaScript와 같은 ECMA Script는 방문자로부터 에이전트로 브라우저 상태(browser state)를 미러링하기 위해 사용된다.

잠재적으로 div들 및 페이지(page)들, 및 마스킹된 필드(masked field)들의 리스트는, 정보가 방문자의 브라우저를 이탈하는 것을 방지하기 위하여, 민감한 데이터를 포함하도록 의도되는 필드들과 연관된 정보를 방문자가 전송하지 못하게 하기 위하여 사용된다. 필드를 마스킹하는 것은 예를 들어, 에이전트 측에서 HTML 엘리먼트를 보존함으로써 HTML 입력 엘리먼트 상에서 구현될 수 있지만, 상기 입력 엘리먼트로 입력되는 방문자의 컨텐츠 또는 상태는 에이전트로 전달되지 않는다.

웹 페이지의 뷰(view)는 (a) HTML 엘리먼트들의 계층에 의해 표현되는 현재 문서 오브젝트 모델(DOM:Document Object Model)뿐만 아니라 (b) 마우스 위치, 스크롤 오프셋들, 호버(hover) 및 포커스 상태들과 같은 상태 정보에 의존한다. 방문자에서의 뷰와 에이전트에서의 뷰를 동기화시키기위하여, 페이지의 최초의 DOM 트리(tree)뿐만 아니라 이에 대한 임의의 후속적인 변경들은 에이전트로 포워딩되지만, <script> 태그들을 포함하는 것들은 제거된다. 이는, 상기 에이전트의 브라우저가 방문자의 브라우저와 동일한 스크립트를 실행시키는 경우 요구될 로컬 상태 정보(예컨대, 쿠키들, 브라우저 로컬 저장소)를 에이전트가 동기화시키는 것을 요구하지 않고, 방문자가 보는 뷰를 에이전트가 갖도록 허용할 수 있다. 게다가, 예를 들어, 호버 상태와 관련하여 문서 오브젝트 모델(DOM)에 영향을 주지 않는 변경들은, 검출되어 에이전트로 개별적으로 포워딩되어 상기 에이전트로 하여금 브라우저 상태를 시뮬레이팅하게 할 수 있다.

코-브라우징 세션들은 다수의 형식들로 에이전트에게 가용한 정보를 통하여 설정될 수 있다. 예시적인 정보 시스템들은 채팅 소프트웨어, 클릭-투-콜(click to call) 고객 관계 관리 소프트웨어(방문자가 그의 전화 번호를 제공하여 에이전트가 상기 방문자에게 콜-백할 수 있음), 및 다른 소프트웨어 시스템들을 포함한다.

코-브라우징 세션들은, 방문자와 상호작용하는 동안에 추가적인 형태들의 통신을 에이전트가 활용하도록 하기 위하여, 스크린 공유 세션들을 포함하는 다른 형태들의 상호(interactive) 정보 공유 세션들과 결합될 수 있다. 세션은 또한, 참가자들 중 한명이 웹 페이지 상의 오브젝트를 클릭하는 경우 발생되는 코드를 타이핑하거나 또는 구두로(verbally) 교환함으로써 전통적인 전화 통화 또는 제 3 자 채팅 세션 동안에 설정될 수 있다.

본 발명의 양상들은 첨부되는 청구범위들에서 특정되어 표현된다. 본 발명은 이하의 도면들에서 예시적인 방식으로 도시되며, 상기 도면들에서의 동일한 참조번호들은 유사한 엘리먼트들을 지칭한다. 이하의 도면들은, 예시적인 목적으로 본 발명의 다양한 실시예들을 개시하며 그리고 본 발명의 범위를 제한하는 것으로 의도되지는 않는다. 명확함을 위하여, 각각의 모든 컴포넌트들이 각각의 도면에서 라벨링되는 것은 아닐 수도 있다.
도 1 및 도 2는 코-브라우징 고객 지원 시스템에서의 참여자들 간의 정보의 흐름을 도시하는 기능적인 블록 다이어그램들이다.
도 3 내지 도 17은 웹 사이트에 대한 방문자와 연관된 코-브라우징 세션이 에이전트에 의해 위치되도록 하기 위한 방식들을 도시한다.
도 18은 소셜 미디어를 이용한 코-브라우징의 예시적인 통합을 도시한다.
도 19 및 도 20은 에이전트에 의하여 방문자에 대한 정보를 하이라이트표시하는 예시적인 방식을 도시한다.
도 21은 증분(incremental) 업데이트들을 결정하기 위한 예시적인 프로세스를 도시하는 흐름도이다.
도 22 내지 도 28은 코-브라우징을 통하여 스크린 공유 세션들을 통합하기 위한 예시적인 방식을 도시한다.

본 특허 문헌의 개시내용의 일부분은 저작권 보호에 대한 자료를 포함한다. 저작권자는 정확하게 특허 및 상표청 특허 파일 또는 레코드들에서 보여지는 형태의 특허 문헌 또는 특허 개시내용 중 어떠한 것에 의한 제로그래픽(xerographic) 복제(reproduction)에 대한 이의를 제기하지 않지만, 그 외에는 모든 저작권들을 보유한다.

이하의 구체적인 설명은 본 발명의 하나 이상의 실시예들에 대한 철저한 이해를 제공하기 위하여 다양한 구체적인 세부사항들을 제시한다. 하지만, 본 발명의 출원 분야에 있어서 통상의 지식을 가진자는 이러한 구체적인 세부사항들 없이도 본 발명의 실시될 수 있음을 이해할 것이다. 다른 예시들에서, 공지의 방법들, 절차들, 컴포넌트들, 프로토콜들, 알고리즘들, 및 회로들은 본 발명을 모호하게하지 않기 위하여 구체적으로 제시되지는 않는다.

[용어 정의(Definitions)]

고객(Customer):코-브라우징 서비스에 가입한 코-브라우징 서비스의 고객. 예시적인 고객은 도 1의 판매자(예컨대, 판매자 웹사이트(16)를 소유한 회사)이다.

웹사이트(Website): 코-브라우즈를 통하여 지원받을 고객에 의해 소유된 웹사이트

그룹 id(Group id): 코브라우징될 각각의 고객 웹사이트로 할당된 고유 id

방문자(Visitor): 웹사이트에 방문하는 임의의 사람

에이전트(Agent): 구매를 완료하는 것과 같은, 웹사이트 상에서의 다양한 태스크들을 수행하는데 있어서 방문자를 지원하는 책임자

마스킹된 필드(Masked field): 에이전트들에 가시적이지 않으며 뷰(view)로부터 마스킹되어야하는 웹사이트 또는 하나의 폼(form)에서의 입력 필드. 마스킹된 필드들은 예를 들어 방문자 신용 카드 번호와 같은 민감한 데이터를 포함하는 데이터를 포함할 수 있다.

마스킹된 오브젝트(Masked object): 에이전트들에 의한 입력으로부터 마스킹되는 방문자의 웹 브라우저 상의 입력 필드. 마스킹된 오브젝트들은, 예를 들어, 필드들, 폼(form)들, div들, 페이지들, 링크들, 버튼들 및 방문자의 제어 하에 유지되는 것이 요구되는 다른 오브젝트들을 포함할 수 있다. 에이전트에게는 원격 제어를 실행하는 경우 마스킹된 오브젝트에 대한 입력, 수정 또는 클릭이 허용되지 않는다.

C서버(CServer): 방문자로부터 세션 업데이트들을 수락하고 그리고 이를 에이전트로 중계하는, 코-브라우즈 세션들을 호스팅하는 보안 서버

코-브라우즈 웹서버(Co-browse webserver): 방문자들 및 에이전트들에 의한 세션들을 코-브라우징하기 위한 액세스를 제어하는 웹 서버. 상기 코-브라우즈 웹서버는 C서버와 공동위치(colocate)될 수 있거나 또는 네트워크 상의 개별적인 엔티티일 수 있다.

[코-브라우즈 오버뷰(Co-browse Overview)]

도 1은 방문자의 브라우저(10)의 컨텐츠가 에이전트의 브라우저(12)에서 가시적인 코-브라우징 시나리오에 대한 네트워크 다이어그램을 도시한다. 도 1에서 도시되는 실시예에서, 방문자 브라우저는 판매자 브라우저(16)로부터 페이지(14)를 획득한다. 화살표 1은 웹사이트로부터 방문자로의 웹 페이지의 다운로드를 도시한다. 코-브라우즈 서비스(18)는 방문자 브라우저로부터 에이전트 웹 브라우저(12)(화살표3)로 웹 페이지 업데이트들(화살표2)을 중계함으로써 코-브라우즈 세션을 용이하게 한다. 방문자 브라우저(10)로 하여금 이러한 업데이트들을 제공하도록 야기하기 위하여, 스크립트(20)(일 실시예에서의 JavaScript)가 판매자 웹사이트(화살표4)로부터 또는 코-브라우즈 서비스(화살표5)로부터 상기 방문자 브라우저로 다운로드된다. 대안적으로, JavaScript는 방문자 브라우저에서의 플러그인(plugin)으로서 유지될 수도 있다. 이하에서 보다 구체적으로 설명될 바와 같이, 프라이버시를 보호하기 위하여, 마스킹된 엘리먼트들(22)의 리스트는 방문자 브라우저로 다운로드된다. 스크립트와 유사하게, 마스킹된 엘리먼트들의 리스트는 판매자 웹사이트(화살표 6)로부터 다운로드될 수 있거나 또는 코-브라우즈 서비스(화살표 7)로부터 다운로드될 수 있다. 마스킹된 엘리먼트들의 리스트는 스크립트의 엘리먼트들(예컨대, DOM의 엘리먼트들)이 코-브라우즈 세션 상에서 전송되지 않아야 하도록 지시한다. 에이전트의 브라우저 또한 방문자의 브라우저 컨텐츠가 코-브라우즈 세션 동안에 디스플레이될 것인 코-브라우즈 서비스(화살표 8)로부터 페이지(24)를 다운로드한다.

스크립트(20)가 JavaScript를 사용하여 구현되는 것으로 설명되는 일 실시예가 제시될 것이나, 다른 형태의 스크립트 언어 또한 이용될 수 있다. 예를 들어, JavaScript는 ECMA-262 스펙에서의 ECMA International에 의한 스크립트 언어 표준의 구현이다. 이러한 표준의 다른 구현들은 JScript 및 ActionScript를 포함한다. 따라서, JavaScript가 사용되는 구현이 설명될 것이나, 본 발명은 다른 형태들의 스크립트 또한 사용될 수도 있기 때문에 이러한 특정한 구현으로 제한되지는 않는다.

코-브라우즈 솔루션은 에이전트로 하여금 방문자가 현재 방문하고 있는 웹페이지(판매자 웹사이트)를 보도록 할 수 있다. 코-브라우징 세션은 웹 브라우징 세션 동안에 다운로드되는 JavaScript에만 의존하기 때문에, 방문자는, 에이전트가 상기 방문자의 브라우저를 확인하게 하기 위하여, 임의의 보안 경고 다이얼로그(dialog)들을 해제하거나(dismiss) 또는 임의의 소프트웨어 또는 플러그인들을 수동적으로 인스톨하지 않아도 된다. 유사하게, JavaScript는 판매자 웹사이트로부터 서빙되는 웹 페이지의 일부분이기 때문에, 상기 JavaScript는 임의의 다른 웹 페이지들로 이어지지(carry over) 않을 것이며, 이는 방문자의 데스크탑 상의 어떠한 것들 또는 다른 웹 사이트들로부터의 어떠한 페이지들도 에이전트가 확인하지 못할 것이라는 것을 의미한다.

이하에서 보다 구체적으로 설명되는 바와 같이, 코-브라우즈 솔루션은 에이전트로 하여금 방문자가 보고있는 것을 정확하게 확인하도록 할 수 있다. 예를 들어, 웹페이지가 방문자에게 완전하게 가시적이지 않은 경우, 에이전트는 웹페이지의 가시적인 부분만을 확인할 것이다. 이러한 뷰(view)는 방문자가 스크롤(scroll)하거나 또는 페이지의 사이즈를 조정함에 따라 자동적으로 업데이트될 것이다. 방문자가 다수의 탭(tab)들을 오픈한 경우, 에이전트가 방문자가 보고있는 것을 확인할 수 있도록, 상기 에이전트는 포커싱하고있는 탭만을 확인할 수 있다. 상기 에이전트는 또한 방문자의 마우스 포인터의 위치를 확인할 수 있으며, 이는 에이전트로 하여금 웹 사이트와 상호작용하는 동안에 방문자가 포커싱하는 위치를 이해하도록 허용한다. 만약 에이전트의 브라우저가 에이전트의 컴퓨터 상의 활성 윈도우(active window)인 경우, 에이전트는 또한 어떠한 입력 필드가 현재 방문자 측에서 포커싱되고 있는지를 확인할 수 있을 것이다. 방문자가 선택 박스(select box)를 오픈한 경우, 이러한 선택 박스는 또한 에이전트 측에서도 오픈될 것이다.

에이전트로 하여금 가시적인 방식으로 방문자와 상호작용하게 하기 위하여, 상기 에이전트는 에이전트 브라우저(12) 상에서의 웹 페이지의 특정한 엘리먼트들 또는 영역들을 클릭하도록 허용된다. 에이전트가 이를 수행할 때, 대응되는 엘리먼트들이 에이전트의 브라우저와 방문자의 브라우저 모두에서 가시적으로 하이라이트처리될 것이어서, 상기 에이전트는 방문자의 주의(attention)를 웹 페이지의 특정한 부분으로 향하게 할 수 있다. 예를 들어, 하이라이트 처리는 특정 엘리먼트들 주변에 그려진(drawn) 프레임의 형태를 취할 수 있거나 또는 상기 엘리먼트들을 가시적으로 구별하는 일부 다른 방식을 취할 수도 있다. 바람직하게 하이라이트 처리는, 에이전트가 자신의 마우스 버튼을 홀드 다운(hold down)하는 동안에, 방문자에게 가시적일 수 있다. 일부 다르게 규정된 짧은 시간 기간 또는 해제(releasing)한 후 몇초 이후, 이는 에이전트에 의한 추가적인 액션 없이 자동적으로 사라지거나(disappear) 또는 점차적으로 사라질(fade away) 것이다.

선택적으로, 에이전트는 방문자 브라우저(10)로의 입력을 제공할 수 있다. 예를 들어, 에이전트는, 방문자의 브라우저(10) 상에서 보여지는 웹 페이지(14) 상의 선택된 엘리먼트로 정보를 타이핑할 수 있거나, 드롭 다운(drop down) 리스트들의 세팅들을 변경할 수 있거나, 무선 버튼들 또는 체크박스들을 선택할 수 있거나 또는 그렇지 않으면 상기 페이지 상의 입력 엘리먼트들과 상호작용할 수 있다. 구현에 따라서, 에이전트는 방문자를 대신하여 버튼들 또는 링크들을 클릭할 수도 있다. 방문자 특정 신용 카드 번호 및 다른 민감한 데이터와 같은 방문자 민감 데이터를 보호하기 위하여, 신용 카드 번호들과 같은 민감한 데이터를 포함하는 웹페이지의 영역들 또는 폼 필드(form field)들은 시각적으로 마스킹되어, 민감한 데이터가 에이전트로 제공되지 않게 될 수 있다. 데이터가 방문자의 브라우저를 떠나지 않기 때문에, 코-브라우즈 서비스는 방문자 민감 데이터에 액세스하지 못하거나 또는 방문자 민감 데이터와 상호작용하지 못할 것이다. 따라서, 방문자 측에서의 데이터에 대한 마스킹은 방문자가 네트워크 상에서의 민감한 데이터를 전송할 필요성 또는 민감한 데이터를 통한 제어를 포기할 필요성을 방지할 수 있어서, 상기 데이터는 방문자의 제어로부터 이탈되지 않게 된다.

선택적으로, 마스킹된 필드들은, 방문자가 어떤 필드들이 마스킹되었는지 그리고 어떤 필드들이 마스킹되지 않았는지를 알게 하기 위하여, 상기 방문자에 대하여 식별될 수 있다. 마스킹되는 필드들에 대한 초록색 박스 아웃라인과 같이, 이러한 종류(nature)의 표시를 제공하는 것은, 에이전트에게 가시적이지 않은 필드들 및 방문자의 브라우저를 떠나지 않는 필드들의 정보를 파악함으로써 방문자에게 보안감을 제공할 수 있다.

이하에서 기재되는 코-브라우즈 서비스는 모든 웹 브라우저들에서 지원되지는 않는 SilverLight, Flash 또는 Java와 같은 플랫폼 대신에 JavaScript에 기초하기 때문에, 코-브라우즈 서비스는, 방문자가 스마트폰 또는 태블릿과 같은 모바일 디바이스를 사용하여 사이트에 액세스하는 경우에도 에이전트에게 방문자의 브라우저를 볼 수 있는 능력을 제공한다. 유사하게, 코-브라우즈 솔루션은 또한 PC들/Mac들과 함께 동작할 것이다. 유사하게, 방문자 DOM 및 상태 정보의 업로딩(단순히 방문자 페이지 URL을 전송하는 것과 비교할 때)은, 방문자가 자신의 브라우저 상태를 재생성(re-create)할 필요 없이 방문자가 판매자 웹사이트에 액세스하는 동안에, 임의의 포인트에서 코-브라우즈 세션이 시작되도록 할 수 있다. 최종적으로, 판매자 웹사이트에 대한 변경만이 상기 스크립트에 포함되기 때문에, 코-브라우즈 서비스는, 에이전트로 하여금 판매자의 웹사이트에 대한 변경 없이 또는 일부의(few) 변경으로 방문자에에게 코-브라우즈 기반 지원을 제공하도록 할 수 있다.

[구현(Implementation)]

일 실시예에 따라서, 코-브라우즈 서비스는 판매자가 판매자 웹사이트로 삽입할 것을 동의한 스크립트 태그에 의존한다. 이러한 JavaScript(예컨대, cobrowse.js)는, 방문자가 판매자 웹 페이지를 로딩할 때, 코-브라우즈 서비스로부터 방문자로 직접적으로 전달될 수 있거나 또는 웹사이트로부터 방문자로 전달될 수 있다. 이러한 JavaScript는, 코-브라우즈 세션이 시작되면, 방문자 브라우저로 하여금 판매자 웹 페이지 HTML 및 다른 데이터를 방문자로부터 코-브라우즈 서비스로 업로드하도록 야기한다. 상기 코-브라우즈 서비스는 결국 이러한 데이터를 에이전트가 보기위한 웹페이지들로서 렌더링한다.

대안적으로, JavaScript(예컨대, cobrowse.js)가 웹사이트로부터 방문자로 로딩되도록 하는 것이 아니라, 사람이 Jabascript 코드를 브라우저 플러그-인으로서 수동적으로 인스톨할 수도 있다. 플러그-인에 대한 장점은, 웹사이트 특정적일 필요가 없다는 점이며, 이에 따라서 사용자로 하여금, 코-브라우즈 스크립트를 포함시키기 위하여 수정되지 않은 웹사이트들을 코-브라우징하도록 허용할 수 있다. 구체적으로, 플러그-인에 포함된 JavaScript는, 사용자("리더(leader)")가 액세스하는 웹사이트가 무엇인지와는 관계없이, 브라우저 상태가 코-브라우징 서비스로 포워딩되도록 야기할 것이다. 이는, 예를 들어, 상기 리더가 자신의 웹 경험을 다른 "팔로어(follower)들"과 공유하고자 하는 경우에 유용할 수 있으며, 따라서 팔로어 모두가 예를 들어, 소셜 쇼핑과 관련하여, 리더가 웹을 서핑함에 따라서 시각적으로 이를 따라할 수 있는 소셜 경험을 향유할 수 있다.

몇몇의 예시들에서, 판매자의 웹 사이트는 예를 들어, 채팅 툴 또는 클릭-투-콜 특징으로부터의 기존의 다른 JavaScript를 가지고 있을 수 있다. 이러한 기존의 JavaScript는 판매자의 승인을 통하여 cobrowse.js 스크립트를 호출하는데 사용될 수 있다. 이러한 접근법의 이점으로는, 판매자가 판매자의 웹 사이트에 대한 수정을 전혀하지 않고서 코브라우즈 솔루션을 채용 또는 시험사용할 수 있다.

일 실시예에서, JavaScript(본 예시에서의 cobrowse.js)는 a) 코-브라우즈 세션이 시작할 때 또는 b) 코-브라우즈 세션이 이미 시작되었을 때, 판매자 웹사이트가 로딩을 완료한 때에 이하를 수행한다:

1. 마스킹된 엘리먼트들의 기술어(descriptor)를 획득. 마스킹된 엘리먼트들의 기술어는 런타임(runtime)에서 서버로부터 (AJAX 또는 웹소켓들을 통하여) 동적으로 리트리브될 수 있거나 또는 이하의 예시와 같은 cobrowse.js 파일에서의 JavaScript 변수로서 임베디드될 수 있다:

Glance.CoBrowse.MaskedElements

=[“input#credit_card_number”,”div[masked=’true’]”]

2. 주기적으로:

a. 문서 헤드 엘리먼트를 복제(clone)하고, 베이스 태그(base tag)가 페이지에 대하여 규정되지 않은 경우, 상기 페이지에 대하여 임의의 관련 URL들에 대한 베이스를 표시하는 <base> 태그를 삽입하고, 스크립트 태그들을 제거하고, 그리고 복제된 계층을 HTML로서 렌더링한다. 만약 <base> 태그가 상기 페이지에 대하여 이미 규정되었지만 이에 선행하는 관련 URL들을 갖는 <link> 태그들이 존재하는 경우, 이러한 <link> URL들은 절대(absolute) URL들로 변환(convert)된다. 대안적으로, <base> 태그를 추가하는 것과 스크립트 태그들의 제거는 코-브라우즈 서비스에 의해 서버-측에서 수행될 수 있다. 이러한 태스크들을 방문자의 브라우저로 오프로딩(offloading)하는 것 또한 코-브라우즈 세션 서버들이 보다 많은 세션들을 다루도록 허용한다.

b. 문서 바디(body) 엘리먼트를 복제하고, 스크립트 태그들 및 히든 입력들(hidden inputs)을 제거하고, 마스킹된 엘리먼트들의 값들을 더미(dummy) 데이터로 대체하며, 그리고 복제된 계층을 HTML로서 렌더링한다. 페이지에 시각적으로 영향을 미치지 않는 세션 상태 정보를 포함하는 하나 이상의 히든 입력들을 다수의 페이지들이 포함한다. 방문자 측에서 그려진 어떠한 제스쳐가 존재하는 경우, 에이전트 측에서 그려진 제스처와 중복적이기 때문에, cobrowse.js는 제스쳐 엘리먼트를 또한 제거한다. 대안적으로, 스크립트 태그들의 제거는 코-브라우즈 서비스에 의해 서버측에서 수행될 수 있다. 이러한 태스크들을 방문자 브라우저로 오프로딩하는 것 또한 코-브라우즈 세션 서버들이 보다 많은 세션들을 다루도록 허용한다.

c. 모든 사용자 입력 오브젝트들(텍스트 필드들, 라디오 버튼들, 체크박스들, 드롭다운들)을 반복하고 그리고 사용자에 의한 임의의 데이터 입력을 수집한다. 캔버스(canvas) 오브젝트들의 현재 상태 또한 수집될 수도 있다.

d. 방문자 마우스 위치를 검출한다.

e. 방문자 스크롤 오프셋들을 검출한다.

f. 방문자 브라우저의 크기(dimension)들을 검출한다.

g. 페이지 상의 엘리먼트가 포커싱하고 있는 것을 검출한다.

h. 임의의 선택 박스가 오픈되었는지 여부를 검출한다.

i. 상기 모든 것들(변경된 경우)을 코-브라우즈 서비스로 전송한다. 데이터는 XMLHTTPRequest 또는 XDomainRequest(AJAX), 또는 웹소켓들 또는 일부 다른 수단의 크로스-도메인 통신을 통하여 전송될 수 있다. 이러한 단계에서 전송되는 데이터는 상기 데이터가 전송되기 전에 인코딩 및/또는 압축될 수 있다. 선택적으로, 데이터의 오직 일부만이 변경된 경우, 변경된 부분들만 전송될 수도 있다.

방문자 브라우저에서 실행중인 JavaScript가 DOM에 대한 수정을 할 수도 있기 때문에, a 내지 h 단계는 주기적으로 반복된다는 점이 주목된다.

더불어, a 및 b 단계 모두에서, 코-브라우즈 서비스로 업로드되는 스크립트는 HTML로부터 제거되어, 에이전트로 다운로드될 때 상기 스크립트는 실행되지 않는다. 만약 스크립트가 고객의 브라우저에서의 문서 엘리먼트 계층을 수정하는 경우, 계층에 대한 변경들은 코-브라우즈 서비스를 통하여 에이전트로 반영되지 않을 것이어서, 상기 스크립트는 에이전트의 브라우저에서 직접적으로 실행될 필요가 없다.

Cobrowse.js는 코-브라우즈 서비스에 의해 또는 판매자에 의해 호스팅될 수 있다. 이는 도 1에서의 화살표 4 및 5에서 도시된다. 유사하게, 방문자에 의해 획득된 마스킹된 엘리먼트들의 리스트는 판매자 웹사이트(화살표 6)로부터 또는 코-브라우즈 서비스(화살표 7)로부터 리트리브될 수 있다. 마스킹된 엘리먼트들의 리스트가 웹사이트에 특정적이기 때문에, 이는 코-브라우즈 세션에서 전송되지 않아야 하는 웹사이트 스타일 시트에서의 엘리먼트들의 리스트를 명시하기 위하여, 웹사이트에 대하여 또는 웹사이트에 의하여 형성될 것이다. 일 실시예에서, 마스킹된 엘리먼트들의 리스트는 웹사이트에 대한 CSS(Cascading Style Shee)의 리스트를 포함한다. 상기 리스트는 방문자의 개인 정보를 보호하기 위하여 방문자로 제공된다. 일 실시예에서, 코-브라우징 세션이 구현될 코-브라우즈 서비스 또는 웹 사이트의 각각의 페이지에 대한 고유의 리스트를 만드는 것이 가능하다고 하더라도, 상기 리스트는 각각의 웹사이트에 대하여 형성된다.

마스킹될 엘리먼트들의 선택은, 관리자(administrator) 또는 다른 사람으로 하여금, 시각적 엘리먼트(visual element)가 마스킹될 것이 요구되는지 아니면 민감한 정보를 보호하기 위하여 마스킹되어야 하는지를 명시하기 위하여, 판매자 웹사이트의 엘리먼트들을 시각적으로 식별하도록 그리고 예컨대 툴 팁(tool tip)과 같은 관리자 사용자 인터페이스 상에서 클릭하도록 허용함으로써 구현된다. 관리자가 마스킹될 엘리먼트들을 선택한 경우, MaskedElements 기술어가 이러한 입력에 기초하여 생성된다. 관리 사용자 인터페이스는 cobrowse.js.에서 구현될 수 있거나 또는 코-브라우징 세션들과 관련하여 마스킹될 웹사이트의 필드들을 판매자가 선택하도록 하기 위해 판매자로 제공되는 소프트웨어를 통하여 구현될 수도 있다. 이러한 리스트를 보호하기 위하여, 판매자는 로그인할 것을 요구받거나 그렇지 않으면 판매자의 MaskedElements 기술어로의 수정 이전에 인증받을 것을 요구받게된다.

마스킹된 엘리먼트들의 사용이 엘리먼트들의 세트가 웹사이트를 수정하지 않고 마스킹되도록 한다고 하더라도, 임의의 정의된 속성을 갖는 오브젝트들이 자동적으로 마스킹되도록 할 것인 마스킹된 필드 정의(masked field definition)를 생성하는 것 또한 가능하다. 예를 들어, *[co-brose hide=true]의 마스킹된 필드 정의가 존재하는 경우, co-browse_hide="true"와 같은 속성이 마스킹되어야 하는 웹사이트 상의 엘리먼트들을 식별하는데 사용될 수 있다.

[차등 업데이트(Differential Updates)]

웹 페이지 상에서 실행되는 JavaScript는 종종 페이지 로드, 타이머 또는 사용자 액션과 같은 다양한 이벤트들에 응답하여 페이지 DOM을 수정한다. 전형적인 예시들은 디스플레이된 이미지가 정기적인 시간 인터벌들에서 변경하는 회전 이미지 마르퀴즈(marquis)이거나 또는 일번적으로 숨겨져 있지만 사용자 클릭에 응답하여 가시적이되는 팝업 메뉴일 것이다.

효율성을 위하여, 방문자는 전체 DOM 트리에 대한 스냅샷을 보유하고 그리고 차이(difference)들을 검색한다. 방문자 JavaScript는 가능한 경우 전체 페이지 HTML을 재-업로드하는 것을 피하기 위하여 페이지에 대한 증분적인 변경들에 대한 정보를 전송한다. 에이전트가 페이지를 먼저 보는 경우, 에이전트 JavaScript는 Ctjqjfhqnxj 최초의 페이지 HTML을 다운로드하고 그리고나서 페이지가 최초로 업로드되었을 때부터 발생한 임의의 증분 업데이트들을 적용시킨다. 에이전트가 페이지를 보는 경우, 임의의 새로운 증분 변경들은, 이들이 방문자로부터 C서버에 의해 수신될 때, 에이전트로 즉시 푸쉬된다.

주기적으로, 동일한 엘리먼트들은 방문자 측에서 반복적으로 변경된다. C서버가 방문자에 의해 리포팅되는 이러한 변경들 모두를 저장하기로 한 경우, 에이전트가 상기 세션에 먼저 접속할 때 상기 에이전트는 스크린의 일부분의 플래싱(flashing)을 야기할 수 있는 스크린의 동일한 부분 모두와 관련된 업데이트들의 그룹을 수신할 것이다. 유사하게, 에이전트가 방문자가 돌아다니는 새로운 페이지를 리트리브하는 시간과 페이지에 대한 후속 업데이트들을 리트리브하기 위하여 에이전트가 C서버에 접속한 시간 사이의 일부 딜레이가 존재하는 경우, 방문자 스크린에 대한 다수의 변경들은, 후속 업데이트들이 에이전트 뷰로 적용될 때 스크린의 일부분의 플래싱을 야기하면서 동시에 상기 에이전트로 포워딩될 수 있다.

따라서, 일 실시예에서, 방문자는 모든 차이(differnece)들을 누적시키고 그리고 전체(full) 페이지가 전송된 이후로 누적된 차이들을 포워딩한다. 누적 차이들의 세트를 생성하기 위하여, 방문자 JavaScript는 DOM에 대한 다른 변경들에 의해 오버라이트(overwrite)된 관계없는 변경들을 폐기한다.

차등 업데이트의 타입(Types of Differential Updates)

방문자에 의해 현재 검출된 3가지의 증분 차이들의 타입들이 존재한다: 속성 차이(ATTR diff), 컨텐츠 차이(CONTENT diff), 및 HTML 차이(HTML diff).

속성 차이(Attribute Difference)

속성 차이는 엘리먼트의 속성의 세트가 변경된 것을 표시한다. 속성들은 추가되거나, 수정되거나 또는 제거될 수 있다. ATTR diff는 새로운 세트의 속성들을 명시한다. 선택적으로, ATTR diff는 어떠한 속성들이 추가, 수정 또는 제거되었는지를 매우 정밀하게 명시할 수 있다.

ATTR diff의 JSON 표현의 예시는 다음과 같다:

{

"diff":"ATTR",

"path":"#account>div:nth-of-type(1)>table:nth-of-type(1)>tbody:nth-of-type(1)>tr:nth-of-type(1)>td:nth-of-type(1)>p:nth-of-type(1)",

"data":{"style":"color:red", “class”:”boldparagraph”}

}

이러한 예시에서, "diff"는 증분 차이의 타입을 표시하고, "path"는 속성(들)이 변경된 엘리먼트에 대한 css 경로를 표시하며, 그리고 "data"는 엘리먼트에 대한 현재 속성들의 세트를 표시한다. ATTR diff를 처리하기 위하여, 에이전트 JavaScript는 엘리먼트의 모든 기존의 속성들을 제거하고 ATTR diff에서 명시된 모든 속성들을 적용한다.

컨텐츠 차이(Content Difference)

컨텐츠 차이는 엘리먼트의 텍스트 컨텐츠가 변경된 것을 표시한다. 상기 엘리먼트는 Elements를 포함하지 않으며 오직 텍스트 노드(text Node)만을 포함하여야 한다. CONTENT diff의 JSON 표현의 예시는 다음과 같다:

{

"diff":"CONTENT",

"path":"#account>div:nth-of-type(1)>table:nth-of-type(1)>tbody:nth-of-type(1)>tr:nth-of-type(1)>td:nth-of-type(1)>p:nth-of-type(1)",

"data":"somewhere over the rainbow"

}

CONTENT diff의 경우에서, "data"는 엘리먼트의 새로운 텍스트 컨텐츠를 표시한다. CONTENT diff를 처리하기 위하여, 에이전트 JavaScript는 CONTENT diff에서 명시되는 현재의 텍스트 컨텐츠로 엘리먼트의 기존의 텍스트 컨텐츠를 대체한다.

HTLM 차이(HTML Difference)

세번째 타입의 차이인 HTML diff는 자식 노드들의 넘버, 타입들 또는 값들이 변경되는 경우 적용된다. HTML diff의 JSON 표현의 예시는 다음과 같다:

{

"diff":"HTML",

"path":"#anid",

"data":"abc <b>def</b> ghi"

}

여기서 "data"는 #anid에 의해 식별되는 엘리먼트 내의 현재의 HTML 마크업이다. 현재 HTML diff가 검출될 때 방문자 JavaScript는 새로운 전체(full) 업데이트를 전송한다. 대안적으로, 일부 HTML diff가 차등 업데이트들로서 처리될 수도 있다.

누적 차이(Cumulative Diffs)

DOM 변경들이 발생되는 경우, 방문자는 JSON 표현의 변경들을 C서버로 전송한다. C서버는, 방문자 페이지를 이전에 수신했고 C서버에 대한 오픈 웹소켓 접속을 가진 임의의 에이전트들로 증분 변경들을 포워딩한다. 방문자의 페이지를 리트리브하지않았거나 또는 C서버로의 웹소켓 접속을 수립하지 않은 임의의 에이전트들에게 변경들의 완전한 세트가 가용하다는 것을 보장하기 위하여, C서버는 방문자가 먼저 페이지를 송신한 이후에 발생된 누적 차이들의 세트를 저장해야한다. 종종, 마르퀴즈의 케이스에서와 같이, 페이지 DOM은 여러번 변경된다. 이러한 경우, C서버는 결국 증분 변경들의 임의적인 길이의 리스트가 적용되도록 할 수 있다. 세션에 참가하는 에이전트는 이러한 길이의 리스트를 다운로드하고 적용시킬 필요가 있을 것이다. 이는 형편없는 동작이 되고 에이전트 뷰의 플래싱을 야기할 수 있다. 예를 들어, <img> 태그의 "src" 속성이 일련의 이미지들 사이에서 회전하는것 처럼,동일한 페이지 엘리먼트는 각각의 시간에 동일한 방식으로 변경되는 것이 일반적이며, 이는 동일한 엘리먼트에 대하여 ATTR diffs의 상속(succession)으로 이어진다. 증분 DOM 변경들의 누적(accumulation)을 방지하기 위하여, 방문자 JavaScript는 가장 최신의 증분 변경뿐만 아니라 통합된 누적 변경들의 세트(누적 차분)을 전송한다. 동일한 엘리먼트가 이에 적용된 동일한 타입의 변경을 갖는 경우, 가장 최신의 변경이 누적 차분에서 더 오래된 변경(older change)을 오버라이드(override)한다.

예를 들어,

{

“diff”:”ATTR”,

“path”:”#anelementid”,

“data”:{ “style”:”color:red”}

}

와 이에 후속하는

{

“diff”:”ATTR”,

“path”:”#anelementid”,

“data”:{ “style”:”color:blue”}

}

는, 단일의 누적 diff로 통합될 것이다:

{

“diff”:”ATTR”,

“path”:”#anelementid”,

“data”:{ “style”:”color:blue”}

}

누적 diffs가 방문자에 의해 수집되고 통합되는 일 실시예에서, 에이전트가 페이지를 볼 때, 뷰어는 최초의 페이지 HTML을 리트리브하고 디스플레이한다. 상기 뷰어는 그리고나서 웹소켓 접속을 통하여 누적 차이들의 현재 세트를 리트리브하고 그리고 이러한 차이들을 뷰로 적용시킨다. 임의의 후속 증분 차이들은 이들이 방문자로부터 도착할 때 웹소켓 접속을 통해 수신된다.

대안적인 구현은 서버 측 상의 증분 차이들을 통합할 수 있다. 이는 방문자가 DOM 변경 마다 누적적 차이들의 전체 세트를 업로드할 필요성을 제거시킬 것이지만, C서버 상의 보다 큰 부하를 가중시킬 것이다.

DOM 트리 차이 알고리즘 (DOM Tree Difference Algorithm)

방문자 JavaScript는 업데이트를 C서버로 송신할 때마다 DOM 트리의 카피를 저장한다. 새로운 업데이트를 송신할 때, 방문자 JavaScript는, ATTR, CONTENT 및 HTML의 세트를 계산하여, 현재의 DOM 트리를 이전 업데이트를 통해 송신된 DOM 트리와 비교한다. 비교 알고리즘 Diff(elem 1, elem 2)는 도 21에서 도시된다. 도 21에서 도시된 Diff() 알고리즘은, 각각 elem 1 및 elem 2로서 이전 및 현재의 DOM 트리의 문서 엘리먼트 루트(root)들로 최초에 호출되는 반복적인 방법임에 주목한다.

HTML 문서에서, HTML 엘리먼트들은 엘리먼트와 텍스트 노드 자식(children)을 모두 포함할 수 있다. 텍스트 노드 자식이 텍스트의 spans를 포함하는 동안에, 엘리먼트들은 차례차례 다른 노드들 또는 엘리먼트들을 포함할 수 있는 네스티드(nested) HTML 엘리먼트들이다. 엘리먼트가 다른 엘리먼트들을 포함하지 않는 경우(그리고 단지 하나의 텍스트 노드를 포함하거나 또는 텍스트 노드들을 포함하지 않는 경우(zero text nodes)), 텍스트 노드에서의 텍스트의 변경은 CONTENT diff에 의해 표현될 수 있다. 엘리먼트가 엘리먼트들 및 텍스트 노드들 모두를 포함하는 경우, 텍스트 노드들 중 임의의 노드에서의 텍스트에 대한 변경들은 부모 엘리먼트에 대한 HTML 변경에 의해 표현될 것이다.

도 21에서 도시되는 바와 같이, 비교 알고리즘 Diff(elem1, elem2)(2100)는 엘리먼트 1의 속성들이 엘리먼트2의 속성들과 매칭되지 않는지 여부를 결정(2102)하기 위해 체크함으로써 ATTR diff가 존재하는지 여부를 결정하여 시작된다. 속성들 간의 차이가 존재한다면, 상기 알고리즘은 엘리먼트 2의 속성들을 갖는 ATTR diff를 생성한다.

다음으로 상기 알고리즘은 엘리먼트 자식들의 넘버 및 타입들을 비교한다(2014). 자식들이 상이한 경우, 상기 알고리즘은 HTML diff에 엘리먼트 2의 내부(inner) HTML을 추가할 것이다(2106). 여기서, 상기 알고리즘은 HTML 차이를 검출할 것이고 이에 따라 반복을 중지하고(2108) 업데이트된 HTML을 포워딩할 것이다.

단계 2104에서 엘리먼트 자식들의 넘버 및 타입이 동일한 것으로 결정되는 경우, 상기 알고리즘은 엘리먼트 자식들이 존재하지 않는지(zero element children) 여부를 결정할 것이다(2110). 엘리먼트 자식들이 존재하지 않는 경우, 상기 노드는 텍스트-온리-노드(text-only-node)이다. 상기 알고리즘은 엘리먼트 1의 텍스트 컨텐츠와 엘리먼트 2의 텍스트 컨텐츠를 비교할 것이다(2112). 2개의 엘리먼트들의 텍스트가 동일한 경우, 2개의 엘리먼트들 간의 차이가 존재하지 않게되며 상기 알고리즘은 상기 반복을 중지할 것이다(2114). 2개의 엘리먼트들 간의 차이가 존재하는 경우, 상기 알고리즘은 엘리먼트 2의 텍스트 컨텐츠를 갖는 CONTENTdiff를 생성할 것이다(2116).

만약 단계 2110에서 엘리먼트 자식들이 0보다 많은 경우, 상기 알고리즘은 각각의 자식 노드의 수(number), 타입 및 노드값(nodeValue)을 비교할 것이다. 이러한 값들이 상이한 경우, 상기 알고리즘은 HTML diff에 엘리먼트 2의 내부 HTML을 추가할 것이다(2106). 여기서, 상기 알고리즘은 HTML 차이를 검출할 것이며 이에 따라 반복을 중지하고(2108) 그리고 업데이트된 HTML을 포워딩할 것이다.

2118 단계에서 상기 알고리즘이 HTML 차이를 검출하지 않은 경우, 상기 알고리즘은 DOM 트리의 하부 엘리먼트들에서의 변경을 검색하기 위하여 엘리먼트 1 및 엘리먼트 2의 대응하는 자식 엘리먼트들의 각각의 쌍에 대하여 반복될 것이다. 이러한 방식으로, 전체 DOM 트리는 DOM에 대한 증분 업데이트들을 검색하기 위해 반복될 것이며, 이는 코-브라우즈 세션에서 포워딩하기 위한 업데이트들을 생성하는데 사용될 수 있다.

i프레임 엘리먼트들(iFrame elements)

방문자 웹 페이지는 고객 웹사이트 상의 다른 페이지를 참조하는 iframe 엘리먼트들을 포함할 수 있다. 방문자 Cobrowse.js가 상기 페이지를 HTML로 렌더링할 때, iframe 엘리먼트는 <iframe src="iframurl"/>>로서 렌더링될 것이다. iframe 페이지의 컨텐츠들은 포함되지 않는다. 그러나, Cobrowse.js의 개별적인 카피는, 고객 웹사이트 상의 모든 다른 코-브라우징 가능한 페이지들의 경우와 마찬가지로, iframe 소스 페이지에 포함된다. iframe 페이지가 로딩될 때, iframe의 Cobrowse.js는 메인 세션의 "서브 세션"처럼 코-브라우즈 서비스로 iframe 페이지 데이터를 업로드한다. iframe 내의 마우스 위치, 제스쳐들, 입력들, 스크롤 위치, 마우스 클릭 등은 메인 세션의 경우 처럼 C서버로 모두 업로드된다.

페이지 HTML을 업로딩할 때, 방문자는 iframe src 속성을 iframe 서브-세션에 대한 URL로 대체한다. 에이전트 측에서, iframe은 서브 세션 뷰를 리트리브할 것이다. 에이전트 iframe 뷰는 또한 에이전트 뷰어 JavaScriptCobrowseViewer.js의 추가적인 카피를 획득할 것이며, 이는 C서버로부터의 업데이트들에 기반하여 상기 뷰를 계속적으로 업데이트할 것이다.

에이전트 뷰(Agent View)

한편, 에이전트는 표준 웹 브라우저 또는 플러그-인을 통해 향상된 가능한(성능강화를 위한) 웹 브라우저를 사용하여 또는 일부 다른 수단들을 통하여, 코-브라우즈 서비스로 로그인할 것이다. 에이전트의 브라우저는 고객의 페이지의 에이전트 뷰를 요청한다. (도 1에 도시되는 바와 같이) 에이전트로 서빙되는 페이지는 방문자 브라우저와 동일한 크기들을 갖는 iframe을 포함한다. iframe src URL은, HTML로 삽입되는 "cobrowseviewer.js"를 참조하는 <script> 태그를 통하여, 고객에 의해 송신된것 처럼 헤드 및 바디 HTML을 갖는 코-브라우즈 서비스에 의해 구성되는 페이지를 리트리브한다. 방문자가 상기 페이지를 스크롤하는 경우, 스크롤 오프셋들 만큼 상기 페이지의 상부 왼쪽으로부터 오프셋되는 <div>를 코-브라우즈 서비스가 페이지로 삽입한다. 상기 div는 id "glance_scroll"를 가지며 그리고 iframe src url은 관련 부분 "#glance_scroll"을 포함하여, 페이지가 프레임에서 로딩될 때 <div>가 프레임의 상부 왼쪽에 있게 되도록 <div>는 즉시 오프셋될 수 있다. 이러한 접근은 결과적으로 에이전트 뷰가, 에이전트의 뷰를 스크롤하기 위하여 페이지에 대한 JavaScript를 기다리지 않고서, 정확한 스크롤 오프셋에 즉시 위치되도록 한다.

Cobrowseviewer.js는 에이전트 브라우저 상에서 실행되고 그리고 코-브라우즈 서비스로부터 입력 필드 값들, 선택 박스 상태, 엘리먼트 포커스, 브라우저 크기들, 마우스 위치, 스크롤 오프셋들, 증분 DOM 변경들을 주기적으로 리트리브하도록 동작한다. 상기 코브라우즈 서비스는 또한 페이지 HTML에 대해 가용한 전체 업데이트가 존재하는지 여부를 에이전트에게 통지할 것이다. Cobrowseviewer.js는 이하의 동작들을 수행한다:

1. 페이지 HTML에 전체 업데이트(full update)가 있는 경우, Cobrowseviewer.js는 현재의 HTML을 갖는 새로운 뷰를 획득하기 위하여 전체 프레임을 리프레쉬(refresh)한다(대안적으로, 페이지는 업데이트된 헤드 및 바디 HTML을 사용하여 자신을 리빌딩할 수 있다).

2. 그렇지않으면, Cobrowseviewer.js는:

a. 임의의 증분 변경들을 DOM으로 적용한다.

b. 고객의 브라우저 윈도우와 동일한 오프셋으로 윈도우(iframe 내에 있음)를 스크롤링한다.

c. 고객의 마우스 커서와 동일한 좌표로 고객의 마우스를 표현하기 위한 이미지를 디스플레이한다. 그리고

d. 입력 필드들의 값들을 규정된 값들로 설정한다.

e. 에이전트의 브라우저 윈도우가 데스크탑에서의 활성 윈도우인 경우, 방문자의 포커스된 엘리먼트로의 포커스를 설정한다.

f. 방문자가 선택 박스를 오픈한 경우, 에이전트의 뷰에서의 동일한 선택 박스를 오픈한다.

제스처링(Gesturing)

일 실시예에서, 에이전트에 의해 행해진 동작들은 cobrowseviewer.js에 의해 캡쳐되고 코-브라우즈 서비스로 전달된다. 코-브라우즈 서비스는, 웹사이트의 양상들을 하이라이트처리하기 위하여 그리고 방문자의 브라우저(10)에서 디스플레이되는 웹 사이트(14)와 관련된 다른 동작을 취하기 위하여, 방문자로 상기 캡쳐된 입력을 차례로 중계한다.

도 19-20은, 에이전트가 웹사이트의 에이전트의 뷰의 엘리먼트를 클릭할 때, 에이전트의 브라우저에서 그리고 방문자의 브라우저(10)에서 대응하는 엘리먼트 주위의 박스가 그려지는 예시적인 실시예를 도시한다.

도 19-20에서 도시되는 실시예에서, 도 19는 에이전트 뷰를 도시한다. 이러한 예시에서, 에이전트는 "First name" 하의 공란인 필드를 클릭하였고, 이는 상기 필드가 에이전트의 뷰에서 하이라이트처리되도록 야기하였다. 구체적으로, 이는 오렌지 색깔로 라운드처리된 직사각형(1900)이 에이전트의 뷰에서의 엘리먼트를 둘러싸는 것으로 보이도록 야기한다.

도 20은 에이전트가 "First name" 필드를 클릭한 경우의 웹사이트의 방문자의 뷰를 도시한다. 구체적으로, 도 20에서 도시되는 바와 같이, 에이전트가 이러한 오브젝트를 클릭한 경우, 서비스는 방문자의 뷰로 하여금 방문자의 브라우저에서의 대응하는 엘리먼트 주위의 직사각형(2000)을 그리도록 지시한다. 일 실시예에서, 방문자의 뷰에서 그려진 직사각형은 붉은색이다. 방문자 DOM에 대한 직사각형 변경은 증분 업데이트로 C서버로 전송되지 않는다.

이러한 예시에서는 에이전트가 엘리먼트를 클릭하는 경우 붉은색 박스가 그려졌지만, 엘리먼트들에 대한 시각적으로 관심을 끌기 위한 다른 방식들 또한 사용될 수도 있다. 예를 들어, 상이한 색깔들이 상기 박스들에 대해 사용될 수도 있거나, 또는 하나의 반투명(solid semitransparent) 색깔이 엘리먼트를 하이라이트처리하기 위하여 엘리먼트 상에 겹쳐질 수도 있다. 선택적으로, 에이전트가 그의 커서를 에이전트 뷰 상으로 이동할 때 에이전트의 뷰에서의 엘리먼트 주위에는 반투명 프레임이 그려질 수도 있어서, 에이전트는 하이라이트처리될 엘리먼트를 선택하기 전에 엘리먼트의 크기(dimension)들을 인지할 수 있다.

에이전트가 뷰어(viewer)의 브라우저 상의 엘리먼트를 하이라이트하기 위하여 상기 엘리먼트를 선택하는 경우, 상기 엘리먼트는 방문자의 브라우저 상에서 무기한 동안 하이라이트처리된 채로 유지될 수도 있다. 이러한 실시예에서, 에이전트가 다른 엘리먼트를 클릭하는 경우, 하이라이트처리는 제 1 엘리먼트로부터 제거될 것이고 제 2 엘리먼트 주위에 그려질 것이다. 대안적으로, 상기 2개의 엘리먼트들모두가 하이라이트처리될 수도 있다. 유사하게, 상기 에이전트가 하이라이트처리된 엘리먼트를 2회 클릭하는 경우에 하이라이트처리가 엘리먼트로부터 제거될 수도 있다. 선택적으로, 무기한 동안에 하이라이트처리를 유지하는 것이 아니라, 하이라이트처리는 임의의 기간 이후에 사라지거나 점차적으로 사라질(fade out) 수도 있다. 예를 들어, 에이전트는 엘리먼트로 하여금 방문자에게 하이라이트처리되도록 하기 위하여 상기 엘리먼트를 클릭할 수 있으며, 그리고나서 하이라이트처리는 몇 초 이후에 사라질 수도 있다. 엘리먼트의 하이라이트처리 유지 기간은, 예를 들어, 1회의 클릭 = 3초, 2회의 클릭 = 10초, 3회의 클릭 = 무기한 인것과 같이, 에이전트가 상기 엘리먼트를 클릭한 횟수에 의존할 수도 있다. 다양한 변형례들이 특정 구현에 따라서 가능할 수 있다.

에이전트 제스쳐들은 웹 페이지 상의 엘리먼트를 분명하게 식별하고 액세스하기 위한 능력을 필요로 한다. 본 발명의 구현에서, 에이전트가 제스처하기 위한 엘리먼트를 클릭하는 경우, JavaScript는 상기 엘리먼트를 고유하게 식별하는 CSS 선택자(selector)를 생성한다. 방문자 측 JavaScript는 그리고나서, 표준 JavaScript 방법들을 사용하여 CSS 선택자에 의하여 엘리먼트에 액세스할 수 있다.

웹 페이지 상의 몇몇의 엘리먼트들은 고유의 id를 가지며 그리고 "#someid"와 같은 선택자에 의해 간단하게 식별될 수 있다. 그러나, 많은 엘리먼트들이 id를 가지지 않으며 DOM을 통한 경로에 의해 설명되어야 한다. 이하의 알고리즘은 고유의 선택자를 생성하기 위해 사용된다: 엘리먼트 계층에 대한 접근(walk up), 타겟 엘리먼트에 대한 시작, 각각의 계층 레벨에서 n번째 타입의 선택자로서 또는 id로서 CSS 선택자의 일부를 획득. 이러한 점이 수행되는 경우, 개별적인 CSS 선택자들은 CSS 자식(child) > 연산자(operator)와 결합된다.

각각의 레벨에서 css 선택자 부분을 생성하기 위한 알고리즘은 다음과 같다:

● 엘리먼트의 id(만약 엘리먼트가 하나의 id를 갖고 있는 경우)를 획득하고, 그리고 특정한 문자들을 확장(escaping)하거나 또는 유니코드 확장 시퀀스(unicode escape sequence)들로 이들을 변환함으로써, 유효한 CSS로 이를 변환한다.

● 상기 id가 자신의 직계 부모 내의 엘리먼트를 고유하게 식별하는 경우, 이러한 레벨에서의 CSS 선택자 부분은 #theid이다.

● id가 전체 문서 내의 엘리먼트를 고유하게 식별하는 경우, 종료한다. 엘리먼트들의 id는 경로에 대한 고유 시작 포인트로서 기능한다.

● 엘리먼트가 문서 바디인 경우, VSS 선택자 부분은 단순히 "body"이다. Quit; the body는 상기 경로에 대한 시작 포인트이다.

● 그렇지 않으면, 자신의 동일한 타입의 형제자매 엘리먼트들의 리스트 내의 이러한 엘리먼트의 인덱스 위치 n을 결정한다. 그리고나서, 이러한 레벨에서의 CSS 선택자 부분은 tag:nth-of-type(n)이다.

이하는 고유의 CSS 선택자들의 몇몇의 예시들을 제공한다.

● #auniqueid

●body>table:nth-of-type(1)>tbody:nth-of-type(1)>tr:nth-of-type(1)>td:nth-of-type(2)

●#content>div:nth-of-type(1)>form:nth-of-type(1)>table:nth-of-type(1)>tbody:nth-of-type(1)

에이전트는 또한 (방문자의 승인을 받고 또는 방문자의 승인 없이) 원격 제어를 수행할 수 있다. 이러한 모드에서, 에이전트의 포인터 위치(이는 방문자의 포인터와 구별됨)는 방문자에게 디스플레이될 수 있다. 에이전트는 또한 버튼들, 클릭 링크들 및 방문자의 브라우저의 필드들로 데이터를 입력하기 위하여 필드들에 값들을 타이핑할 수 있다. Cobrowseviewer.js는 키 스트로크들(key strokes)을 캡쳐하고 그리고 방문자의 브라우저로 입력을 전달한다. 방문자의 브라우저는, 에이전트로 하여금 웹 사이트의 필드들로 데이터를 입력하도록 하기 위하여 관련 필드들에서의 입력을 캡쳐한다. 이는, 코-브라우징 세션 동안에 에이전트로 하여금 방문자의 브라우저를 제어하게 함으로써, 상기 에이전트로 하여금 고객에게 웹 사이트를 돌아다는데 있어서 직접적인 보조를 제공하게끔 한다.

에이전트가 방문자의 브라우저에서 특정한 동작들을 취하는 것을 방지하기 위하여, 일 실시예에서 마스킹된 오브젝트들의 리스트가 웹 사이트에 대하여 정의되며, 이는 에이전트가 데이터를 규정된 폼(form)들, div들, 페이지들 등으로 입력하는 것을 방지한다. 유사하게, 마스킹된 오브젝트들의 리스트는 에이전트가 클릭을 통한 라이센스 동의에 대한 "동의" 버튼과 같은 특정한 버튼들 또는 링크들을 클릭하는 것을 방지할 것이다. 더불어, 에이전트는 특정한 페이지에 대하여 제한되며 그리고 상기 에이전트는 다른 웹사이트들로부터의 페이지들을 원격으로 제어하지 못할 수 있다.

리버스 코-브라우즈(Reverse Co-browse)

다른 시나리오에서, 에이전트는 방문자와의 코-브라우징 세션을 개시할 수 있다. 이러한 시나리오에서, 상기 에이전트는 브라우저를 오픈하고, 웹 페이지의 특정한 부분 상에서 돌아다니며, 그리고나서 방문자와 코-브라우즈 세션을 런칭할 수도 있다. 예를 들어, 방문자는 웹 페이지 상의 문제를 갖고 있다. 상기 방문자는 고객 지원부에 컨택한다. 방문자에게 어디로 갈지를 말해주는 것 대신에, 상기 에이전트는 정확한 사이트의 위치를 찾아내고(locate) 그리고 (cobrowse.js를 이용함) 코-브라우즈 세션을 런칭한다. 상기 코-브라우즈 뷰어 JavaScript(Cobrowseviewer.js)는, 탭 또는 새로운 브라우저가 상기 방문자에 대하여 오픈되는 것을 야기하기 위하여, 채팅을 통하여 방문자로 전달되며, 이는 방문자를 웹사이트에 접속시킨다. 상기 에이전트는 그리고나서 브라우저를 구동시킬 수 있거나 또는 방문자로 하여금 브라우저를 제어하도록 허용할 수 있다.

호버 상태(Hover State)

방문자가 자신의 마우스 포인터로 하여금 주어진 시간 기간 동안에 판매자 웹페이지에 대한 엘리먼트 상에 유지되도록 허용하는 경우, 브라우저는 이러한 동작을 "호버링(hovering)" 으로 해석한다. 웹 페이지는 자신이 "호버" 상태에 있는지 여부에 따라서 상이한 스타일 속성들이 엘리먼트로 적용되도록 설계될 수도 있다. 몇몇의 호버링 유형들은 DOM에 대한 변경들을 유발하며, 이는 에이전트로 반영될 것이다. 예를 들어, JavaScript "onmouseover"는 호버링의경우 달성되어야하는 효과의 타입을 규정하기 위하여 사용될 수 있다. "onmouseover" 이벤트가 발생되는 경우, 예를 들어, 서브메뉴를 디스플레이하기 위하여, 이는 DOM에 대한 변경을 야기하고 그리고 일반적인 코-브라우즈 DOM 업데이트는 에이전트로 상기 변경을 반영할 것이다. 그러나, 호버링의 다른 유형들은 DOM 변경을 야기시키지 않는다. 예를 들어, CSS 스타일들은 방문자의 포인터가 엘리먼트 상에서 호버링하는 경우, 상기 엘리먼트와 관련된 옵션들의 메뉴가 디스플레이되도록 정의될 수도 있다. 이는, 방문자가 페이지들 사이에서 이동하기 위하여 링크들을 클릭하는 것을 요구하지 않고서, 추가적인 정보가 페이지 내에서 동적으로 제공되도록 허용한다.

이와 관련된 문제점은 호버 상태가 DOM에 영향을 미치지 않을 것이라는 점이며, 이에 따라 시각적인 변경들은, 에이전트 DOM이 방문자와 동기화되도록 유지함으로써, 간단히 에이전트 측으로 반영되지는 않을 것이다. 에이전트의 실제 마우스 포인터가 방문자의 마우스 위치와 매칭하도록 위치될 수 없기 때문에, 동일한 호버 상태는 에이전트 측에서 발생되지않으며, 그리고 상기 에이전트는 방문자의 호버 상태에 기초하여 도시되는 웹 사이트의 양상들을 확인하지 않을 것이다. 방문자 측 스크립트가 방문자의 브라우저에서의 문서 엘리먼트 계층을 수정하는 경우, 상기 계층에 대한 변경들은 상기 설명되는 바와 같이 코-브라우즈 서비스를 통하여 에이전트로 반영될 것이다. 그러나, 호버 상태는 상기 계층을 변경시키지 않으며 이에 따라 상기 에이전트에게 가시적이지 않을 것이다.

따라서, 에이전트가 확인할 수 없을 것인 호버 상태 이벤트들을 통하여 웹 사이트의 특징들이 상기 방문자에게 제공될 것이다. 이렇게 방문자가 보고있는 것을 확인하지 못하는 것은, 에이전트가 웹 사이트를 통하여 상기 방문자를 보조하는 것을 시도할 때의 문제점을 야기할 수 있다.

일 실시예에 따라서, 판매자 웹 사이트에 대한 지원을 제공하는 에이전트에게는, 상기 웹 사이트에 대하여, CSS 선택자들의 유형들에서, 호버가능한(hoverable) 엘리먼트들의 리스트가 제공된다. 이러한 호버가능한 엘리먼트들의 리스트는 한번 정의될 수 있으며 그리고 판매자 웹사이트에 대한 지원을 제공하는 모든 에이전트들에 의하여 사용될 수 있다. 이러한 호버가능한 엘리먼트들의 리스트는 마스킹된 엘리먼트들의 리스트가 정의되는 방식과 유사하게, 많은 방식들로 생성될 수 있다. 호버가능한 엘리먼트들의 리스트는 마스킹된 필드 정의들과 함께 코-브라우즈 웹사이트로부터 리트리브된다. 호버 상태가 에이전트에서 복제되도록 하기 위하여, 방문자의 마우스 위치는 모니터링되고 그리고 상기 에이전트 측에서 상기 호버 상태를 선택적으로 재생성하기 위하여 사용된다. 이를 구현하기 위한 일 방식은 이하에서 보다 구체적으로 설명된다.

웹 사이트의 모습은 스타일 시트를 사용하여 정의된다. 스타일 시트는 엘리먼트들 및 엘리먼트들의 클래스들 모두에 적용되는 스타일들을 정의한다. 정의될 수 있는 양상들 중 하나의 양상은 엘리먼트/클래스에 대한 호버 상태를 ― 즉, 방문자가 자신의 커서를 엘리먼트 상에서 호버링하고 있는 경우에 무엇이 발생되는지를 ― 정의하기 위함이다. 예를 들어, 웹사이트는 사용자가 제 1 레벨 메뉴 탭을 호버링하는 경우 제 2 레벨 메뉴가 나타내는 것을, 예컨대 이하의 테이블 1에서 제시되는 이하의 코드를 사용하여, 규정할 수도 있다:

테이블 1

.navbar .level1item:hover .level2menu { display:block; }

에이전트의 호스트 머신 실제 마우스 위치는 방문자 마우스를 따라가지 않는다. 따라서, 에이전트 브라우저는 "호버" 상태를 검출하지 않아서, 제 2 레벨 메뉴들은 에이전트 측 상에서 디스플레이되지 않는다. 에이전트에 대한 이러한 문제점을 해결하기 위한 몇몇의 방법들이 존재한다. 예를 들어, 커서 바로 아래에 있는 엘리먼트에 대하여, 방문자 JavaScript는 getComputedStyle()를 호출하고 그리고 이를 에이전트의 브라우저로 전송하고, 그리고나서 계산된 스타일을 에이전트로 하여금 에이전트 측 상의 동일한 엘리먼트로 적용하도록 할 수 있다.하지만, getComputedStyle()이 커서 밑의 엘리먼트뿐만 아니라 자신이 보유하고 있는 모든 엘리먼트들에 대하여 호출되지 않았다면, 이는 네스티드 호버링된 엘리먼트(nested hovered element)들의 케이스의 경우 효과가 있지 않을 것이다.

웹사이트가 호버 스타일들에 의존하는 고객에 대하여 준비가 되어야할 필요가 있는 2개의 구성 피스(configuration piece)들이 존재한다: 1) "호버가능한" 엘리먼트들의 리스트, 및 2) 에이전트 뷰에만 적용될 에이전트 CSS 스타일들의 세트. 예를 들어, 웹 사이트 상에서 호버가능한 엘리먼트들의 리스트를 생성하고 그리고 웹 사이트 스타일 시트들을 스캐닝하기 위하여, 툴(tool)이 생성될 수도 있다.

호버가능한 엘리먼트는 마우스가 그위에서 호버될 때 상기 엘리먼트로(또는 자신의 형제자매 또는 자식 중 하나로) 적용되는 스타일을 갖는 엘리먼트이다. 호버가능한 엘리먼트들은 임의의 유효한 CSS 선택자, 보통 태그 네임 및 ID 또는 클래스에 의해 규정될 수도 있다. 호버가능한 엘리먼트들은 고객 단위로 정의될 수도 있다. 테이블 2는 호버가능한 엘리먼트들에 대한 웹사이트 스타일 정의들이 어떻게 규정될 수 있는지에 대한 일례를 도시한다:

테이블 2

예를 들어, 이하의 스타일 정의들은: #div1:hover { /* 이러한 스타일 정의는 마우스가 엘리먼트 div 1 상에서 호버할때 마다 id "div1"을 갖는 임의의 엘리먼트로 적용된다 */ } #div2: hover .c2 { /* 이러한 스타일 정의는 마우스가 div2 상에서 호버할 때마다, id div2를 갖는 엘리먼트의 자손인 CSS 클래스 c2를 갖는 엘리먼트로 적용된다 */ } .c1:hover { /* 이러한 스타일 정의는 엘리먼트 상에서 마우스가 호버할 대마다 CSS 클래스 c1을 갖는 임의의 엘리먼트로 적용된다*/ } h1.c3:hover p { /* 이러한 스타일 정의는 오직 마우스가 h1 엘리먼트 상에서 호버될 때만, CSS 스타일 c3을 갖는 <h1> 엘리먼트의 자손들인 임의의 <p> 엘리먼트들로 적용된다*/ }

이러한 예시에서의 "호버가능한(hoverables)"이란:● #div1

● #div2

*● .c1

● h1.c3

가될 것이다.

에이전트 스타일 시트에 포함되는 대응되는 에이전트 스타일들은 이하의 테이블 3에서 도시된다:

.div1_hover { /* 스타일 정의는 #div1:hover를 매칭한다 */ } .div2_hover .c2 { /* 스타일 정의는 #div2:hover .c2를 매칭한다 */ } .c1_hover { …/*스타일 정의는 .c1:hover를 매칭한다 */ } h1.c3_hover p { …/* 스타일 정의는 h1.c3:hover p를 매칭한다 */ }

호버 상태가 에이전트에서 복제되게 하기 위하여, 방문자 측에서의 JavaScript는 방문자 측 상의 마우스 위치를 보고 그리고 마우스 위치가 임의의 "호버가능한" 엘리먼트들 상에 위치되는지 여부를 확인하기 위하여 체크한다. 만약 그렇다면, 에이전트는 에이전트 뷰 상의 대응하는 엘리먼트로 호버 스타일들 중 하나(또는 그 이상)를 적용시킬 필요가 있다. 방문자 JavaScript는 에이전트가 적용할 스타일들의 리스트를 전송한다. 이러한 리스트에서의 각각의 엔트리는 이하의 것들로 구성된다:csspath: 호버되는 엘리먼트에 대한 CSS 경로. 상기 CSS 경로는 상기 기재된 알고리즘을 사용하여 규정된다.

classname: 호버되는 엘리먼트로 적용할 스타일의 네임. 상기 스타일 네임은 엘리먼트를 식별한 CSS 선택자에 기초하여 생성된다. 이러한 예시에서, 선택자 #div1와 매칭하는 엘리먼트가 호버되는 경우, 스타일 네임은 "div1_hover"가 될 것이다. 선택자 .c1와 매칭하는 엘리먼트가 호버되는 경우, 스타일 네임은 "c1_hover"가 될 것이다. 몇몇의 웹사이트들에 대하여, 이러한 기법이 불충분할 수도 있으며 그리고 우리는 이러한 네이밍 관습을 확대시킬 필요가 있거나 또는 관리자(admins)로 하여금 특정한 선택자와 연관되어야하는 스타일 네임을 규정하게끔 허용할 필요가 있을 수도 있다.

상기 에이전트는 상기 csspath에 의해 식별되는 각각의 엘리먼트를 찾아냄으로써 그리고 규정된 classname을 이에 적용시킴으로써, 이러한 리스트를 통하여 반복되어, 그 결과 방문자 측에 적용되었던 호버 상태 스타일과 동일한 시각적 효과를 야기할 수 있다.

방문자가 엘리먼트 주위에서 호버하는 경우, 상기 동작이 검출되고 그리고 명령이 에이전트로 포워딩되어 에이전트에게 호버 상태가 트리거링(triggering)되었다는 점을 알린다. 호버가능한 "CSS 선택자들"의 리스트를 방문자에게 전달함으로써 그리고 방문자 브라우저가 호버되는 임의의 것들이 선택자와 매칭되는지 여부를 결정하도록 함으로써, JavaScript가 명령들을 에이전트로 전달하여 에이전트가 에이전트 측에서의 호버 상태를 재생성하도록 하는 것이 가능해진다.

코-브라우즈 서비스(Co-browse Service)

코-브라우즈 서비스는 하나 이상의 고객 서비스 에이전트들이 실시간으로 웹사이트에 대한 방문자들의 웹 브라우징 활동을 관찰하게끔 허용한다. 코-브라우즈 서비스의 다른 사용들 또한 개발될 수 있으며, 그리고 사실상 코-브라우즈 서비스는 특정 사람이 실시간으로 특정 웹 사이트에 대한 방문자의 웹 브라우징 활동을 관찰하고자 하는 임의의 상황에서 사용될 수 있다. 따라서, 방문자가 보고 있는 것을 에이전트가 볼 수 있는 일례가 제공될 것이라 하여도, 본 발명은 이러한 특정한 사용으로 한정되지는 않는다.

여기에서 설명되는 실시예에서, 신용카드 번호 또는 비밀번호와 같은 지정된 마스킹된 필드들의 컨텐츠를 제외하고는, 에이전트들은 방문자들이 자신들의 브라우저들에서 보는 것을 정확하게 볼 수 있다. 유사하게, 다른 웹 사이트들로부터 서빙되는 광고와 같은 동적인 컨텐츠(판매자 웹사이트와는 다른 웹사이트들로부터의 컨텐츠)는 에이전트에게 가시적일 것이지만, 상기 에이전트는 상기 방문자와 동일한 광고(ad)를 획득하지 않을 수도 있다.

코-브라우즈 서비스는, 일 실시예에서, 코-브라우즈 세션들의 무결성을 강화하고 보안을 가능케하는 몇몇의 매커니즘들을 구현한다. 코-브라우즈 웹사이트는 예를 들어, 로그인 및 계좌 관리 시스템들과 같은 보안 측정들을 가동중이며, 이는 웹사이트가 스스로 공격으로부터 안전하게되도록 한다.

구조 개괄(Architectural Overview)

도 2는 예시적인 코-브라우즈 서비스의 예시적인 구조적 개괄을 도시한다. 상기 코-브라우즈 서비스는 방문자 웹사이트에 삽입된 <script> 태그를 필요로 하며, 이는 코-브라우즈 웹서버에 의해 호스팅되는 JavaScript 파일을 참조한다. 이러한 문서의 목적을 위하여, 이러한 방문자 측 JavaScript 파일은 Cobrowse.js로 참조될 것이다. JavaScript에 대한 다른 네임들 또한 사용될 수 있다.

코-브라우즈 세션이 시작될 때, Cobrowse.js는 StartCobrowse 요청을 코-브라우즈 웹 서버로 전송한다(도 2의 화살표 1). Cobrowse.js는 방문자(100)로부터의 고객 그룹 id를 코-브라우즈 웹서버(110)로 전달하고, 그리고 고유의 세션 id, C서버 할당, 및 호버가능한 선택자들 및 마스킹된 필드들의 리스트를 수신한다.

상기 세션 id는, 일 실시예에서, 3개의 컴포넌트들을 포함한다: 1) 고객 그룹 id, 2) 세션 키, 및 3) 고유성을 위한 랜덤 넘버. 다른 파라미터들 또한 상기 실시예에 따라서 전달될 수도 있다.

Cobrowse.js는 세션 id 및 마스킹된 필드들의 세트를 브라우저 세션 쿠키에 저장하고, 그리고 지정된 C서버(120)로 세션 데이터의 업로딩을 시작하는 것을 진행한다(도 2의 화살표 2). 상기 C서버는 결과적으로 데이터베이스에 세션이 시작되었다는 사실을 기록하기 위하여 코-브라우즈 웹서버로 메시지를 포스팅한다(도 2의 화살표 3).

그룹 id 및 세션 키 모두가 세션에 가입하기 위하여 필요하다. 일단 로그인되면, 그룹 id는 에이전트의 코-브라우즈 그룹 멤버쉽에 기초하여 결정될 수 있다. 예를 들어, 에이전트는 하나 이상의 고객 웹 사이트들에 대한 지원을 제공할 것이다. 방문자가 고객 웹사이트에 있을 때 방문자로 다운로드되는 JavaScript는 고객에 대한 그룹 id(세션이 시작될 때 고객이 코-브라우즈 웹서버로 업로드함(화살표 1))를 포함한다. 이는 코-브라우즈 웹서버로 하여금 어떠한 고객이 특정 코-브라우즈 세션과 연관되는지를 파악하도록 할 수 있다. 에이전트가 다수의 고객들을 지원하고 있는 경우, 에이전트는 고객에 대한 그룹 ID를 코-브라우즈 서버로 제공할 수 있어서, 지원되는 고객들 중 하나의 고객과 연관된 코-브라우즈 세션들을 선택할 수 있다(도 2의 화살표 4).

세션 키에 대하여, 에이전트 측에 대하여 규정될 수 있는 몇몇의 방식들이 존재한다. 세션 키는 랜덤하게 할당된 스트링일 수 있거나 또는 추적(tracking) 쿠키 id 또는 사용자 id와 같은, 방문자와 관련된 정보의 일부 피스일 수도 있다. 상기 에이전트는 세션 키를 수동적으로 입력할 수 있거나 또는 이는 CRM 레코드에서의 데이터로부터 에이전트에 대하여 자동적으로 추출될 수도 있다. 예시적인 접속 시나리오들에 대한 추가적인 세부사항들은 이하에서 제시된다.

어떠한 방식으로도, 결과는 코-브라우즈 세션과 연관된 URL에 대한 브라우저 윈도우를 에이전트가 오픈한다는 점이다. 상기 URL은 예를 들어:

https://www.cobrowse.net/cobrowse/AgentView.aspx?SessionKey=ssnkey

이다.

로그인되지 않는 경우, 상기 에이전트는 로그인하도록 촉구되며 그리고나서 에이전트 뷰로 다시 리다이렉트(redirect)된다.

AgentView.aspx는 에이전트 그룹 id 및 세션 키에 의해 데이터베이스에서의 세션을 검색하고 그리고 적절한 C서버로 상기 에이전트를 리다이렉트하며, 이는 세션의 에이전트 뷰를 생성한다. 에이전트 뷰는 삽입된 JavaScript 파일, CobrowseViewer.js를 포함하며, 이는 HTTP 및 웹소켓들 모두를 통하여 C서버와 통신한다(도 2의 화살표 5).

C서버는 에이전트 브라우저로 브라우징 세션에 대한 HTML 마크업(markup)만을 전송한다. 이미지들 또는 스타일 시트들과 같은, 세션 HTML에 의해 참조되는 리소스들은, 고객(또는 제 3 자) 웹사이트로부터 직접적으로 에이전트에 의해 다운로드된다.

보안 고려사항(Security Considerations)

코-브라우즈 서비스는 잠재적 민감한 방문자 브라우징 정보를 수집하고 전송하며, 그리고 이에 따라 높은 우선순위로서의 보안을 갖도록 설계된다. 이하의 보안 고려사항들은 코-브라우즈 구조에 의해 해결된다:

에이전트 뷰의 보안(Secure Agent View)

에이전트가 세션에 참여하고자 하는 경우, 웹서버는 에이전트의 코-브라우즈 그룹 및 공급되는 세션 키에 기초하여 상기 세션을 검색한다. 매칭 세션이 발견되는 경우, 웹서버는 비밀 "서버 키"를 사용하여 서명된 세션 id를 반환한다. 상기 서버 키는 256 비트수를 가지며, 이는 오직 C서버와 웹서버에게만 알려지며; 새로운 서버 키는 C서버에 의해 매 60초마다 생성되고 상기 웹서버와 보안화되어 공유된다. 에이전트가 세션을 보기위하여 C서버로 리다이렉트되는 경우, 상기 C서버는 세션 id에 대한 서명을 검증하고 상기 서명이 유효한 경우에만 에이전트가 참여하게끔 허용한다. 이러한 접근은 세션을 보기위한 요청이 오직 a) 웹서버에서 인증된 에이전트인 경우 그리고 b) 에이전트가 세션과 관련된 그룹의 멤버인 경우에만 승인된다.

일단 에이전트가 세션에 참여하게 되면, 보안(오직 HTTP들에 대하여 플래그된) 세션 쿠키가 에이전트의 세션을 유지하기 위하여 사용된다. 에이전트 세션 쿠키는 오직 C서버에게만 알려져 있는 비밀 키를 사용하여 서명된 세션 id를 포함한다. C서버 비밀 키는 런타임에서 생성되며 그리고 어디에서도 지속되지 않는다.

에이전트로부터의 웹소켓 접속들은 또한, 상기 접속이 먼저 수립된 경우에, 에이전트 세션 쿠키 값을 전달한다. C서버는, 요청이 유효한 에이전트 세션 쿠키 값을 포함하는 경우에만, 주어진 세션에 대한 웹소켓 접속들을 승인한다.

요청에 첨부된 유효한 에이전트 세션 쿠키 없이 C서버에 의해 서빙되는 브라우징 세션 데이터는 존재하지 않는다. 이는 오직 특정한 회사를 통하여 등록된 코브라우즈 제공자 계좌를 갖는 에이전트들만이 상기 회사의 웹사이트에 대하여 방문자들에 의해 시작되는 세션들을 볼 수 있다는 점을 보장한다.

데이터 전송의 보안(Secure Data Transmission)

모든 통신에 대하여 HTTPS 또는 보안 웹소켓들을 사용하는 것은, 신원이 검증된 서버들로 모든 데이터가 보안화되어 전송된다는 점을 보장한다. 이는 이하를 포함한다:

● 코-브라우즈 웹서버로부터의 코-브라우즈 JavaScript를 방문자 브라우저로 다운로드

● cobrowse.js와 코-브라우즈 웹서버 간의 통신

● cobrowse.js와 C서버와의 통신

● C서버와 코브라우즈 웹서버 간의 통신

● 에이전트의 브라우저로 세션 데이터 및 에이전트 JavaScript를 다운로드

● (방문자 페이지가 보안화된 경우) AgentView.js와 C서버 간의 통신

● (방문자 페이지가 보안화된 경우) 고객 웹사이트로부터의 방문자 세션 리소스들을 에이전트 브라우저로 다운로드

JavaScript 무결성 (JavaScript Integrity)

*방문자 JavaScript는 코-브라우즈 웹서버로부터의 HTTPS를 사용하여 코-브라우즈 웹서버로부터 고객 사이트(여기서 고객이 JavaScript를 방문자들에게 제공하고 있음)로 다운로드된다. HTTPS는 스크립트 자체가 적법한 소스로부터 왔다는 점을 보장한다. 비-보안화된 페이지들에 대해서도, 코-브라우즈 JavaScript가 HTTPS와 함께 이들의 웹사이트로 삽입된다는 것을 보장하는 것은 고객의 책임이다. 이를 권장하기 위하여, 코-브라우즈 웹서버는 HTTP를 통하여 방문자 측 JavaScript를 서빙하지않을 것이기 때문에, HTTP를 통하여 JavaScript를 액세스하기 위한 임의의 시도는 테스트 과정에서 검출되어야만 한다.

마스킹된 필드들(Masked Fields)

마스킹된 필드 정의들은, 이들이 코-브라우즈 웹서버의 보안 데이터베이스에 저장되고 그리고 상기 코-브라우즈 웹서버로 보안 접속을 통하여 리트리브되기 때문에, 부정하게 조작될 수 없다. 대안적으로, 마스킹된 필드 정의들은 고객들에 의해 저장되고 그리고 상기 언급된 바와 같이 고객들에 의하여 방문자들로 제공될 수도 있다. 마스킹된 필드들의 컨텐츠는 방문자의 브라우저를 떠나지 않기 때문에, 이러한 데이터가 전송과정에서 인터셉트될 가능성 또는 심지어 적법한 세션 쿠키를 갖는 에이전트에 의하여 C서버로부터 액세스될 가능성은 존재하지 않는다.

마스킹된 오브젝트들(Masked Objects)

마스킹된 오브젝트 정의들은, 이들이 코-브라우즈 웹서버의 보안 데이터베이스에 저장되고 그리고 코-브라우즈 웹서버로 보안 접속을 통하여 리트리브되기 때문에, 부정하게 조작될 수 없다. 대안적으로, 마스킹된 오브젝트 정의들은 고객들에 의하여 저장되고 그리고 상기 언급된 바와 같이 고객들에 의하여 방문자들로 제공될 수도 있다. 에이전트들이 입력을 마스킹된 오브젝트들로 제공하는 것은 금지되기 때문에, 에이전트들이 마스킹된 오브젝트들의 리스트에 포함된 방문자의 브라우저의 양상들을 제어하는 것을 방지할 수 있다. 대안적으로, 제어가능한 오브젝트들의 리스트는, 상기 에이전트가 제어할 수 있는 방문자 브라우저 내의 이러한 오브젝트들을 규정하도록 사용될 수 있어서, 디폴트로, 제어가능한 오브젝트들의 리스트에 포함되지 않은 오브젝트는 자동적으로 마스킹된 오브젝트로 취급되고 그리고 상기 에이전트로부터의 입력을 수신할 수 없다.

보안화된 C서버(Secured CServer)

각각의 코-브라우즈 서버(120)는 자신의 로컬 방화벽을 실행하는 독립형 유닉스 서버이다. 상기 방화벽은 보안 포트(443) 상에서만 트래픽이 인입되게끔 허용하도록 구성된다. C서버 상의 어떠한 데이터 또는 어떠한 데이터 베이스에서도 세션 데이터가 지속되지는 않는다. 비록 도 2가 코-브라우즈 서버(120)와 개별적으로 구현되는 코-브라우즈 웹서버를 도시한다고 하여도, 다른 구현들은 코-브라우즈 웹서버(110)의 기능성에 대한 양상들을 코-브라우즈 서버(120)와 통합시킬수도 있다.

에이전트별 제한사항의 부존재 (No Per-agent Restrictions)

에이전트들이 동일한 그룹에서의 계좌들을 갖는 한, 다른 에이전트로 의도될 수 있는 세션을 보고있는 하나의 에이전트에 대한 구체적인 보호는 존재하지 않는다는 점에 주목한다. 심지어 랜덤 세션 키가 방문자와 에이전트 사이에서 폰(phone)을 통하여 사적으로 교환된다고 하더라도, 상기 키는 스누핑(snooping)으로부터 보호되지 않는데, 이는 방문자가 고객 웹사이트 상의 보안화되지 않은 페이지를 돌아다니고 있는 경우 암호화되지않게 업로드될 보안화되지 않은 쿠키에 상기 키가 저장되기 때문이다. 다른 실시예에서, 에이전트가 코-브라우징 세션을 볼 수 있는 추가적인 제한사항들이 구현될수도 있다.

컨테츠 전달 네트워크를 사용하는 웹사이트들에 대한 에이전트 Http(Agent Http for Websites using a Content Delivery Network)

에이전트 세션이 방문자 세션 데이터를 액세스하기 위하여 엄격하게 HTTPS를 사용하는 경우, 상기 에이전트 브라우저는 HTTPS를 사용하여 스타일 시트들 및 이미지들과 같은 모든 리소스들을 요청할 것이다. 특히 컨텐츠 전달 네트워크를 사용하는 경우의 몇몇 웹사이트 구현들은 모든 리소스들을 HTTPS를 통하여 전달할 수 없다.

이에 대한 예비수단으로, 코-브라우즈 서비스는 에이전트로 하여금 방문자 프로토콜을 따르게끔 허용하도록 선택적으로 구성될 수 있어서, 방문자가 HTTP 페이지를 돌아다니는 경우, 에이전트도 그러하도록 할 수 있으며 그 반대도 가능하다. 2개의 개별적인 세션 쿠키들(HTTPS 페이지들을 보기 위한 보안 쿠키 및 HTTP 페이지들을 보기위한 비-보안 쿠키)이 에이전트 측에서 유지된다. 비-보안 쿠키는 보안에 대한 최소의 레벨을 제공하는 반면에, 에이전트 세션이 트래픽 스니핑(sniffing)으로부터 보호되지 않는다. 대안적으로, 프록시 서비스가 에이전트로 하여금 방문자가 이러한 상황에서 보고있는 것을 보는 것을 가능케하기 위하여 사용될 수도 있다.

코-브라우즈 접속 시나리오들(Co-Browse Connection Scenarios)

에이전트가 정확한 코-브라우즈 세션에 접속하는 다양한 방식들이 존재한다. 특정한 웹 사이트는 임의의 시점에서 수백명 또는 수천명의 방문자들을 가질 수 있다. 코-브라우즈 JavaScript가 웹페이지를 로딩하는 것과 관련하여 다운로드되는 경우, 코-브라우즈 세션은 이러한 방문자들 각각에 대하여 존재할 것이다. 특정한 방문자와 함께 일하는 특정한 에이전트는, 에이전트가 이들의 특정한 고객에 의해 경험되는 웹 사이트의 상태를 확인하도록 하기 위하여, 정확한 코-브라우즈 세션을 선택할 필요가 있을 것이다.

따라서, 에이전트가 방문자를 식별하고 그리고 어떠한 코-브라우즈 세션이 식별된 방문자와 연관되는지를 정확하게 식별할 필요가 있다. 에이전트가 이를 수행하기 위하여 사용할 특정한 메커니즘은 웹사이트의 특정한 구현뿐만 아니라 에이전트에 의해 사용되는 소프트웨어의 다른 타입들(예컨대, CRM 소프트웨어)이 무엇인지에 의존할 것이다.

에이전트는 제 3 자에 의해 제공되거나 또는 코-브라우즈 서비스에 의해서도 제공되는 채팅 서비스를 사용하여 고객과 상호작용할 수도 있다. 유사하게, 상기 에이전트는 상기 에이전트가 클라이언트들 및 다른 컨택(contact)들을 추적하기 위하여 사용할 수 있는 이들의 워크스테이션 상에서 실행되는 고객 관계 관리 소프트웨어를 가질 수도 있다. 에이전트와 방문자 간의 상호작용을 용이하게 하기 위하여, 에이전트와 연관된 고객과 관련된 코-브라우즈 서비스 상에서의 코-브라우즈 세션을 식별하는 것을 도와주도록 방문자와의 이러한 다른 컨택들을 레버리지하는 것은 종종 장점이 될 수도 있다.

도 3은 방문자가 도움을 필요로하는 경우(또는 에이전트 또는 자동화 규칙이 방문자가 도움이 필요할 수 있다는 것을 인지하는 경우) 어떻게 코-브라우즈 세션이 개시될 수 있는지에 대한 일례를 도시한다. 도 3에서 도시되는 예시에서, 에이전트 및 방문자는 음성통화를 통해 함께 대화하고 있거나 또는 채팅으로 관계를 맺으며, 상기 웹사이트는 방문자로 하여금 코-브라우즈 세션을 개시시키는 것을 가능케할 버튼(300)을 가진다. 구체적으로, 방문자가 세션을 개시하기 위하여 버튼(300)을 클릭하는 경우(도 3a), 팝업(310)이 랜덤 세션 ID(315)(숫자 또는 알파벳)를 방문자로 공급할 것이다. 방문자는 통화 상에서 구두로 숫자를 에이전트에게 전하거나 채팅으로 상기 숫자들을 타이핑한다. 그리고나서 에이전트는 코-브라우즈 웹서버로 상기 번호를 제공하며, 이는 코-브라우즈 웹서버로 하여금 정확한 코-브라우즈 세션으로 에이전트를 접속시키도록 할 수 있다.

도 4는 개별 버튼(400)이 웹사이트 상에서 위치되고 방문자에 의하여 코-브라우즈 세션을 런칭시키기 위하여 사용되는 슬라이더(slider) 또는 탭(tab)에 대한 대안을 도시한다. 방문자는 도움을 구하기 위하여 버튼(400)을 클릭할 수 있거나 또는 에이전트는 방문자가 상기 버튼을 찾고 이를 클릭하도록 지시할 수 있다. 상기 버튼에 대한 클릭은 코-브라우즈 세션을 시작시키고 도 5에서 도시되는 팝업(500)을 도시할 것이다. 팝업(500)은 도 3에서 도시되는 팝업(310)과 동일하거나 유사한다. 방문자는 그리고나서 에이전트로 상기 코드를 기입하거나 에이전트에게 상기 코드를 말할 수 있다. 상기 코드는 코-브라우즈 서비스에 의해 생성될 수 있거나 또는 방문자의 브라우저에서 생성될 수 있다. 어떠한 케이스에서도, 방문자와 에이전트 측 모두에 대하여 가용한 다른 식별자가 존재하는 경우가 아닌한, 상기 코드는 세션과 관련되며 그리고 방문자로부터 에이전트로 통신될 필요가 있다.

도 6은 에이전트가 코-브라우징 서비스에 의하여 제공되는 인터페이스를 통하여 코-브라우징 세션에 참여(join)할 때의 에이전트 스크린을 도시한다. 도 6에서 도시되는 바와 같이, 에이전트가 코-브라우징 세션에 참여하고자하는 경우, 상기 에이전트는 도 6에서 도시되는 팝업을 도시할 그들의 컴퓨터 상의 아이콘을 클릭할 것이다. 상기 에이전트는 그리고나서 방문자에 의해 제공되는 넘버(도 3b 및 도 5)를 타이핑하여 상기 세션에 참여한다. 도 6에서 도시되는 바와 같이, 상기 팝업은 필드(600)를 포함하며, 상기 필드(600)에서 상기 에이전트는 세션 키를 타이핑할 수 있어서 상기 방문자와의 코-브라우즈 세션에 에이전트가 참여하도록 할 수 있다.

도 7은 팝업으로 상기 넘버를 타이핑하기 위한 대안을 도시한다. 구체적으로, 도 7에서 코-브라우즈 서비스 인터페이스는 에이전트로 상기 에이전트가 참여할 수 있는 코-브라우즈 세션들의 리스트를 제공한다 (이러한 에이전트는 승인들, 스킬-세트(skill-set) 또는 몇몇의 다른 기준에 의하여 상기 코-브라우즈 세션들로의 액세스를 갖는다). 상기 에이전트는 상기 리스트 중에서 코-브라우즈 세션을 선택하거나 또는 세션 키 또는 다른 정보를 검색 필드(search field)(700)로 타이핑하여 가용 코-브라우즈 세션들의 세트 중에서 정확한 코-브라우즈 세션의 위치를 보다 빠르게 찾아낼 수 있다.

식별자를 방문자에게 제공하고 그리고나서 상기 방문자가 상기 식별자를 에이전트로 제공하도록 요구하는 것 대신에, 다른 실시예에서, 상기 방문자는, 상기 방문자의 코-브라우즈 세션을 발견하기 위하여 상기 에이전트에 의해 사용될 수 있는 식별 정보를 입력하도록 촉구된다. 예를 들어, 도 8에서 도시되는 바와 같이, 상기 방문자가 코-브라우즈 세션을 개시하기 위하여 탭을 클릭하는 경우, 상기 탭은 프롬프트(prompt)(800)를 제공할 수 있으며, 상기 프롬프트(800)는 식별 정보 및 필드(810)를 방문자가 입력하게끔 지시하며, 상기 필드(810)에서 상기 방문자는 상기 식별 정보를 입력할 수 있다. 상기 에이전트는, 방문자에게 그들의 이름을 요청하고, 그리고 상기 방문자의 이름을 박스(600)(도 6)과 유사한 박스에 타이핑하여 세션을 선택하기 위하여 또는 현재 세션들의 리스트(도 7) 중에서 하나의 코-브라우즈 세션을 검색하기 위하여, 상기 이름을 사용한다. 비록 도 8에서 도시되는 예시는 사용자에게 자신의 이름을 입력하라고 요청하였지만, 고객의 위치, 계좌 ID, 이메일 주소, 또는 방문자 웹 세션의 맥락에서 이용가능한 다른 정보와 같은 다른 고객 정보가 대신 사용될 수도 있다.

에이전트는 SalesForce^TM으로부터 이용가능한 CRM 소프트웨어와 같은 고객 관계 관리(CRM:Customer Relationship Management) 소프트웨어를 실행시킬 수도 있다. 상기 에이전트는 또한 코-브라우즈 세션들의 위치를 찾아내기 위하여 상기 CRM 소프트웨어를 사용할 수도 있다. 도 9는 CRM 소프트웨어 인터페이스의 일부분에 대한 스크린샷을 도시한다. 도 9에서 도시되는 바와 같이, 상기 에이전트는, 방문자에 의해 제공되는 정보를 사용하여 CRM 시스템 내에서 수동적으로 컨택(contact) 또는 리드(lead)를 발견할 수 있다. 대안적으로, 방문자가 필드(810)로 정보를 입력할 때, CRM 시스템에 상기 방문자에 대한 레코드(record)가 존재하는 경우, 상기 리드/컨택(lead/contact) 스크린/페이지(screen/page)는 상기 리드/컨택이 사이트 내(in-site)에 있으며 그리고/또는 도움을 요청한다는 점을 알릴 수 있다.

도 9는 에이전트가 방문자 이름에 타이핑할 때의 예시적인 CRM 소프트웨어 인터페이스를 도시한다. 구체적으로, 본 도면에서, 상기 에이전트는 방문자의 이름을 요청할 것이며 그리고나서 방문자의 이름을 검색 필드(search field)(900)에 타이핑할 것이다. 도 10에서 도시되는 바와 같이, CRM 소프트웨어는 검색과 매칭되는 리드들 및/또는 컨택들의 리스트(1000)를 포퓰레이팅(populate)할 것이다. 상기 에이전트는 CRM 시스템 내에서 방문자에 대한 컨택 레코드를 가져오기 위하여 상기 리스트로부터의 엔트리들 중 하나(예컨대, Vera Visitor)를 선택할 수 있다.

도 11은 선택된 방문자에 대한 예시적인 컨택 레코드를 도시한다. 도 11에서 도시되는 바와 같이, 컨택 레코드는 버튼(1100)을 포함하며, 에이전트는 방문자와의 코-브라우즈 세션에 참여하기 위하여 상기 버튼(1100)을 클릭할 수 있다. 에이전트로 하여금 정보를 다시 방문자에게 보여주도록 하기 위하여, 상기 에이전트로 하여금 스크린 공유 세션을 사용하여 방문자와 관계를 맺도록 하기 위한 스크린 공유 버튼(1110) 또한 제공된다. CRM 레코드를 통한 코-브라우징 세션으로의 참여는, 분석학(analytics)이 코-브라우징 세션 정보로부터 개발되게 하기 위하여, CRM 시스템으로 하여금, 다른 컨택 데이터를 고려하여 코-브라우징 세션들을 기록하도록 한다.

선택적으로, CRM 시스템은 새로운 방문자들에 대한 새로운 컨택 레코드 또는 다른 CRM 레코드를 자동적으로 형성할 수 있다. CRM 시스템과 스크린 공유 시스템 간의 통합에 대한 구현은, "Integrating Screen Sharing Sessions with Customer Relationship Management"이라는 발명의 명칭으로 2012년 9월 23일 출원된 미국 특허 제13/624,951에 보다 구체적으로 기재되며, 상기 미국 특허의 컨텐츠는 여기에서 참조로써 통합된다. 이렇게 참조되는 특허에서, CRM 시스템으로 하여금 스크린 공유 세션들의 개시를 검출하도록 하고 그리고 스크린 공유 세션의 지속기간 및 스크린 공유 세션에 대한 참가자들에 관한 정보와 같은, 스크린 공유 세션에 관한 정로에 대하여 스크린 공유 서비스에 대한 폴링(poll)을 수행하도록 하기 위한 메커니즘이 사용된다. 유사한 메커니즘이 CRM 시스템이 코-브라우징 세션을 캡쳐하도록 하기 위하여 사용될 수도 있다. 구체적으로, 상기 CRM 시스템은 에이전트가 코-브라우징 세션에 참여하는 것을 선택하였음을 결정할 수 있다. 이후에 상기 CRM 시스템은, 코-브라우징 세션의 지속기간, 코-브라우징 세션의 참가자들, 코-브라우징 세션 동안에 방문된 페이지들, 및 코-브라우징 서비스에서 이용가능한 임의의 다른 서비스와 같은, 코-브라우징 세션에 관한 세부사항들을 획득하기 위하여 코-브라우징 서버를 폴링(poll)할 수도 있다. 유사하게, 코-브라우징 세션은 트레이닝 목적뿐만 아니라 감사(auditing)의 목적을 위하여 레코딩될 수도 있다.

도 12는 CRM 소프트웨어가 사이트 상의 방문자들의 리스트를 보여주는 개별적인 탭을 가지는 다른 예시를 도시한다. 이러한 예시에서, CRM 시스템은 CRM 레코드들로부터 정보들 및 추가적인 필드들을 가져오며 그리고 이용가능한 코-브라우즈 세션들을 리스트 형식으로 제시한다. 상기 리스트는, 예를 들어, 도움을 요청하는 방문자들을 하이라이트처리함으로써 그리고/또는 이러한 방문자들을 가장 윗부분으로 분류함으로써, 최적화될 수 있다. 예를 들어, 도 12에서 도시되는 바와 같이, 사이트 내에서의 방문자들의 리스트(1200)가 제공된다. 방문자들 중 하나(1202)는, CRM 시스템이 방문자에 관한 어떠한 정보도 가지고 있지 않으며 그리고/또는 상기 방문자가 상기 사이트에 식별 정보를 제공하지 않았기 때문에, 익명(Anonymous)으로 리스팅된다.

일부 웹사이트들은 채팅(텍스트 기반) 고객 지원을 제공한다. 방문자는 채팅 세션과 관련하여 식별 정보를 제공하라고 요청받는 것이 통상적이다. 채팅을 시작하는 것과 관련하여 발생되는 최초의 정보 수집은 여기에서 사전-채팅 조사(pre-chat survay)로 지칭될 것이다.

코-브라우즈 세션이 식별될 수 있고 채팅 세션으로 연결될 수 있는 특정한 방식은 코-브라우즈 서비스와 채팅 서비스 간의 통합(integration) 레벨에 의존한다.

채팅과 코-브라우즈 서비스들 간의 통합이 존재하는 경우, 사전-채팅 조사로부터의 정보는 매칭되는 코-브라우즈 세션에 대한 검색을 수행하는데 사용될 수 있다. 도 13a 및 13b는 방문자가 채팅 세션을 통하여 고객 서비스와 관계를 맺기로 선택할 때 방문자로부터의 정보를 수집하는데 사용될 수 있는 예시적인 사전-채팅 조사 윈도우들을 도시한다.

도 14a 및 14b에서 도시되는 바와 같이, 에이전트는 채팅 애플리케이션에서의 방문자 정보를 확인할 것이고 그리고 도 9 내지 12와 관련하여 상술된 메커니즘들을 사용하여 코-브라우즈 세션을 검색하기 위하여 상기 방문자 정보를 사용할 수 있다. 방문자 이름 또는 다른 식별 정보가 사전-채팅 조사를 사용하여 수집되지 않는 경우, 이러한 정보는 상기 채팅 세션 동안에 에이전트에 의해 수집될 수도 있으며 상기 방문자와 관련된 코-브라우즈 세션의 위치를 찾아내기 위하여 사용될 수도 있다.

도 15a 및 15b는 채팅 및 CRM 시스템들이 코-브라우즈 서비스와 통합되는 경우 사용될 수 있는 예시적인 CRM 인터페이스들을 도시한다. 도 15a에서 도시되는 바와 같이, 방문자에 대한 컨택 레코드는 에이전트가 상기 방문자와의 채팅 세션에 있는 경우 자동적으로 디스플레이될 수 있다. CRM 레코드는, 이러한 실시예에서, 에이전트가 방문자와 연관된 코-브라우즈 세션으로 접속하기 위하여 사용할 수 있는 코-브라우즈 버튼(1500)을 포함한다. 도 15는 또한 방문자가 사이트(1510)에 머무른 시간량 및 방문자가 사이트(1520)에서 위치되는 페이지와 같은, 방문자에 관한 에이전트 상태 정보를 도시한다. 이는 에이전트로 하여금 트랜잭션에서 방문자가 위치한 곳을 알게 할 수 있어서, 상기 에이전트는 방문자가 직면할 수 있는 이슈들이 무엇인지에 대하여 보다 잘 이해할 수 있다.

도 15b는 방문자가 CRM 시스템에 의하여 웹사이트에서 추적되지 않는 경우의 에이전트 스크린을 도시한다. 도 15b에서 도시되는 바와 같이, 상기 에이전트가 방문자와의 코-브라우징 세션에 참여하고자 하는 경우, 상기 에이전트는 코-브라우징 키(도 3b 참조), 방문자의 이름 등과 같은 식별 정보를 기입하라고 촉구될 수 있다.

도 16은 채팅 시스템과 CRM 시스템 간의 통합이 존재하지는 않지만 CRM 시스템이 가용 코-브라우즈 세션들에 대한 지식을 가지고 있는 시나리오를 도시한다. 도 16에서 도시되는 바와 같이, 에이전트는, CRM 시스템에서 방문자에 대한 컨택 레코드를 검색하기 위하여, 사전-채팅 조사에서 제공되는 정보 또는 채팅 세션 동안에 획득되는 다른 정보를 사용할 수 있다. 도 16에서 도시되는 예시에서, 방문자의 위치(Denver)는 기존의 코-브라우즈 세션들의 리스트를 검색하기 위하여 사용되었다. 에이전트는 대안적으로 방문자의 이름 또는 다른 식별 정보를 잠재적으로 매칭되는 코-브라우징 세션에 대한 검색을 위하여 사용하였다.

도 17은 채팅 서비스에 대한 예시적인 에이전트 스크린을 도시한다. 도 17에서 도시되는 바와 같이, 상기 에이전트에게는 채팅 에이전트 스크린에서의 버튼(1700)을 통하여 코-브라우즈 세션에 참여하기 위한 능력이 제공될 수도 있다. 채팅 서비스는 에이전트로 하여금 방문자에게 어떠한 행위도 요청하지 않고 채팅 세션 상에서 방문자와 상호작용하도록 하기 위하여 이러한 에이전트 뷰를 제공한다. 도 17에서 도시되는 실시예에서, 상기 에이전트는 채팅 세션에 참여하고 있는 방문자와 관련된 코-브라우즈 세션에 자동적으로 참여하기 위하여 버튼(1700)을 클릭할 수 있다. 상기 에이전트는 어떠한 방문자 동작 없이 코-브라우즈 세션을 개시할 수도 있다. 선택적으로, 상기 에이전트는 방문자에게 코-브라우즈 세션에 참여할 기회를 제공할 수도 있으며 그리고 상기 코-브라우즈 세션을 수락할 능력을 방문자에게 제공할 수도 있다.

일 실시예에서, 채팅 서비스로 하여금 웹 사이트에 대한 방문자들을 추적하도록 하기 위하여, 상기 채팅 서비스는 웹 사이트에 대한 스크립트를 포함할 것이다. 이러한 채팅 서비스 스크립트는 상태의 변경이 있었는지 여부를 결정하기 위하여 방문자의 브라우저로 하여금 채팅 서비스에 대한 주기적인 폴링을 수행하도록 야기할 수 있다. 예를 들어, 채팅 서비스에서의 규칙은, 채팅 서비스로 하여금 방문자가 채팅 세션을 개시하고자 하는지 여부를 방문자에게 질의하는 팝업 또는 오버레이(overlay)를 상기 웹사이트로 제공하도록 야기할 수 있다.

채팅 서비스는 추가적인 스크립트를 방문자의 브라우저로 삽입할 능력이 있다. 일 실시예에 따라서, 코-브라우즈 스크립트는 코-브라우징 세션이 개시되도록 하기 위하여 채팅 서비스에 의하여 방문자로 다운로드된다. 코-브라우즈 스크립트는, 사용자가 쇼핑 카트에 포함된 아이템을 선택할 때마다 또는 채팅 에이전트가 방문자와의 코-브라우즈 세션을 개시하기 위하여 코-브라우즈 버튼을 선택한 때와 같은, 채팅 서비스에서의 규칙에 기초하여 다운로드될 수 있다. 코-브라우즈 스크립트의 다운로드를 트리거링하기 위한 다양한 방식들은 코-브라우즈 스크립트가 방문자에게 제공되도록 하기 위하여 사용될 수 있다. 선택적으로, 코-브라우즈 세션을 식별하기 위하여 코-브라우즈 서버에 의해 사용될 정보(예컨대, 방문자 ID 또는 세션 ID)는 방문자로 다운로드되는 코-브라우즈 스크립트에 포함될 수도 있다. 따라서, 채팅 세션은 방문자로 코-브라우즈 스크립트를 다운로드하기 위하여 채팅 서비스를 시작하지 않아도 된다.

다른 실시예에서, 방문자가 채팅 세션을 시작할 때, JavaScript(예컨대, cobrowse.js)는 방문자 브라우저로 다운로드되고 인스톨된다. 이러한 실시예에서, JavaScript는 식별값을 사용하여 세션 상태 서버를 폴링하기 위하여 방문자의 브라우저에 대한 명령을 포함한다. 상기 세션 상태 서버는 채팅 서비스 서버, 코-브라우즈 서버 또는 네트워크 상의 다른 서버일 수도 있다. 일 실시예에서, 상기 식별값은 에이전트와 방문자 간의 채팅 세션과 고유하게 연관된다.

에이전트가 코-브라우즈 버튼(1700)을 클릭하는 경우, 에이전트 코-브라우즈는 식별 값과 연관된 상태를 생성하기 위하여 코-브라우징 세션을 개시할 것이다. 이는, 폴링 서버에서의 서버 세션 상태로 하여금 코-브라우징 세션이 시작되었음을 표시하도록 변경되도록 야기할 것이며 그리고 코-브라우징 세션을 호스팅할 정확한 C서버를 식별할 것이다. 방문자의 브라우저가 코-브라우징 세션이 시작되었음을 검출할 때, 이는 에이전트로 포워딩될 C서버로 브라우저 상태를 전송할 것이다. 이는 방문자의 브라우저의 뷰를 에이전트가 확인할 수 있도록 인에이블링(enable)할 것이다. 상기 에이전트는 방문자가 상기 세션에 접속할 때 까지 기다릴 것이며 그리고나서 상기 에이전트는 데이터의 수신을 시작하기 위하여 상기 세션에 접속할 것이다.

JavaScript가 채팅 서비스에 의해 제공되는 스크립트와 관련하여 방문자로 다운로드되기 때문에, 코-브라우즈 JavaScript는 임의의 추가적인 동작을 방문자가 수행하는 것을 요구하지 않으면서 방문자의 브라우저로 하여금 에이전트에게 가시적이되도록 야기할 것이다. ― 상기 방문자는 이들이 에이전트가 상기 브라우저를 확인할 수 있게 하도록 표시하기 위한 버튼을 클릭할 필요가 없다. 방문자의 정보의 보안성을 보호하기 위하여, 채팅 세션 상에서 다운로드되는 JavaScript는 또한 마스킹된 필드들과 연관된 민감한 정보가 상기 코-브라우징 세션을 통하여 에이전트로 포워딩되는 것을 방지하기 위하여 마스킹된 아이템들의 리스트를 포함한다.

비록 이전의 설명이 통신 세션에 기반한 채팅과 관련하여 제공되었다고 하더라도, 유사한 위치 및 코-브라우징 세션들에 대한 참여는 음성-기반 통신 세션들에 관하여 발생될 수도 있다. 구체적으로, 방문자가 전화 통화를 개시하기 위하여 버튼을 클릭하는 경우(예컨대, 클릭-투-콜 버튼) 그리고 전화 번호를 입력하는 경우, 방문자에 의하여 제공되는 식별 정보는, 상기 방문자와의 코-브라우징 세션의 위치를 찾아내고 상기 방문자와의 코-브라우징 세션을 선택적으로 개시하기 위하여 에이전트에 의하여 사용될 수도 있다.

폴링 최소화 (Polling Minimization)

참가자(party)들이 코-브라우즈 세션, 스크린 공유 세션, VOIP 세션 또는 웹 컨퍼런싱 세션과 같은 통신 세션을 통하여 통신하고자 할 수있는 인스턴스들이 존재한다. 한 참가자가 세션을 시작할 때 그리고 다른 참가자는 상기 세션에 대해서 인지하지 못할 때, 상기 다른 참가자가 상기 세션에 가입하도록 인에이블링하기 위한 정보가 상기 다른 참가자에게 제공될 필요가 있다. 상기 언급된 바와 같이, 다수의 타입들의 통신 세션들이 이러한 문제를 경험할 수도 있다. 예시적인 해결책이 코-브라우징과 관련하여 제공될 것이지만, 유사한 해결책들이 다른 형태들의 통신 세션들을 통하여 활용될 수도 있다.

예를 들어, 상기 언급된 바와 같이, 에이전트가, 방문자와의 코-브라우징 세션을 개시하고, 그리고나서 상기 에이전트로 하여금 방문자의 브라우저를 보도록 인에이블링하기 위하여 코-브라우징 세션에 방문자가 참여하도록 하는것이 가능하다. 이러한 상황에서, 상기 에이전트가 상기 방문자의 브라우저에서 보여지는 것을 보는 것을 인에이블링하기 위하여, 상기 에이전트는 코-브라우징 세션을 개시할 수 있다. 하지만, 방문자는 상기 에이전트가 코-브라우징 세션을 개시하였는지를 알지 못하며, 이에 따라 방문자에서의 JavaScript는 방문자 브라우저의 컨텐츠에 관한 정보의 포워딩을 시작하는 것을 알지 못한다.

이러한 상황에서, 방문자에서의 JavaScript가 코-브라우즈 세션이 에이전트에 의하여 개시되었는지 여부를 결정하기 위하여 접속 서버를 주기적으로 폴링하는 것이 가능할 수도 있다. 코-브라우즈 웹서버의 연속적인 폴링은, JavaScript가 상기 세션을 호스팅하는 서버의 신원(identity)을 알게 하기 위하여 그리고 방문자에서의 JavaScript가 상기 코-브라우즈 세션에 대한 업데이트들의 포워딩을 시작하게 하기 위하여, 코-브라우즈 웹서버로 하여금, 코-브라우징 세션이 에이전트에 의하여 개시되었는지 여부를 방문자에게 주기적으로 통지하도록 한다.

그러나, 코-브라우즈 웹서버에 대하여, 연속적인 폴링(또는 고속(rapid) 폴링)은 리소스-집중적이다. 예를 들어, 코-브라우즈 웹서버가 몇몇의 웹사이트들과 연계된 경우, 이들 각각은 수천명의 방문자들을 가지며, 각각의 방문자가 단지 1초의 한번 접속 웹서버를 폴링하는 경우라 하더라도, 코-브라우즈 웹서버는, 계류중인 코-브라우즈 세션을 가지지 않을 방문자들에 대한 상태 업데이트들을 처리하기 위하여, 계속해서 초당 수천회의 트랜잭션들을 처리할 필요가 있을 것이다.

웹사이트에 대한 식별가능한 방문자들의 수가 증가하여도, 방문자 JavaScript로 하여금 코-브라우즈 세션의 가용성에 대하여 연속적으로 폴링하게 하는 것은 스케일링되지는 않는다. 방문자가 코-브라우즈 웹서버를 폴링하는 속도(rapidity)가 줄어들 수는 있지만, 이는, 에이전트가 코-브라우즈 세션을 선택하는 시점과 에이전트가 방문자로부터의 데이터의 수신을 최초로 시작하는 시점 사이의 잠재적인 시간 지연(lag)을 도입한다.

이를 해결하기 위한 몇몇의 방식이 존재한다. 예를 들어, 상기 언급된 바와 같이, 코-브라우즈 서버와 연관된 웹 사이트의 다른 특징 또는 특정 버튼(예컨대, 웹 사이트 상에 포함된 버튼)을 방문자가 클릭하는 것이 가능할 수 있다. 이는 방문자로 하여금 코-브라우즈 웹서버를 폴링하도록 인에이블링하지만, 이는 웹 사이트가 코-브라우즈 서비스와 연관된 특징을 갖는 구현으로 제한된다.

일 실시예에 따라서, 코-브라우즈 JavaScript는, 사용자에 의하여 구체적인 동작들을 캡쳐하기 위해 그리고 이러한 동작들을 코-브라우즈 세션이 개시되었는지 여부를 결정하기 위하여 코-브라우즈 웹서버를 폴링하기 위한 트리거로 해석하기 위해 설계된 폴 모듈(poll module)을 포함한다. 사용자가 특정한 동작을 수행할 때 코-브라우즈 웹서버를 방문자로 하여금 폴링하도록 야기하는 것은, 코-브라우즈 웹서버를 방문자가 폴링할 빈도를 줄이며, 이는 코-브라우즈 웹서버가 처리해야하는 폴 트랜잭션(poll transaction)들의 수를 줄여준다.

예를 들어, 방문자가 웹 사이트에 있으며 에이전트에 의해 도움을 받는 것을 가정한다. 이러한 시나리오에서, 상기 에이전트는 코-브라우즈 세션을 개시하기 위하여 버튼 또는 다른 기능을 클릭한다. 방문자가 코-브라우즈 세션에 대하여 폴링하게 인에이블링하기 위하여, 그리고 이에 따라 코-브라우즈 세션을 방문자가 발견하게 인에이블링하기 위하여, 상기 에이전트는, 상기 방문자로 하여금, 웹 사이트의 빈(blank) 영역에 대한 좌 또는 우클릭과 같은 웹 사이트 상에서의 비정상(unusual) 동작을 취하거나, 이들의 모바일 디바이스를 흔들거나, 이들의 마우스로 하여금 3개의 원들을 그리게 하거나, 특정 글자 또는 다른 문자를 선택하거나 또는 임의의 다른 비정상 동작을 취하도록, 지시할 수 있다. 방문자에서의 JavaScript는 에이전트에 의하여 규정된 특정한 동작을 검색하도록 구성된다. JavaScript가 특정한 동작을 검출하는 경우, 상기 JavaScript는 폴 트리거 모듈(poll trigger module)로 하여금 폴을 코-브라우즈 웹서버로 전송하도록 야기한다. 코-브라우즈 웹서버는 방문자 토큰, 방문자 ID 또는 다른 값과 같은, 상기 폴로부터의 식별 정보의 일부분을 수신하고 그리고 상기 값과 연관된 코-브라우즈 세션에 대하여 검색한다. 상기 언급된 바와 같이, 이러한 시나리오에서 에이전트는, 방문자를 인지하며 그리고 이에 따라 상기 에이전트가 코-브라우즈 세션을 시작한 경우 방문자 토큰, 방문자 ID 또는 다른 값을 규정할 수 있다. 코-브라우즈 웹서버는, 에이전트에 의해 시작된 코-브라우즈 세션을 발견하기 위하여 방문자 토큰, 방문자 ID 또는 다른 값을 사용하며 그리고 상기 방문자로 (예컨대, 세션을 처리하는 C서버의 신원과 같은) 식별 정보를 제공한다. 그리고나서, 방문자는, 에이전트가 방문자의 브라우저에서 보여지는 웹 페이지를 볼 수 있도록, 코-브라우즈 세션 상에서의 데이터 전송을 시작한다.

예를 들어, 방문자가 소매업자의 쇼핑 카트, 은행 웹사이트, 서비스, 게이밍 또는 페이스북 또는 구글과 같은 공통 범용 로그인을 사용하는 소프트웨어와 같은 웹 사이트로 로그인된다고 가정한다. 방문자와 에이전트는 채팅 또는 폰을 통하여 통신하고 있으며 상기 에이전트는 이에 따라 방문자의 신원을 알고 있다. 상기 에이전트는 에이전트의 데이터베이스(예컨대, CRM 시스템)에서 방문자를 찾을 수 있으며 그리고 방문자의 고유의 토큰 데이터를 획득할 수 있다. 대안적으로 방문자가 세션을 통한 통신을 개시하기 위하여 에이전트와 접촉하는 경우 상기 토큰이 생성될 수도 있다. 임의의 이벤트에서 에이전트와 방문자는 모드 동일한 토큰을 가진다. 상기 에이전트는 코-브라우즈 서비스에 대한 토큰을 규정하여 코-브라우즈 세션을 개시한다. 상기 방문자는 JavaScript로 하여금 상기 토큰과 연관된 코-브라우즈 세션의 존재에 대하여 코-브라우즈 서비스를 폴링하도록 야기하기 위하여 "비정상(unusual)" 동작을 수행한다. 상기 코-브라우즈 서비스는 계류중인 세션과 폴(poll)을 매칭하고 그리고 에이전트와 방문자로 하여금 통신 세션(본 예시에서는 코-브라우즈 세션)으로 접속되도록 인에이블링한다.

검출될 수 있는 다양한 타입들의 비정상(unusual) 이벤트들이 존재한다. 예를 들어, 모바일 디바이스 또는 모션 센서를 갖는 다른 디바이스 상에서, 브라우저 내의 JavaScript는 HTML5 규격 초안(working draft)의 일부인 DeviceMotioinEvents를 사용하여 쉐이크(shake) 이벤트들을 검출할 수 있다. 구체적인 "쉐이크" 이벤트는 존재하지 않으며, 오히려 쉐이커는 상기 DeviceMotionEvents에 의해 보고되는 모션의 구체적인 패턴으로 정의될 것이다. 유사하게, 모든 브라우저들이 반드시 상기 이벤트들을 지원하는 것은 아니며 그리고 동일한 방식으로 좌표(coordinate)들을 모두 처리하는 것은 아니지만, 상기 구현에 따라서 쉐이크 이벤트는 JavaScript로 하여금 코-브라우즈 웹서버를 폴링하도록 야기할 수 있다. 이러한 구현에서, 방문자와 대화하거나 채팅하고 있는 에이전트는 상기 방문자에게 자신들의 폰/또는 다른 디바이스를 쉐이킹하도록 지시할 것이다. 상기 방문자가 자신들의 폰을 쉐이킹하는 경우, 방문자의 디바이스 상에서 실행되는 JavaScript는 방문자가 에이전트에게 가시적이되도록 인에이블링하기 위하여 코-브라우즈 웹서버를 폴링할 것이다.

다른 실시예에서, 방문자와 에이전트는 쉐이크 이벤트 이전에 서로 통신할 필요가 없다. 이러한 실시예에서, 코-브라우즈 JavaScript는 방문자의 브라우저에서 실행되지만 코-브라우즈 JavaScript는 코-브라우즈 웹서버에 대한 접속(폴링)을 개시하지 않았다. 코-브라우즈 세션은 각각의 식별가능한 방문자에 대하여 개시되지만, 에이전트는 코-브라우즈 세션과 연관되지 않는다. 하지만, 웹사이트에 대한 도움이 가능하며 그리고 방문자가 이러한 도움을 얻기 위하여 자신들의 폰을 쉐이킹할 수 있다는 점이 상기 방문자에게 전해진다. 상기 방문자가 자신들의 폰/디바이스를 쉐이킹하는 경우, 상기 JavaScript는 쉐이크 이벤트를 검출하며 그리고 코-브라우즈 웹서버와의 접속을 개시한다. 이는 방문자로 하여금 코-브라우즈 세션에 참여하도록 야기하며 그리고 웹사이트를 지원하는 에이전트는 방문자가 도움을 원한다는 통지를 수신한다. 상기 에이전트는 코-브라우즈 세션에 접속되며 그리고 상기 방문자가 보고있는 것을 확인할 수 있다. 상기 방문자는 웹 사이트에 대하여 식별되며, 그리고 이러한 식별은, 방문자와 에이전트로 하여금 또한 여기에서 설명되는 다른 방법들 중 하나를 사용하여 음성 또는 채팅을 통하여 상호작용하도록 인에이블링하기 위하여 사용된다.

쉐이크 이벤트들이 아닌, 다른 예상치 못한 이벤트들은 유사하게 캡쳐될 수 있다. 코-브라우즈 JavaScript에 의해 캡쳐되고 그리고 코-브라우즈 웹서버로 접속 요청을 전송하기 위한 트리거로서 사용될 수 있는 예시적인 예상치 못한 이벤트들은, 링크와 연계되지 않은 웹 페이지의 영역에 대한 싱글 클릭 또는 더블 클릭(또는 터치 감지 스크린 상의 싱글 탭핑(tapping) 또는 더블 탭핑)을 포함한다. 예를 들어, 상기 방문자는 웹 사이트의 빈 부분에 대한 클릭/더블클릭을 하도록 지시받을 수 있다. 이러한 경우, 브라우저에서 실행되는 JavaScript는 이벤트를 캡쳐하고 그리고 폴이 코-브라우즈 웹서버로 전송되도록 야기하기 위하여 상기 이벤트를 해석할 것이다.

다른 예상치 못한 이벤트는 터치 감지 스크린 상에서의 언피치(unpitch) 모션에 의해 후속되는 핀치(pinch) 동작일 수 있다. 사용자는 (웹 페이지가 줌-아웃되게 하기 위하여) 핀치 동작을 하도록 지시받을 수 있으며 그리고나서 웹 페이지가 줌-인되게 하기 위하여) 언피치 동작을 하도록 지시받을 수 있다. 1초 이내와 같은 특정 시간 기간 이내의 이러한 듀얼 동작은 트리거로서 사용될 수도 있다.

또다른 예상치 못한 이벤트는 마우스를 원형으로 회전시키는 것일 수 있다. 터치 감지 스크린 상에서, 사용자가 상기 스크린을 터치하고 상기 스크린 상에 일련의 원들을 그리거나, 상기 스크린 상의 특정한 글자를 쓰거나, 사선을 그리거나 그렇지 않으면 웹 사이트를 정상적으로 돌아다니는(navigation) 동안에 흔하지 않은(infrequent) 사용을 갖는 특정 제스쳐를 수행하는 경우, 상기 스크린 상의 유사한 제스쳐가 캡쳐될 수 있다.

방문자들이 코-브라우즈 세션을 개시하도록 의도하지 않는 경우 가끔씩 상기 비정상 동작을 수행하는 것이 일어날 수 있다는 점이 예상될 수도 있다. 하지만, 트리거로서 사용되는 동작이 충분히 비정상적인 경우, 코-브라우즈 웹서버로 포워딩되는 접속 요청들의 수는, 웹사이트에 대한 모든 방문자들로 하여금 코-브라우징 세션의 이용가능성에 대하여 주기적으로 폴링하도록 하는 것과 비교하였을 때, 상당히 줄어들 것이다.

소셜 미디어(Social Media)

페이스북과 같은 소셜 미디어 사이트들은 그림, 텍스트 및 관심있는 다른 업데이트들과 같은 컨텐츠를 사용자들이 공유하도록 한다. 한 사람은 자신들이 자신의 개인 페이지에 추가하는 아이템들의 계속되는 업데이트인 피드(feed)를 가진다. 일 실시예에 따라서, 코-브라우즈 세션 액세스 링크는 상기 한 사람의 피드 상에서 포스팅될 수 있으며, 이는 자신들의 피드에 대한 액세스를 갖는 다른 사람들로 하여금 방문자에 참여하도록 허용할 것이며 그리고 상기 방문자와의 코-브라우즈 세션에 참가하도록 허용할 것이다. 편리함을 위하여, 하나의 구현은 소셜 미디어 사이트가 페이스북인 경우로 설명될 것이지만, 여기에서 설명되는 컨셉들은 또한 다른 소셜 미디어 사이트들에서도 사용될 수 있다. 이는 사용자들이 네트워크 상에서 이용가능한 웹사이트들에서 쇼핑하는 동안에 서로에 대하여 코-브라우징하는 쇼셜 쇼핑과 같은 다수의 소셜 애플리케이션들을 인에이블링한다.

일 실시예에서, 사용자는 페이스북 애플리케이션이 자신의 페이스북 프로파일로 인스톨되도록 하며 이는 코-브라우즈 세션들이 그들의 페이스북 피드로 추가되도록 인에이블링할 것이다. 상기 사용자가 코-브라우즈 인에이블링된 웹사이트(코-브라우즈 JavaScript를 포함하는 웹 사이트)를 접할 때 또는 상기 사용자가 코-브라우즈 JavaScript를 포함하는 플러그인을 갖는 경우, 상기 사용자에게는 자신들의 페이스북 피드 상에서 코-브라우즈 링크를 포스팅하기 위한 옵션이 제공될 수도 있다. 상기 코-브라우즈 링크는 코-브라우즈 세션을 호스팅하는 코-브라우즈 서버로의 포인터뿐만 아니라 코-브라우즈 서버에서의 코-브라우즈 세션을 식별하기 위해 사용될 수 있는 세션 식별자를 포함한다. 한 친구가 코-브라우즈 링크를 클릭할 때, 페이스북 친구로 하여금 코-브라우즈 세션에 참여하도록 하기 위하여, 에이전트와 관련하여 상술된 방식으로 동작하는 브라우저 윈도우가 런칭된다. 추가적인 친구들(팔로어들:followers) 또한 참여하여 (리더:leader)를 볼 수 있다. 상기 리더가 원격 제어를 인에이블링하는 경우, 팔로어들은 상기 리더의 브라우저가 움직이는 부분을 제어하는 것을 교대로 할 수 있다.

도 18은 소셜 미디어 웹사이트에서의 피드에 대한 예시적인 포스트를 도시한다. 도 18에서 도시되는 바와 같이, 포스트(1800)는, 피드의 소유자와 연관된 코-브라우즈 세션에 참여하기 위하여 상기 포스트로의 액세스를 갖는 임의의 사람들에 의하여 사용될 수 있는 코-브라우즈 세션으로의 링크(1810)를 포함한다. 예를 들어, 한 사람이 쇼핑하면서 패션 조언을 원하는 경우, 상기 한 사람은 자신이 의류에 대한 쇼핑을 하면서 자신의 친구들에게 자신과 코-브라우즈하도록 초대하기 위하여 자신의 페이스북 피드로 코-브라우즈 초대를 포스팅할 수 있다. 비록 도 18에서의 코-브라우징 링크(1810)가 피드로 포스팅되는 것으로 도시된다고 하더라도, 대안적으로 상기 코-브라우징 링크(1810)는 텍스트 메시지 또는 이메일을 통하여 개개인 또는 타겟팅된 그룹으로 송신될 수 있어서, 상기 링크를 수신하는 개개인들로 하여금 미래의 어떠한 시점에서 스케줄링된 코-브라우징 세션에 참여하도록 또는 상기 코-브라우징 세션에 참여하도록 허용할 수 있다.

다른 실시예에서, 웹 사이트에 대한 방문자들은, 웹 사이트 상에서 식별되며 그리고 페이스북 친구들, 아웃룩 컨택들의 리스트 또는 알려진 지인들의 다른 리스트와 비교된다. 그리고나서 방문자는, 자신의 페이스북 친구들 또는 아웃룩 컨택들 중 하나가 웹 사이트에 공동으로 방문하고 있다는 표시를 제시받으며 그리고 지인들과의 코-브라우즈 세션을 런칭하기 위한 기회를 제공받는다.

다른 실시예에서, 사이트에 대한 방문자는, 공동 브라우징을 인에이블링하기 위하여 다른 사용자들과 코-브라우즈하기 위하여 상기 사이트 상의 상기 다른 사용자들과 함께하도록 초대될 수도 있다.

또다른 실시예에서, 코-브라우징 세션은 사용자가 자신의 쇼핑 카트로 아이템을 넣을때 마다 개시될 수도 있다. 상기 코-브라우징 세션은, 방문자가 상기 사이트를 떠난 뒤에도 지속될 수 있으며 그리고 사용자가 상기 사이트에 위치하였던 마지막 페이지로 또는 상기 사이트로 되돌아가기 위하여 사용할 수 있는 이메일 또는 텍스트 메시지가 코-브라우즈 초대를 받은 사용자로 송신될 수도 있다.

다른 실시예에서, 페이스북 통합을 갖는 사이트 상의 방문자에게는 상기 사이트에 있는 친구들(페이스북 친구들)의 사이드바(sidebar) 리스트가 제공될 수도 있다. 사용자가 자신의 친구들 중 하나에 대하여 클릭하는 경우(또는 상기 친구와의 코-브라우징 세션에 참여하기 위한 옵션을 클릭하는 경우), (예컨대, 자신의 브라우징 링크에 대한 클릭-투-뷰(click-to-view-my-browsing link)를 통한 페이스북 채팅을 개시함으로써) 상기 친구와의 코-브라우징 세션이 상기 방문자에게 제공될 수도 있다.

코-브라우즈 및 스크린 공유 통합

코-브라우징을 통한 스크린 공유로부터 이용가능한 이점들을 통합하는 것이 바람직한 인스턴스들이 존재한다. 예를 들어, 에이전트가 방문자와의 코-브라우징 세션을 보고 있는 경우, 에이전트의 라이브 비디오 피드를 방문자로 제공하는 것이 바람직할 수 있다. 유사하게, 에이전트는, 접속된 태블릿 컴퓨터, 스마트폰, 문서 카메라(document camera) 등의 스크린으로부터의 라이브 비디오와 같이, 에이전트의 컴퓨터로 접속된 다른 디바이스로부터 상기 에이전트에게 이용될 수 있는 비디오 피드를 방문자로 제공하기를 원할 수 있다. 일 실시예에 따라서, 코-브라우즈 세션을 개시하기 위하여 방문자와 에이전트 간에 이루어지는 접속은 에이전트로부터의 컨텐츠가 방문자로 제공되는 스크린 공유 세션으로 2명의 참가자들을 접속시키기 위하여 레버리지된다.

코-브라우징 세션으로 스크린 공유 세션들을 통합하기 위한 능력을 제공하는 것은, 방문자가 채팅 세션을 개시하거나 또는 웹 사이트와 연관된 에이전트로 전화 통화를 거는 경우 확대된 상호 경험이 발생되도록 인에이블링한다. 고객 지원으로의 채팅 세션/전화통화로서 시작하는 것은 에이전트가 웹 사이트의 방문자의 뷰를 볼 수 있는 코-브라우징 세션을 확대시킬 수 있다. 상기 에이전트는 그리고나서 웹사이트 상의 방문자의 위치에 기초하여 상기 방문자에 대하여 선택되는 라이브 컨텐츠를 상기 방문자로 제공하기 위하여 스크린 공유 기법을 사용할 수 있다. 예를 들어, 방문자가 에이전트와의 인간적 연결감을 갖도록 하기 위하여, 에이전트의 라이브 뷰는, 예를 들어, 웹사이트 내의 작은 삽입물(inset)에서 또는 도 3a 및 3b에서의 플로팅 탭(300)의 영역(310)에서, 상기 방문자에게 제공될 수도 있다. 에이전트의 라이브 피드는, 카메라에 의해 캡쳐될 수 있으며 그리고 방문자로 디스플레이되도록 상기 방문자에게 스크린 공유 소프트웨어를 통해 제공될 수 있다. 에이전트와 방문자 간의 상호작용이 지속됨에 따라서, 에이전트는 방문자로 제공될 다른 컨텐츠를 선택할 수도 있다. 이러한 추가적인 컨텐츠는, 스크린 공유 세션을 통하여 방문자와 공유되는 에이전트의 스크린 상에서 에이전트가 런칭하는 설명(demonstration)일 수도 있거나 또는 다른 라이브 비디오 피드에 대한 선택일 수도 있다.

상기 언급된 바와 같이, 에이전트는 코-브라우즈 세션 덕분에 방문자의 웹 브라우저를 볼 수 있는 능력을 가진다. 하지만, 상기 에이전트는, 방문자가 스크린 공유 소프트웨어를 구현하지 않고 있기 때문에 방문자의 스크린 상에 나타나는 다른 것들을 보기 위한 천부적인 능력을 가지고 있지는 않는다. 에이전트가 방문자로 제공되는 컨텐츠를 보는 것을 인에이블링하기 위하여, 일 실시예에서 에이전트는 하나 이상의 스크린 공유 세션들에 대한 참가자로서 자동적으로 참여된다. 이는 에이전트로 하여금, 스크린 공유 세션 상에서 보여지는 컨텐츠의 소비자뿐만 아니라 컨텐츠의 소스를 확인하도록 허용한다. 이는 예를 들어, 에이전트의 라이브 비디오가 스크린 공유 세션 상에서 방문자로 제공되는 경우에 유용할 수 있다. 에이전트로 하여금 스크린 공유 세션에서의 게스트로서 포함되도록 야기함으로써, 상기 에이전트는 방문자가 제공받는 비디오에 대한 표현(representation)을 제공받을 수 있어서 상기 에이전트는 방문자가 보고 있는 것을 정확하게 알 수 있다.

코-브라우징을 통한 스크린 공유의 통합은 세일즈, 고객 지원, 기술 지원 등을 포함하는 수많은 상황들에서 유용할 수 있다. 스크린 공유는, 발명의 명칭이 "Method and Apparatus for Facilitating Participation in a Remote Viewing Session"이고 2011년 9월 22일에 출원된 미국 특허 제13/239/757(이의 컨텐츠는 여기에서 참조로 통합됨)에서 설명되는 AJAX 뷰어를 사용하여 구현될 수도 있다.

이러한 조합을 사용하는 하나의 장점은, 방문자가 임의의 소프트웨어를 다운로드하고 인스톨하는 것을 요구하지 않고 양 방향 웹 컨퍼런스가 가능해진다는 점이다. 구체적으로, 코-브라우즈는 방문자 측 상에서의 임의의 다운로드 또는 Java/Flash/Silverlight 또는 플러그-인을 필요로 하지 않는다. 가치있는 것으로서의 AJAX 뷰어 스크린 공유 기술은, 방문자로의 임의의 다운로드를 요구하지 않으며, 에이전트가 상기 방문자로 어떠한 것들을 보여주게 한다. 따라서, 양 참가자들이 소프트웨어를 인스톨해야할 필요가 있는 기존의 양방향 웹 컨퍼런싱과는 다르게, 이러한 조합은 에이전트가 방문자로의 임의의 다운로드 없이 볼 수 있고 보여줄 수 있도록 한다. 나아가, 이는 특정한 브라우저들에서 지원되지 않을 수 있는 Java or Flash에 의존하지는 않기 때문에, 이는 모바일 디바이스들을 포함하는 임의의 현재의 브라우저에 대하여 동작된다.

코-브라우즈 세션이 스크린 공유 세션을 확장시킨 예시가 제공되었다고 하더라도, 그 반대의 순서 또한 가능할 수 있다. 이러한 예시에서, 에이전트는 방문자와의 스크린 공유 세션을 런칭한다. 예를 들어, 방문자와 에이전트는 채팅 세션을 통하여 또는 음성으로 통신하고 있을 수 있으며, 상기 에이전트는 상기 에이전트에 의해 제공되는 컨텐츠를 방문자가 획득하게 하기 위하여 스크린 공유 세션을 런칭할 수 있다. 스크린 공유 세션의 코스 동안에, 방문자는 에이전트가 방문자의 브라우저에서 나타나는 것을 보도록 하기 위한 질문을 받을 수도 있다. 방문자는 그리고나서 상술한 접속 방법들 중 임의의 방법을 사용하여 방문자의 브라우저에서 현재 디스플레이되고 있는 것을 에이전트로 다시 보여주기 위하여 코-브라우즈 세션을 개시할 수도 있다. 이는 방문자를 도와주고 있는 에이전트로 하여금, 스크린 공유 세션을 사용하여 방문자에게 정보를 제공하도록, 그리고 방문자가 소프트웨어 및 플러그인 등을 다운로드 및 설치하는 것을 요구하지 않으면서 코-브라우징 세션을 사용하여 방문자의 스크린을 보도록 허용한다.

상술된 바와 같이, 일 실시예에서 에이전트는, 방문자의 브라우저 페이지의 탑 상의 레이어된 div에서 스크린 공유 뷰어를 오픈함으로써 방문자에게 정보를 보여줄 수 있으며 그리고 웹사이트의 다른 부분 또는 에이전트 스크린 상의 임의의 다른 부분이 스크린 공유 뷰어 내에서 가시적이되도록 야기할 수 있다.

도 22는 일 실시예에 따라 코-브라우즈 에이전트 뷰(2200)의 예시적인 스크린 샷을 도시한다. 도 22에서 도시되는 바와 같이, 에이전트 뷰는 코-브라우즈 에이전트 뷰 헤더(2220)에서의 아이콘(2210)을 포함한다. 코-브라우즈 에이전트 뷰(2200)는 또한 방문자의 브라우저의 컨텐츠를 도시하는 필드(2230)를 포함한다.

도 23은 에이전트가 아이콘(2210)을 클릭할 때 생성되는 팝업(2310)을 도시한다. 도 23에서 도시되는 바와 같이, 상기 팝업(2310)은 에이전트가 에이전트의 스크린(2320)을 보여주도록 허용하는 옵션 및 에이전트가 방문자의 스크린(2330)을 보도록 허용하는 옵션을 포함하는 옵션들의 메뉴를 포함한다. 도 24는 에이전트의 스크린(2320)을 보여주는 옵션을 에이전트가 선택한 경우의 방문자의 뷰를 도시하며, 그리고 도 25-27은 에이전트가 방문자의 스크린(2330)을 보기위한 옵션을 선택한 경우의 뷰들의 시퀀스를 도시한다.

도 24는 에이전트가 에이전트의 스크린(2320)을 보여주기 위한 옵션을 선택한 경우의 방문자의 뷰를 도시한다. 도 24에서 도시되는 바와 같이, 상기 에이전트가 스크린 공유 세션을 개시하고 에이전트의 스크린의 컨텐츠를 보여는 것을 선택한 경우, 에이전트의 스크린(2400)의 뷰는 방문자의 브라우징 세션(2410)의 상부(top)에 오버레이(overlay)될 것이다. 에이전트의 스크린의 뷰는 에이전트에 의하여 요구되는 임의의 소스로부터의 정보를 포함할 수 있다. 따라서, 에이전트는 에이전트의 스크린의 뷰, 연결된 디바이스의 퀵 타임(quick time) 비디오 소스, 연결된 카메라로부터의 이미지들 또는 임의의 다른 가용 비디오 스트림과 같은 비이오 소스에 대한 뷰를 포함하는 것을 선택할 수 있다. 도 24에서는 도시되지 않았지만, 에이전트의 스크린을 보여주는 옵션을 선택한 경우, 상기 에이전트에게는 상기 에이전트가 스크린 공유 세션을 통하여 방문자로 제공될 비디오의 소스를 선택하도록 허용되는 다이얼로그가 제공될 수 있다. 에이전트의 스크린이 방문자의 페이지의 상부에 레이어된 div에서 렌더링된다고 하더라도, 스크린공유 뷰는, 에이전트가 에이전트 자신의 스크린의 이미지를 보고 있는 경우에 대한 혼동을 피하기 위하여, 에이전트의 코-브라우즈 뷰어에 포함되지 않는다.

도 25-27은 에이전트가 방문자의 스크린이 에이전트로 보여질 스크린 공유 세션을 개시할 것을 선택(도 23의 버튼(2330))한 경우의 방문자 측에서 발생되는 뷰들의 시퀀스를 도시한다. 일 실시예에서, 스크린 공유 세션을 시작하는 것은 방문자의 스크린이 스크린 공유 소프트웨어를 사용하여 캡쳐될 것을 필요로한다. 이러한 목적을 위하여 사용될 수 있는 예시적인 스크린 공유 소프트웨어는 Glance Networks로부터 상업적으로 입수가능하지만, 본 발명은 Glance Networks 스크린 공유 소프트웨어를 사용하는 구현으로 한정되지는 않는다.

스크린 공유 소프트웨어는 인스톨될 필요가 있을 수 있다. 따라서, 도 25에서 도시되는 바와 같이, 방문자가 스크긴 공유 소프트웨어가 인스톨되게 하지 않는 경우, 방문자에게는 스크린 공유 소프트웨어 클라이언트를 다운로드하라고 방문자를 촉구하는 다이얼로그(2500)가 제공될 것이다. 방문자가 링크(2510)를 클릭하는 경우, 스크린 공유 소프트웨어 클라이언트 다운로드가 개시될 것이다. 상기 방문자가 스크린 공유 소프트웨어 클라이언트를 다운로드한 경우, 도 25에서 도시되는 단계는 필요치 않으며 생략된다.

도 26은 스크린 공유 소프트웨어 클라이언트가 방문자로 다운로드된 경우 그리고 방문자의 스크린이 에이전트로 보여질 스크린 공유 세션이 시작될 때의 방문자의 스크린의 뷰를 도시한다. 도 26에서 도시되는 바와 같이, 방문자는, 스크린 공유 세션을 에이전트가 개시하였다는 것을 보여주고 그리고 방문자로 하여금 스크린 공유 세션(2610)을 허용하게 하거나 또는 스크린 공유 세션(2620)을 거절하게 하는 통지(2600)를 받는다. 상기 방문자가 "거절(decline)(2620)"을 클릭한 경우, 스크린 공유 세션이 종료된다. 상기 방문자가 "승낙(accept)(2610)"을 클릭한 경우, 스크린 공유 세션이 개시되고 상기 방문자의 스크린은 캡쳐되어 에이전트가 볼수 있도록 에이전트로 전송될 것이다.

도 27은 방문자가 "승낙(accept)(2610)"을 클릭한 경우 그리고 에이전트가 방문자의 스크린을 보는 스크린 공유 세션이 개시된 경우의 스크린에 대한 방문자의 뷰를 도시한다. 도 27에서 도시되는 바와 같이, 방문자가 에이전트와 함께 디스플레이에서 보여지는 컨텐츠를 공유하고 있다는 것을 방문자에게 표시하기 위하여 컬러화된 굵은표시(2700)가 방문자의 스크린 주위로 배치된다. 방문자가 스크린 공유 세션을 제어할 수 있는 다이얼로그(2710)가 또한 제공된다. 예를 들어, 다이얼로그(2710)의 박스(2720)에서는 에이전트로 하여금 방문자의 컴퓨터에 대한 원격 제어를 하도록, 에이전트에 의한 원격 제어를 중지하도록, 그리고 스크린 공유 세션을 종료하도록 허용하는 것과 같은 옵션들이 방문자에게 제공된다.

도 28은 방문자의 스크린을 보여주는 스크린 공유 세션이 개시되었을 때의 방문자의 스크린에 대한 에이전트의 뷰를 도시한다. 도 28에서 도시되는 바와 같이, 상기 에이전트는 방문자가 볼 수 있는 것과 동일한 방문자의 스크린의 컨텐츠를 볼 수 있다. 방문자의 브라우저의 컨텐츠를 단순히 보는 것만이 아니라, 코-브라우징 세션 동안에 이용가능했던것 처럼, 스크린 공유 세션의 사용은, 디스플레이의 양상들을 방문자의 브라우저에 추가하여 포함시킴으로써 방문자로 하여금 방문자의 컴퓨터 디스플레이의 보다 많은 것들을 보게끔 인에이블링한다. 더불어, 스크린 공유 소프트웨어가 스크린 공유 소프트웨어를 보고 있는 사람이 호스트의 컴퓨터의 직접적인 동작을 제어할 수 있는 원격 제어를 인에이블링하기 때문에, 상기 에이전트는 방문자의 스크린을 보는것 뿐만 아니라 방문자의 컴퓨터의 동작을 제어기 위하여 스크린 공유 세션을 사용할 수 있다. 상술된 바와 같이, 에이전트에 의한 원격 제어는 방문자에 의해 승인되는 특권이어서, 방문자는 스크린 공유 세션 동안의 임의의 시점에서 자신의 컴퓨터에 대한 제어를 재개하기 위한 옵션을 가질 수 있다.

비밀 코-브라우즈(secret co-browse)

JavaScript가 방문자에 대하나 지식 없이도 자동적으로 코-브라우즈 세션을 런칭하게 하는 것이 가능하다. 이는 사이트를 모니터링하는 사람들로 하여금, 발견하기 어려울 수 있는 링크가 무엇인지를 결정하기 위하여 그리고 사이트의 어떤 양상들이 혼동을 야기시킬 수 있는지를 결정하기 위하여, 방문자들이 사이트를 어떻게 사용하는지를 확인하게 할 수 있다. 유사하게, 웹사이트를 모니터링하는 에이전트들 또는 웹사이트 모니터들은, 웹 사이트에서 특정한 방문자가 보고 있는 것이 무엇인지를 결정하기 위하여 방문자들의 코-브라우징 세션들을 볼 수 있으며, 그리고 필요하다면 방문자와의 컨택을 주도적으로 개시하도록 선택할 수도 있다.

일 실시예에서, 채팅 서비스와 같은 서비스는 방문자가 웹 사이트를 방문할 때 방문자들을 추적한다. 이러한 실시예에서, 채팅 서비스(예컨대, Live Person)는 고유의 식별 번호(키:key)를 통하여 방문자를 태깅한다. 상기 에이전트에게는 이러한 방문자들을 태깅하는 키들뿐만 아니라 방문자들의 리스트가 제공된다. 웹 사이트로부터 다운로드되는 JavaScript(cobrowse.js)는 방문자의 브라우저로 하여금 상기 키와 연관된 시작된 임의의 세션에 대한 서버를 폴링하도록 야기한다.

에이전트가 방문자와의 코-브라우징 세션에 참가하기로 결정한 경우, 상기 에이전트는 리스트 중에서 방문자를 선택하거나 그렇지 않으면 에이전트 시스템 상의 소프트웨어에게 상기 키와 연관된 코-브라우징 세션을 개시하라고 지시한다. 상기 키는 그리고나서 코브라우즈 서버로 전달되며, 이는 상기 키와 연관된 코-브라우즈 세션이 개시되었음을 폴링 서버로 통지한다.

방문자가 폴링 서버를 폴링한 경우, 상기 폴링 서버는 방문자에게 긍정 값(positive value)을 반환할 것이며, 이는 cobrowse.js로 하여금 코-브라우즈 서버로 코-브라우징 세션에 대한 브라우저 상태를 제공하도록 야기할 것이다. 에이전트는 방문자가 코-브라우징 세션에 접속할때 까지 대기하고 그리고나서 에이전트가 접속한다.

이러한 실시예에서, 방문자는 에이전트로 정보를 전달하기 위하여 어떠한 동작도 취하지 않는다. 오히려, 이러한 인스턴스(LivePerson)에서, 추적 서버는 추적 값(키:key))을 방문자로 할당하고 그리고 에이전트에게 이러한 키를 제공한다. 웹 사이트에 의해 제공되는 JavaScript는 방문자 브라우저로 하여금 키와 연관된 세션들에 대하여 폴링하도록 야기하기 위해 사용되며, 유사하게 코-브라우즈 JavaScript는 코-브라우징 세션에 방문자의 웹 브라우저가 참가하도로 야기하기 위해 사용된다. 방문자는 코-브라우징 세션에 참가하는데 있어서 어떠한 것도 수행할 필요가 없으며 유사하게 방문자의 브라우징 세션 동안에 방문자의 브라우저에서 방문자가 보고 있는 것 또한 웹 사이트와 연관된 에이전트에 의해 보여진다는 점을 알지 못할 것이다. 이는 에이전트가 사용자가 임의의 동작을 하도록 요구하지 않고서도(즉, 사용자가 웹 사이트의 특정 탭 또는 다른 특징을 클릭하는 것을 요구하지 않고서도) 세션을 시작하는 것을 인에이블링한다는 추가적인 장점을 갖는다. 유사하게, 서비스는 또한 마케팅 지식, 훈련, 법 집행 및 다른 목적들을 위하여 세션들을 레코딩할 수 있다.

여기에서 설명되는 방법들은 컴퓨터와 같은 전자 디바이스의 CPU에 포함되는 것과 같이 제어 로직에 의하여 실행되도록 구성되는 소프트웨어로서 구현될 수 있다. 여기에서 설명되는 기능들은 비-일시적이고 유형인 컴퓨터 판독가능 매체에 저장되는 프로그램 명령들의 세트들로서 구현될 수도 있다. 이러한 방식으로 구현되는 경우, 컴퓨터 프로그램은, 컴퓨터에 의해 실행될 때, 컴퓨터로 하여금 상술된 기능들을 구현하기 위한 방법을 수행하도록 하는 명령들의 세트를 포함한다. 프로그래밍가능한 로직은, ROM 칩, 컴퓨터 메모리, 디스크 또는 다른 저장 매체와 같은 비-일시적이고 유형인 컴퓨터 판독가능 매체에 일시적으로 또는 영구적으로 고정될 수 있다. 소프트웨어로 구현되는 경우에 추가하여, 여기에서 설명되는 로직은, 필드 프로그래밍가능한 게이트 어레이(FPGA) 또는 마이크로프로세서와 같은 프로그래밍 로직 디바이스 또는 이들에 대한 임의의 조합을 포함하는 임의의 다른 디바이스와 함께 사용되는 프로그래밍가능한 로직, 이산 컴포넌트들, 또는 집적 회로를 사용하여 실시될 수 있다. 모든 이러한 실시예들은 본 발명의 범위 내에 포함되도록 의도된다.

명세서에서 설명되고 도면에서 도시되는 실시예들에 대한 다양한 변경 및 수정은 본 발명의 범위 및 사상 내에서 이루어질 수 있다. 따라서, 상기 설명에서 포함되고 첨부된 도면에 도시된 모든 내용은 예시적이고 본 발명의 범위를 한정하지 않는 것으로 해석된다는 점이 의도된다.

Claims (24)

1. 코-브라우징 세션들을 통하여(with) 스크린 공유 세션들을 통합하는 방법으로서,
   코-브라우즈 스크립트로 하여금 제 1 브라우저에서 로딩될 웹 페이지와 관련하여 실행되도록 제공되도록 야기하는 단계 ― 상기 코-브라우즈 스크립트는, 상기 제 1 브라우저에서 HTML로 렌더링(render)되도록 그리고 제 2 위치에서 재생성되도록 상기 제 1 브라우저의 컨텐츠를 인에이블링(enable)하기 위해 코-브라우즈 서비스로 포워딩되도록, 제 1 브라우저의 컨텐츠에 대한 업데이트들을 인에이블링하도록 구성됨―;
   상기 웹 페이지의 뷰(view)를 기술하는 업데이트들이 상기 제 2 위치에서 보여지고 제공되는 코-브라우즈 세션을 시작하는 단계; 및
   상기 제 2 위치로부터 상기 제 1 브라우저로 스크린 공유 정보를 제공하기 위해 컨텐츠가 상기 제 2 위치에서 스크린 공유 소프트웨어에 의해 캡쳐되고 상기 제 1 브라우저로 전송되는 스크린 공유 세션을 설정(establish)하는 단계를 포함하고,
   상기 스크린 공유 세션은 상기 제 1 브라우저 내에 보여지고,
   상기 스크린 공유 세션은 상기 제 2 위치에서의 컴퓨터 모니터 상에서 나타나는 정보와 상기 제 2 위치에서의 하나 이상의 외부 소스들로 부터의 하나 이상의 비디오 피드들 중 어느 하나로부터 선택되고,
   상기 스크린 공유 세션에 포함되는 상기 제 2 위치에서의 정보의 소스는 상기 스크린 공유 세션를 종료하지 않고 변경될 수 있는,
   통합하는 방법.
2. 제 1 항에 있어서,
   상기 스크린 공유 세션은 상기 제 2 위치에서의 카메라(camera)의 비디오 피드(feed)를 포함하는,
   통합하는 방법.
3. 제 1 항에 있어서,
   상기 스크린 공유 세션은 상기 제 2 위치에서의 휴대용 핸드헬드(portable handheld) 디바이스의 비디오 피드를 포함하는,
   통합하는 방법.
4. 제 1 항에 있어서,
   상기 스크린 공유 세션은 상기 제 2 위치에서의 카메라의 비디오 피드를 포함하는,
   통합하는 방법.
5. 제 1 항에 있어서,
   상기 스크린 공유 세션은 상기 제 2 위치에서 컴퓨터 모니터 상에 나타나는 정보를 포함하는,
   통합하는 방법.
6. 제 1 항에 있어서,
   상기 스크린 공유 세션은 상기 제 2 위치에서의 외부 소스들로부터의 다수의 비디오 피드들을 포함하는,
   통합하는 방법.
7. 제 6 항에 있어서,
   상기 다수의 비디오 피드들 중 적어도 하나는 상기 제 2 위치에서의 카메라의 라이브(live) 비디오 피드인,
   통합하는 방법.
8. 제 1 항에 있어서,
   상기 제 2 위치가 상기 스크린 공유 세션을 통하여 전송되는 컨텐츠를 수신하도록 구성되는 게스트(guest)뿐만 아니라 상기 상기 스크린 공유 세션 상에서 전송되는 정보의 소스 모두가 되도록, 상기 제 2 위치에서의 사람이 상기 스크린 공유 세션을 통하여(over) 상기 제 1 브라우저로 제공되는 컨텐츠를 보도록 인에이블링하기 위하여, 상기 스크린 공유 세션에서의 게스트로서 상기 제 2 위치에 참여(join)하는 단계를 더 포함하는,
   통합하는 방법.
9. 제 1 항에 있어서,
   상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치와 연관된 컴퓨터 디스플레이 상에서 나타나는 정보인,
   통합하는 방법.
10. 제 1 항에 있어서,
    상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치에서의 카메라로부터의 라이브 비디오인,
    통합하는 방법.
11. 제 1 항에 있어서,
    상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치에서 연결된 비디오 소스로부터의 라이브 비디오인,
    통합하는 방법.
12. 제 2 위치로부터 제 1 브라우저로 정보를 제공하는 방법으로서,
    코-브라우즈(co-browse) 스크립트로 하여금 상기 제 1 브라우저에서 로딩될 웹 페이지와 관련하여 실행되도록 제공되도록 야기하는 단계 ― 상기 코-브라우즈 스크립트는, 상기 제 1 브라우저에서 HTML로 렌더링(render)되도록 그리고 상기 제 2 위치에서 재생성되도록 상기 제 1 브라우저의 컨텐츠를 인에이블링(enable)하기 위해 코-브라우즈 서비스로 포워딩되도록, 상기 제 1 브라우저의 컨텐츠에 대한 업데이트들을 인에이블링하도록 구성됨―;
    상기 웹 페이지의 뷰(view)를 기술하는 업데이트들이 상기 제 2 위치에서 보여지고 제공되는 코-브라우즈 세션을 시작하는 단계; 및
    상기 제 2 위치로부터 상기 제 1 브라우저로 스크린 공유 정보를 제공하기 위해, 컨텐츠가 상기 제 2 위치에서 스크린 공유 소프트웨어에 의해 캡쳐되고 상기 제 1 브라우저로 전송되는 스크린 공유 세션을 개시하는 단계를 포함하고,
    상기 제 1 브라우저로 제공되는 정보는 상기 제 1 브라우저의 탑(top) 상에 레이어되고(layered),
    상기 스크린 공유 세션은 상기 제 2 위치에서의 하나 이상의 외부 소스들의 하나 이상의 비디오 피드들과 상기 제 2 위치에서의 컴퓨터 모니터 상에서 나타나는 정보 중 어느 하나로부터 선택되고,
    상기 스크린 공유 세션에 포함되는 상기 제 2 위치에서의 정보의 소스는 상기 스크린 공유 세션를 종료하지 않고 변경될 수 있는,
    정보를 제공하는 방법.
13. 제 12 항에 있어서,
    상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치와 연관된 컴퓨터 디스플레이 상에서 나타나는 정보인,
    정보를 제공하는 방법.
14. 제 12 항에 있어서,
    상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치에서의 카메라로부터의 라이브(live) 비디오인,
    정보를 제공하는 방법.
15. 제 12 항에 있어서,
    상기 제 2 위치에서 상기 스크린 공유 소프트웨어에 의해 캡쳐된 컨텐츠는 상기 제 2 위치에서 연결된 비디오 소스로부터의 라이브 비디오인,
    정보를 제공하는 방법.
16. 제 12 항에 있어서,
    상기 제 1 브라우저가 보여질 수 있는(viewable) 디스플레이 상에서 나타나는 정보를 캡쳐하도록 구성되는 스크린 공유 소프트웨어의 다운로드를 개시할 것을 사용자에게 지시하기 위해, 상기 제 1 브라우저가 보여질 수 있는 상기 디스플레이 상에 프롬프트(prompt)를 디스플레이하는 단계를 더 포함하는,
    정보를 제공하는 방법.
17. 제 2 위치로부터 제 1 브라우저로의 정보를 제공하는 방법으로서,
    코-브라우즈 스크립트(co-browse script)로 하여금 상기 제 1 브라우저에서 로딩될 웹 페이지와 관련하여 실행되도록 제공되도록 야기하는 단계 ― 상기 코-브라우즈 스크립트는, 상기 제 1 브라우저에서 HTML로 렌더링(render)되도록 그리고 상기 제 2 위치에서 재생성되도록 상기 제 1 브라우저의 컨텐츠를 인에이블링(enable)하기 위해 코-브라우즈 서비스로 포워딩되도록, 상기 제 1 브라우저의 컨텐츠에 대한 업데이트들을 인에이블링하도록 구성됨―;
    상기 웹 페이지의 뷰(view)를 기술하는 업데이트들이 상기 제 2 위치에서 제공되고 보여지는 코-브라우즈 세션을 시작하는 단계 ― 마스킹된(masked) 엘리먼트들의 리스트가 상기 코-브라우즈의 스크립트와 관련하여 제공되고, 상기 마스킹된 엘리먼트들의 리스트는 상기 제 2 위치에서 상기 제 1 브라우저의 외부에서 가시적(visible)이지 않는 컨텐츠를 갖는 상기 웹 페이지의 엘리먼트들을 식별하고, 상기 마스킹된 엘리먼트들의 리스트는 방문자가 민감한 데이터를 포함할 필드들과 관련된 정보를 전송하는 것을 방지하는 것에 사용되고, 상기 마스킹된 엘리먼트들의 컨텐츠는 제 1 위치로부터 상기 제 2 위치로 전송되지 않음 ―; 및
    상기 제 2 위치로부터 상기 제 1 브라우저로 정보를 제공하기 위해 상기 제 2 위치에서 사용자에 의해 스크린 공유 세션을 개시하는 단계를 포함하는,
    정보를 제공하는 방법.
18. 제 17 항에 있어서,
    상기 제 1 브라우저로 제공되는 정보는 상기 제 1 브라우저 내의 윈도우로 제공되는,
    정보를 제공하는 방법.
19. 제 18 항에 있어서,
    상기 제 2 위치로부터 상기 제 1 브라우저로 제공되는 정보는 상기 제 2 위치와 연관된 컴퓨터 디스플레이의 뷰인,
    정보를 제공하는 방법.
20. 제 18 항에 있어서,
    상기 제 2 위치로부터 상기 제 1 브라우저로 제공되는 정보는 상기 제 2 위치에서 카메라로부터의 라이브 비디오(live video)인,
    정보를 제공하는 방법.
21. 제 18 항에 있어서,
    상기 제 2 위치로부터 상기 제 1 브라우저로 제공되는 정보는 상기 제 2 위치에서 접속되는 비디오 소스로부터의 라이브 비디오인,
    정보를 제공하는 방법.
22. 제 17 항에 있어서,
    상기 제 1 브라우저로 제공되는 정보는 상기 제 1 브라우저가 보여질 수 있는 디스플레이 상에서 나타나는 정보를 캡쳐하도록 구성되는 스크린 공유 소프트웨어를 다운로드하기 위한 프롬프트(prompt)인,
    정보를 제공하는 방법.
23. 제 17 항에 있어서,
    상기 제 1 브라우저로 제공되는 정보는 제 1 컴퓨터와 연관된 디스플레이 상에서 나타나는 정보가 캡쳐되고 상기 제 2 위치로 전송될 스크린 공유 세션을 개시하기 위하여 상기 제 1 브라우저와 연관된 상기 제 1 컴퓨터 상에서 스크린 공유 클라이언트를 런칭(launch)하기 위한 호출(call)인,
    정보를 제공하는 방법.
24. 제 23 항에 있어서,
    상기 제 2 위치에 의해 상기 스크린 공유 세션을 통한 원격 제어를 자동적으로 인에이블링하는 단계를 더 포함하는,
    정보를 제공하는 방법.

Images