<script src="https://cdn.yousign.tech/iframe-sdk-1.6.0.min.js" integrity="sha384-/7MD1voOOzWVz7FmgeMwmmd1DO85Mo0PkkxdYd9j2wDGzGDGRG/phgnL0c9Xyy52" crossorigin="anonymous"></script>

<script src="https://cdn.yousign.tech/iframe-sdk-1.6.0.js" integrity="sha384-R+s/yjLK/cbrNa3CN+AZ62oJ0C2aGzcSsGYpTnX/SI89pmrEGlAWUCdzkR2RuVR6" crossorigin="anonymous"></script>

const yousign = new Yousign({
  signatureLink: 'signature_link',
  iframeContainerId: 'iframe-container',
  isSandbox: false,
  iframeAttributes: {
    referrerPolicy: 'origin-when-cross-origin'
  },
});

yousign.onStarted((data) => {
  console.log("Signer has opened the signature");
	console.log(data);
});

yousign.onSuccess((data) => {
  console.log("Signer has successfully signed the document");
	console.log(data);
});

yousign.onError((data) => {
  console.log("Signer encountered an error when signing");
	console.log(data);
});

yousign.onPing((data) => {
  console.log("Ping - The signature request is loaded");
  console.log(data);
});

yousign.onDeclined((data) => {
  console.log("Declined - The signer declined the signature");
  console.log(data);
});

yousign.onSignatureDone((data)=> {
  //You can download the document with all signatures in it
  console.log("Signature Done - The signature request is completed");
  console.log(data);
});

{
   "type":"yousign",
   "event":"success",
   "signer_id":"18be1ef3-9d0c-4ed2-8ba3-273a9138d743",
   "signature_request_id":"60620011-8b1a-4957-8733-67969f855877",
   "answers":[
      {
         "field_id":"00f22ce7-cdb2-45e3-becd-6face7ca8c39",
         "field_type":"checkbox",
         "checked":true,
         "optional":false
      },
      {
         "field_id":"dd55cceb-4ce1-4fcb-936e-8f17c7d960c5",
         "field_type":"text",
         "question":"How are you ?",
         "answer":"Very Good"
      },
      {
      	 "field_id":"050b5425-5a7a-496b-ab92-b9c9c2ce46b2",
         "field_type":"radio_group",
         "optional":false,
         "radios":[
            {
               "radio_id":"9d084514-9b3a-4504-b3dd-52736da112b4",
               "checked":false,
               "name": "radio 1 name",
               "x": 130,
               "y": 135
            },
            {
               "radio_id":"eaf1b8e9-5ab0-4870-9733-8746559ed98d",
               "checked":true,
               "name": "radio 2 name",
               "x": 160,
               "y": 165
            }
         ]
      }
   ]
}

let ys = null;

if (ys) {
  ys.removeMessageListener();
}
else {
  ys = new Yousign({
    signatureLink: signature_link,
    iframeContainerId: 'iframe-container',
    isSandbox: false,
  });
}

<iframe src="{{signature_link}}"></iframe>

window.addEventListener('message', function(e) {
  // Check if the origin of the message is really come from Yousign
  if(e.origin === 'https://yousign.app' && e.data.type === 'yousign'){
    
    if(e.data.event === 'started'){
      console.log("Signer has opened the signature");
    }
    
    if(e.data.event === 'success'){
      console.log('Signer has successfully signed the document');
    }
    
    if(e.data.event === 'error'){
      console.log("Signer encountered an error when signing");
    }
    
    //Healthcheck, for debug only
    if(e.data.event === 'ping'){
      console.log("Ping - Signature request is loaded");
    }
    
    if(e.data.event === 'declined'){
      console.log("Declined - The signer declined the signature");
    }
    
    if(e.data.event === 'signature.done'){
      console.log("Signature Done - The signature request is completed");
    }
  }
});