Documentation - CoSurf

Installation

Getting CoSurf up and running on your website is super simple. Just add one script tag to your site.

Step 1: Get Your Organization Key

First, grab your unique organization key from the Installation page in your dashboard.

Step 2: Add the Script

Copy and paste this code snippet right before your closing </body> tag:

<!-- CoSurf Co-browsing -->
<script>
  window.CoSurfConfig = { organizationKey: 'YOUR_KEY_HERE' };
</script>
<script src="https://cdn.co-surf.com/js/cosurf-client.js" async></script>
        

💡 Tip: Replace YOUR_KEY_HERE with your actual organization key from the dashboard.

Step 3: Verify Installation

Open your website and check the browser console. You should see a message saying "CoSurf initialized".

Quick Start

Once installed, here's how to start your first co-browsing session:

Log into your CoSurf dashboard at /login
Click "Start New Session" or navigate to the Sessions page
Share the generated session link with your customer
When they click the link, you'll see their screen in real-time

✅ That's it! You're now co-browsing with your customer.

Configuration Options

You can customize CoSurf's behavior with additional configuration options:

<script>
  window.CoSurfConfig = {
    organizationKey: 'YOUR_KEY_HERE',
    apiEndpoint: 'https://your-domain.com',  // Optional: Custom API endpoint
    enableRecording: true,                    // Optional: Enable session recording
    autoConnect: true,                        // Optional: Auto-connect on session link
    customStyles: {                           // Optional: Custom styling
      primaryColor: '#4f46e5'
    }
  };
</script>
        

Creating Sessions

There are two ways to create a co-browsing session:

From the Dashboard

Navigate to Active Sessions
Click "Create New Session"
Copy the generated link and share it with your customer

Programmatically via API

You can also create sessions using our JavaScript API (see API section below).

Using Annotations

During a session, you can use annotation tools to guide your customer:

Draw: Freehand drawing to circle or highlight elements
Point: Your cursor shows on the customer's screen
Highlight: Draw attention to specific areas
Clear: Remove all annotations with one click

💡 Tip: Use annotations sparingly for maximum impact. Too many can be distracting!

Session Recording

All sessions can be automatically recorded for later playback:

Enable recording in your configuration (it's on by default)
After the session ends, find it in Session History
Click "Playback" to watch the recording

JavaScript API

For advanced use cases, CoSurf provides a JavaScript API:

// Create a session programmatically
CoSurf.createSession({
  customerName: 'John Doe',
  metadata: { ticketId: '12345' }
}).then(session => {
  console.log('Session created:', session.id);
  console.log('Share this link:', session.url);
});

// Listen for session events
CoSurf.on('session:started', (session) => {
  console.log('Session started!', session);
});

CoSurf.on('session:ended', (session) => {
  console.log('Session ended', session);
});
        

Troubleshooting

Script Not Loading

If the CoSurf script isn't loading:

Check that the script tag is before the closing </body> tag
Verify your organization key is correct
Check browser console for any errors
Ensure no ad blockers or privacy extensions are blocking the script

Customer Can't Connect

If your customer can't join the session:

Verify the session link is correct and hasn't expired
Check that CoSurf is properly installed on the page they're visiting
Ask them to disable browser extensions temporarily

⚠️ Still stuck? Contact our support team for help.

Frequently Asked Questions

Does my customer need to install anything?

Nope! CoSurf works entirely in the browser. No downloads, no plugins, no extensions.

What browsers are supported?

CoSurf works on all modern browsers: Chrome, Firefox, Safari, and Edge. Mobile browsers are supported too!

Is my data secure?

Absolutely. All sessions are encrypted end-to-end with bank-grade encryption. Sensitive data is automatically masked.

Can I use CoSurf on mobile?

Yes! CoSurf works perfectly on mobile devices, both for agents and customers.

How many concurrent sessions can I have?

That depends on your plan. Check your billing page for details.

Need more help? Check out our support page or reach out via email.

📚 Documentation