peek in

Docs

Using Peekin is as straightforward as we could make it. You can follow this guide to learn more about its usage.

Installing Peekin

To install Peekin on your website you will need to copy and paste the following snippet of javascript on every page on your website. Usually, there is an unique place you can add it which will be automatically included on all pages.

<script>
    peekin = {api_key: "Your Api Key"};
</script>
<script src="//cdn.peekin.io/peekin.js" async></script>

In most cases, that's all you need to do.

Identifying the user

We automatically add IP information to the list of active users, and use it to find the user when integrating with live chat software.

If you'd like to add custom identification, set the identity or identities property of peekin. You can do this at any time, so changing the property in the future will update it live on the list of connected users.

peekin.identity = "John Smith";
// OR
peekin.identities = ["John Smith", 200];

Stopping Peekin from reading a specific input's values

If you collect sensitive data on your website, such as credit card information, it is your obligation to prevent data leakage. To prevent Peekin from watching a specific input, textarea, or select element, you can add the dont_peek CSS class to it or any of its parents.

This will turn all characters in the input into asterisks.

You will not need to do this for password inputs, as this is enabled by default.

Using the application

Once you have installed peek in, you will see a list of logged in users on the homepage. Clicking on one will show their screen.

The list is ordered by how recent a session is, with the most recent at the top. It is further sorted by idleness, so idle session will be at the bottom and are faded. A timer on each element shows how long the person has been active (green) or idle (red). Items with a red border represent disconnected users, whom will be removed from the list within a few seconds if they don't reappear.

Watching an user

When you click on an element in the list, the user's screen (limited to the window) will appear.

Using event hooks

Sometimes, you might want to integrate your existing code with Peekin. To do this, you'll need to use event hooks so you can get the information you need, when you need it.

Getting the Peekin id

To get the link your support team can use to watch your user's screen, you can register a after_init hook and grab the Peekin id from window.peekin.peekin_id.

Here's an example

<script>
    peekin = {
        api_key: "Your Api Key"
        hooks: {
            after_init: function(){
                var watch_link = 'https://peekin.io/' + window.peekin.peekin_id;
                // ... your own code
            }
        }
    };
</script>

Alerting the user when they are being watched

If you'd like to display a warning to the user that they are being watched, you can use the session_start and session_end hooks.

Here's an example

<script>
    peekin = {
        api_key: "Your Api Key"
        hooks: {
            session_start: function(){
                // Tell the user someone is watching them
            },
            session_end: function(){
                // Remove watch warning
            }
        }
    };
</script>