Back to top

Security functionalities


Surfly has some security measures built in. On a more global scale, you’ll find more info here. Below you will find more info on the different security functionalities you can add to your Surfly integration.

Reminder: You can implement these settings through the Surfly dashboard or the Javascript API. When you implement settings through the JS API, these will take priority over the settings in the Surfly dashboard.




Blacklist / Whitelist


By adding URLs to the blacklist and/or whitelist, you can restrict your users from navigating to other websites.

Option Default Description
blacklist “[]” Restrict access to the specific resources.
whitelist “[]” Restrict access to the specific resources.

Field masking

With field masking you can mask form fields for followers, so that they can’t see the leader’s input. By default, Surfly already masks creditcard and password fields. If you want to mask other fields, you just have to add the surfly_private attribute to fields containing sensitive information:

<span>Email address</span>
<input type="text" size="20" surfly_private>



Control dependent appearance


During your Surfly co-browsing session it’s possible to pass control of the page between participants. It’s also possible to change the behaviour of your website while co-browsing, depending on who has control. We can use the example of filling out a payment form as a proof of concept to demonstrate how this might be useful…


Let’s say you are co-browsing with a customer and the agent has taken over control, but you don’t want them to be able to submit forms or orders. With the .on() method we can disable the submit button when the agent is given control, only allowing the customer to confirm the payment:


<script>
  (function(s,u,r,f,l,y){s[f]=s[f]||{init:function(){s[f].q=arguments}};
  l=u.createElement(r);y=u.getElementsByTagName(r)[0];l.async=1;
  l.src='https://surfly.com/surfly.js';y.parentNode.insertBefore(l,y);})
  (window,document,'script','Surfly');

  Surfly.init({widget_key:'**your widget key here**'}, function(init) {
    if (init.success) {

    // display the default Surfly button
      Surfly.button();

      // ADD THE PART BELOW TO THE BASIC SURFLY SCRIPT
      var sess;
      if(!Surfly.currentSession){
        sess = Surfly.session();
      }
      else {
        sess = Surfly.currentSession;
      }
      sess.on('control', function(session, event) {
        var element = document.getElementById("order_button");
        // Specify that you DON'T want the limitations to apply to the leader
        // Use index 0 for the leader, and 1, 2, etc. for the followers
        if (event.to==0) {
          element.disabled = false;
          element.style.backgroundColor = "#87cefa";
        }
        // Apply the limitations to everyone else when they are in control
        else {
          element.disabled = true;
          element.style.backgroundColor = "#e6fff2";
        }
      })
      // UNTIL HERE

    }
  });
</script>

Generated by aglio on 14 Dec 2018