DEVELOPERS

Surfly Go-live document

What’s Surfly?

Surfly enables agents to better understand and work together with the customer to solve the problem in a fast intuitive manner. With Surfly, agents can view the browser window of a customer in real-time – without any installations or downloads – making it simple, fast and safe.

Pieter van Vliet Solution Architect

“We’ve chosen to use Surfly because it fits perfectly in our strategic vision”

What is the Difference Between Co-Browsing and Screen Sharing?

Screen-sharing solutions are pixel-based, the drawback of this approach is that screen updates are slow and of low quality. What most screen-sharing tools have in common is that they require external software to be installed by the users. This makes it unsuitable for most web situations, as people are often unwilling to install extra software that circumvents the browser’s security measures.

Co-browsing is browser based, meaning that you only share the browser instead of sharing your entire screen. Co-browsing solutions usually make use of a Javascript approach, which means that the HTML, Javascript and CSS of a website are synchronized between users. With co-browsing, you can extend the online experience to multiple users, and therefore add a multi-user experience on your website.

Embedded Co-Browsing
Remove Browser
Scree Sharing (Also WebRTC)
No website changes required
Universal (iframe& 3rd party content)
Fast Performance
Fine-grained control switching
High Quality
No Installation or Extension
Can be integrated in web apps

Why Surfly?

Increase Customer Care Efficiency

By adding co-browsing, a customer care agent can gain enough insights to properly solve the customer problem. In addition, it can also be used to foster productive collaboration and improve communication between departments within an organization. This is backed by many research.

Data by Aberdeen shows that:

“The COVID-19 pandemic has been a tipping point in our working methods. Continued investments in our digital transformation made it possible to massively recourse to remote working during the crisis, which confirmed the resilience of our organization in an unprecedented context. Moreover, this crisis has reminded us of the importance of having places in which we can meet and work together.”

Increase NPS and Customer Satisfaction Scores

With Surfly’s universal co-browsing, the client can be guided across the full customer journey. The journey can not only be improved, but also extended. This can help your agents not only to identify Next Best Actions (NBA), but also act-upon them together with the client.

Mike Stocks Vice President

“We’ve been getting rave reviews from advisers who are using our integrated non-face-to-face user experience with Surfly”

This is backed by numerous researches, such as Aberdeen, Forrester, and Gartner.

“Co-browsing is helping companies accomplish far greater annual improvement in customer satisfaction scores, compared to companies without this technology (5.1% vs. 1.4%)”– Aberdeen Group 2016

“Visual Engagement Tools will, reduce call handle times, increase agent productivity, increase conversation efficiency, increase revenue, increase targeted cross-sells, increase Net Promoter Score, increase customer satisfaction and strengthen the emotional connection” – Forrester 2017

Improve Annual Company Revenue

Along with helping resolve issues, universal co-browsing also enables company reps to provide cross-sell and up-sell recommendations tailored to a customer’s unique needs.

“Visual engagement drives relationships and revenue for customer service”…,”Nationwide Building Society saw a 62% uplift in mortgage sales during the pilot of the program, and it’s now been rolled out to 400 branches. Intuit slashed support time by 50% while increasing customer satisfaction scores by 50%”. – Forrester 2017

Examples and Use-Cases

How a session starts and behaves is entirely customizable. Let’s look at some common use-cases and implementations:

Dashboard

No integration Needed

Add a Default button

From our experience our clients are able to have this up and running within: (~1 hour)

Want to add a small button to your page that offers customers the ability to request co-browsing sessions? Maybe you have a support page or an online shop where you want to offer interactive customer support.

Simply add our default code snippet (app.surfly.com/profile/integration), and a co-browsing button will appear on your page while agents are available. When clicked, your agents will receive a notification that a customer is requesting co-browsing support.

Example: https://example.surfly.com/default-button/

Session-ID / PIN

From our experience our clients are able to have this up and running within: 2 hours

Already on the phone supporting an end customer and looking to escalate the call and add co-browsing?

With our session-id flow, you can display a unique PIN code on the customers’ screen which can be shared with your support agent to identify and join a specific co-browsing request.

This can be done instantly by enabling the Surfly option ‘block_until_agent_joins’, which displays a banner and PIN at the top of the page when a session is requested. Or, you can use the JavaScript API to retrieve your session-id and display it however you like.

Example: demo.surfly.com/session_id.html

Info : https://docs.surfly.com/advanced-integration.html#header-full-featured-custom-session-id-approach

Landing Page

From our experience our clients are able to have this up and running within: 2 hours

Want a custom landing page that immediately starts co-browsing on any URL? The landing page approach can be used in a number of ways to easily start co-browsing from a redirect or shared link.

Don’t want to add JavaScript to your website directly? Simply create a static page that includes our widget and you can start sessions on this page that redirect to any URL that you want to offer support on.

Example: https://example.surfly.com/landing-page/

Info: https://docs.surfly.com/basic-integration.html#header-basic-landing-page

Chat Integration

From our experience our clients are able to have this up and running within: 2 hours

Are you already using Intercom, Zendesk, Olark, or LiveChat? We offer turnkey chat integrations that empower your agents and gives them the ability to start co-browsing sessions on the end customers page by a command within the chat widget. Starting a session will write the follower link back to the agent, who can then join the customer. The chat widget continues within the session for the customer, so the transition is easy and seamless.

You can see how this works here: youtube.com/watch?v=FrqTjltGyls

Are you using a chat provider that we haven’t listed above? Chat integration is still quite easy to set up, but requires some further integration with our JavaScript API. We can help support you in this, or we can build a project around a custom chat integration if needed.

Info: https://docs.surfly.com/basic-integration.html#header-integrate-with-custom-chat-solutions

Custom Integration

In a later section, we will dive deeper into custom integrations and explain how to use our JavaScript and REST APIs to create unique co-browsing flows, or build co-browsing sessions into other web-applications. For now, you should already know that we enable you to have complete control over every aspect of your co-browsing sessions, and you can even implement custom client-side logic which is executed on the pages you’re browsing.

Example: https://example.surfly.com/custom-button/

Customizations

Do have sensitive data that you want to mask from a certain user during a co-browsing session, or maybe you just simply want to change the look of our UI to better fit your style?

Customizing the look and feel of your Surfly co-browsing sessions is easy. We offer a long list of session options that can be changed from your dashboard so you can tailor sessions to suit your needs with little to no integration. Want to completely redesign our UI, you can do that too! Let’s look at a few customizations below.

** All session options can be set either through our dashboard, or provided as a parameter when starting our sessions through our API. For a full list of session settings see: docs.surfly.com/surfly-options.html

Naresh Ganatra Solution Architect CSAA

“We’ve tried multiple co-browsing solutions but only Surfly could address our needs”

Changing the Interface

Color – want to change the default color of our user interface so that it matches your page or theme? It can easily be changed with the session option: chat_box_color

Chat – by default a session will include a simple widget.. This can be toggled or disabled completely with the session option: docked_only

Video – by default, we offer video-chat that can begin after a session starts. Want to force video chat to start immediately you can enable: videochat_autostart. Looking to remove the option to use video-chat all together? You can set the video chat to false.

Language – easily change the language to one of 12 other localizations. Don’t have the language you need? Contact us and you can provide a translation!

More info: https://docs.surfly.com/surfly-options.html

Customizing the Button

Like the idea of a button on your website to offer co-browsing to your users, but don’t like the look of ours? Create your own button and simply include the href=”#surfly_start”. Or use our JavaScript API and Session object to start a session however you want.

Example: https://example.surfly.com/custom-button/

More info: https://docs.surfly.com/basic-integration.html#header-custom-button

Adding Confirmation Popup

Want to ask for consent and explain what users can expect before they enter a session? Display a popup and use our JavaScript API to request a session after your end customers approval.

Example: https://example.surfly.com/confirmation-popup/

Start Co-browsing Sessions From your Domain

Have you noticed that session URLs begin with “Surfly.com”? If you require a brandless white label solution we can ensure sessions start under your domain. Just share a wildcard certificate for the domain on which you want to start sessions, and we can do the rest. Have questions about this, or want an on-premise installation? You can reach us at support@surfly.com.

Customizing Emails

Want to customize the content and structure of invitation emails? We offer webhooks that can be listened to and you can send emails through your own web server, or if you have an on-premise installation you can create custom templates that we can use instead.

More info: https://docs.surfly.com/webhooks.html#top

Enable Grant- and Blocklisting

With our powerful co-browsing proxy, from one entry point you can navigate the session to any website or web application. Don’t want agents or users to be able to navigate to certain pages? You can use our grantlist and blocklist to restrict where a session can go.

More info: https://docs.surfly.com/security-functionalities.html#header-blacklist-whitelist

Control Switching

Have a button that you only want a customer to submit? With control-switching, you can disable elements when a certain user has control, or execute any JavaScript that you like to customize the behavior depending on who has control.

More info: https://docs.surfly.com/surfly-options.html#header-control-switching

Masking Sensitive Elements

With element masking, you can hide any element on any page by providing nothing more than a CSS selector for the element. Simply add the selector to a list in our dashboard, and without any integration followers within a session will no longer be able to see the element, but instead, a grey censored area.

Need to hide an element or field from the follower?

Perhaps you’re working with some sensitive data that the end-user might not want your support agent to view. Hide elements within a session by adding a unique attribute to the HTML, or embed a script on session start for dynamic masking.

Example: https://example.surfly.com/element-masking/

More info: https://docs.surfly.com/security-functionalities.html#header-element-masking

Security and Deployment

We provide secure co-browsing to many banks and insurers globally and are HIPAA, GDPR, ISO, AICPA, PCI compliant. Session data is never stored on disk. Still have concerns? We offer an on-premise installation, or even can deploy a server to your private cloud.

Surfly Cloud

Backed by multiple data centers around the world all upheld to highest security standards, you can confidently use our cloud service as no session-data is ever stored on disk and any requests in-transit are encrypted.

Have users all over the world? Our infrastructure and content delivery network will ensure native browsing and a performant experience anywhere.

Private Cloud

Do you have a security policy that dictates all servers and must be hosted on a private network? We can help you deploy an instance of Surfly in your AWS cloud.

On-premise Installation

Looking for an on-premise installation? Take complete control and place an installation wherever you like.

See: docs.surfly.com/installation/

Reporting and Back-office features

Add End of Survey Pop-up to Measure NPS and Customer Satisfaction Scores

By providing a survey URL we can immediately display your questionnaire within a window just before or right after a session is terminated. Just provide this URL as a parameter in your Session Options, and learn from your users experience.

Example: https://example.surfly.com/end-of-session-survey/

More info: https://docs.surfly.com/advanced-integration.html#header-start-end-popups

Sessions History

We offer a complete log of session history, including participants, where the session started, duration, and much more. You can easily download a CSV that includes all history from our Dashboard, or make a request for this information through our REST API.

Audit Logs

Want to log your co-browsing sessions for compliance and/or reporting purposes? You can easily enable these from your settings and set up a location where you want these to be stored. You will have all your session data like agent/customer names, start-join-end times, pages visited, mouse clicks, form inputs, controls-transferred and more recorded for you.

Want to store some analytics data from a particular page, or you just want to log what part of your application is generally browsed within a session? Log anything you want by using our session.log() function and build custom logs with our JavaScript API.

More info: https://docs.surfly.com/security-functionalities.html#header-audit-logs

CRM Integration

Have a CRM or another web-application? Do you want to collect and track sessions directly into your CRM system? We have supported a number of CRM integrations into many tools such as SalesForce, where agents can immediately start sessions with clients from their tool with anything from a command typed in chat to a click on a button in your application. This generally requires a clear understanding of our APIs, all of which is found in our documentation, however, if you want to schedule additional support, we can help consult you in how to implement.

APIs and Getting Started

Ready to get started? Our documentation includes all the information you need to implement co-browsing. However, we’re here to help you along the way. Reach out to us if you have any implementation questions, and we can even schedule some consultation if you would like to speak with one of our implementation experts to build a flow tailored for you.

Examples and Documentation

Throughout this document, we have shared a few key examples of different use-cases and customizations. Your developers can inspect the source code of these examples for some tips on how to use our JavaScript API.

Additionally, we have a examples page, and a complete reference guide for both APIs at our docs page here: docs.surfly.com

JavaScript API

This API can be used to start sessions, control the behavior within sessions, log certain key actions, or even used to build your application on top of. Want a custom UI? You can hook into events, ext ().

Use our client-side widget and JavaScript API to customize virtually anything you want from how sessions start, to what elements are displayed within a session. Listen to key events, or simply display a button. Find more here: docs.surfly.com/javascript.html

REST API

Want to start sessions from the backend of a web application? Or simply looking to manage companies, agents, and clients without using our dashboard application?

All of this can easily be done with our REST API, more here: docs.surfly.com/rest.html

Platform Integrations

Deeper Website Integration

A Surfly session builds an iframe on top of the original page and then requests the same URL as which is currently browsed, so that it passes through our proxy where we perform the synchronization. We do our best to continue sessions from the exact same point, however, if your application uses an HTTP-only cookie, this is accessible by us, and we will require some further configuration so that we can use this cookie for authentication.

We call this process session continuation, and requires the setup of a continuation-point.
More on that can be found here: docs.surfly.com/session-continuation.html#header-continuation-point

Enabling External Authentication (SSO)

By default, we support SSO based on the SAML 2.0 specifications. Simply configure SAML from your dashboard here: app.surfly.com/sso/settings/

If you use another standard for SSO please feel free to reach out and we can also implement support for additional SSO standards.

Training and Administration

Excited about co-browsing, but need help training your team in how sessions work? Or need instructions on how to administer the dashboard and manage additional agents? We’ve created user and admin guides that can help get your team up to speed quickly!

Have a large number of agents and want to meet with one of our support consultants to help on-site? Reach us at support@surfly.com.

Through the proper use of co-browsing, agents will understand that they can add value in new and effective ways, and are empowered to:

A. Increase customer retention rate by building a relationship (The “antidote” to commoditization across industries online).

B. Communicate effectively and teach end customers by interactively solving problems (Reducing callbacks and customer frustration).

C. Upsell and create new channels of revenue by transitioning support into new opportunities.

Your support agents may be quite familiar with your web application and online processes. Co-browsing helps them better empathize with and understand where end users struggle. Visual collaboration and video chat allow customers to better communicate their roadblocks.

Consultation and Professional Services

Have a strict deadline and want to coordinate tightly with our team? We can help you through the implementation process and ensure your project runs smoothly. Learn from our experiences and schedule some time with a co-browsing consultant who can analyze your use-case, and suggest an ideal flow along with the features that maximize the value added for your company.

Reach us with an inquiry at support@surfly.com.

Contact

You can reach us at support@surfly.com at for any inquiries.

Address: Singel 373, 1012WL, Amsterdam
Hours: 9AM – 7PM CET
Province: North Holland
Phone: +31 (0) 20 261 1820

About us

Surfly powers more than 200K users across leading organizations, including AXA, Generali, Achmea, CSAA insurance, Fidelis Care, Empire Life, AAA, Mazda, Sony, Ikea, and Chanel to deliver world-class customer service and experience. Headquartered in Amsterdam, we are the world’s leading provider of universal co-browsing. We have experienced strong growth and success in top international markets including Europe, North America, Asia, Africa, Australia, and New Zealand.

Companies using Surfly have created more than 1 million sessions. Surfly has 6 data centers in different geographic locations to optimize content delivery. We continually improve our capabilities and have become more tightly integrated with other partners offerings business solutions such as Cisco Finesse, NICE,  Skype for Business, and Microsoft Dynamics.